Задать вопрос
valgerofficial
@valgerofficial
javascript

Как лучше сделать темную/светлую тему для сайта?

Привет друзья, у меня такой вопрос.. перед очередным проектом передо мной стал вопрос сделать темную тему для сайта. Искал множество решений в интернете, но так нечего и не нашел. Прошу вашей помощи.. необходимо сделать кнопку которая меняла бы файл стилей по клику к примеру
<link rel="stylesheet" href="light.css">
на
<link rel="stylesheet" href="dark.css">
А главное что бы скрипт сохранял изменения в localStorage. Что бы при перезагрузки страницы у пользователя сохранялась тема которую он выбрал. Подскажите пожалуйста.. увы знаний по js еще не набрался.. Спасибо!
  • Вопрос задан
  • 2643 просмотра
3 комментария
Подписаться 4 Простой 3 комментария
Решения вопроса 2
@generate
...
Так можно изменить ссылку на стиль
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="light.css" class="style">
</head>
<body>

<button id="color">Сменить цвет</button>

<script type="text/javascript">
	if (localStorage.getItem('style') == 'dark') {
		document.querySelector('.style').href="dark.css";
	}
	document.querySelector('#color').onclick = function (){
		if (document.querySelector('.style').getAttribute('href') === 'light.css') {
			document.querySelector('.style').href="dark.css";
			localStorage.setItem('style', 'dark');
		} else {
			document.querySelector('.style').href="light.css";
			localStorage.setItem('style', 'light');
		}
	}
</script>

</body>
</html>


Но лучше использовать селекторы чтобы менять стиль. И использовать один css файл

<style type="text/css">
	body {
		background: #fff;
		color: #000;
	}
	#color {
		color: #fff;
		background: #000;
	}
	.dark {
		background: #000;
		color: #fff;
	}
	.dark #color {
	color: #000;
	background: #fff;
	}

</style>



<button id="color">Сменить цвет</button>
<script type="text/javascript">
	if (localStorage.getItem('style') == 'dark') {
		document.body.classList.toggle('dark');
	}
	document.querySelector('#color').onclick = function (){
		document.body.classList.toggle('dark');
		if (document.body.getAttribute('class') == 'dark') {
			localStorage.setItem('style', 'dark');
		} else {
			localStorage.setItem('style', '');
		}
	}
</script>
Ответ написан
Комментировать
Комментировать
PiSaiK
@PiSaiK
IT куратор
Всё гораздо проще. Современные браузеры понимают вот такую прелесть


Дальше можно пойти вот так.
Как определить тему на устройстве?
Мы в проектах делаем вот так. Определяем тему, и записываем куки.
var toggleSwitch = $('[data-theme="toggle"]');
// Получение значения куки
    var currentTheme = Cookies.get('theme');

// Если значение undefined (т.е. пользователь первый раз на сайте или не выбрал явно тему)
if (typeof (currentTheme) === 'undefined') {
    // Проверяем тему ос, если она темная, то дописываем значение dark
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        Cookies.set('theme', 'dark');
        // Присваиваем значение переменной - dark
        currentTheme = 'dark';
    }
}

if (currentTheme === 'dark') {
    $('html').attr('data-theme', currentTheme);
    toggleSwitch.attr('checked', 'checked');
}


Еще несколько решений
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 3
@DrWeyber
Лучше сделать цвета переменными, а потом просто меня цвета переменных, если используете препроцессор, посмотрите примеры в интернете
Ответ написан
2 комментария
2 комментария
@Gor_Ohanyan
Лучше не париться и поставить вот такой вот модуль 
<link rel="stylesheet"
                     type="text/css" href="https://онлайн.net/black/dark-style.css"> <script src="https://онлайн.net/black/dark.js"></script> <button class="btn-darkstyle" onclick=enableDark() style="font-size: 25px;"></button> <button class="btn-darkstyle" onclick=disableDark() style="font-size: 25px;"> </button><!-- var _acic= {dataProvider:10};(function(){var e=document.createElement ("script");e.type="text/javascript";e.async=true;e.src="//www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}) () //--> </script> <script> function disableDark() { DarkReader.disable (); localStorage.setItem('bgcolor', 1); } function enableDark() { localStorage.setItem('bgcolor', 0); DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 }); } if (localStorage.getItem('bgcolor') == 1) disableDark(); else enableDark(); </script>


Который все сам делает
Вот их официальный сайт Dark.Онлайн.Net
Ответ написан
1 комментарий
1 комментарий
@karfogent
Я создал 2 файла css: base1 и base2(где белая и чёрная тема, соответственно), в них хранились переменные, при чём с одинаковым названием, но разным значением в зависимости от файла.
В main.js добавил функцию по импортированию первого или второго файла css в зависимости от значения переменной theme(dark-theme или light-theme) в локальном хранилище таким образом:
if (localstorage.theme === "dark-theme") {
   import(путь к файлу)
} else {
   import(другой путь к файлу)
}

Дальше в файле, в моём случае это был компонент vue, добавлял слушатель событий по нажатию на иконку, в этом слушателе я устанавливал при помощи localstorage.setItem() тему в зависимости от иконки(солнца/луна), релоудил страницу и вызывал функцию из main.js, которую предворительно импортировал в мой компонент. Надесь было полезным :)
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы