Есть задача сделать две темы оформления сайта - день/ночь. Я написал второй файл стилей для темной темы и решил подключать его к странице с помощью JavaScript. Логика в том, чтобы при клике на переключатель, внутри тега head дописывался новый link с нужным файлом стилей.
HEAD сайта:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/fav.png" type="image/png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css"> //После этой строки нужно добавить еще одну с другим файлом стилей
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/blobs.css">
<title>Ideo - интернет-маркетинг и разработка сайтов</title>
</head>
Переключатель:
<div class="switch">
<input type="checkbox" id="changeTheme" class="hoverable" onclick="darkTheme()">
</div>
Скрипт:
function darkTheme()
{
var checkbox = document.getElementById('changeTheme'),
newLink = document.createElement('link'),
head = document.getElementById('head');
if(checkbox.checked){
newLink.rel = "stylesheet";
newLink.href = "css/dark.css";
newLink.id = "link";
head.insertBefore(newLink, head.children[7]);
}else{
link.remove(newLink);
}
}
Вот так подключил скрипт в конце страницы:
В результате этих всех действий я получил ошибку в консоли (см. скриншот) и смена стилей не произошла:
Как это исправить?
Простой