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

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

Привет друзья, у меня такой вопрос.. перед очередным проектом передо мной стал вопрос сделать темную тему для сайта. Искал множество решений в интернете, но так нечего и не нашел. Прошу вашей помощи.. необходимо сделать кнопку которая меняла бы файл стилей по клику к примеру
<link rel="stylesheet" href="light.css">
на
<link rel="stylesheet" href="dark.css">
А главное что бы скрипт сохранял изменения в localStorage. Что бы при перезагрузки страницы у пользователя сохранялась тема которую он выбрал. Подскажите пожалуйста.. увы знаний по js еще не набрался.. Спасибо!
  • Вопрос задан
  • 2756 просмотров
Подписаться 4 Простой 3 комментария
Ответ пользователя MentozZz ORG К ответам на вопрос (5)
@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
Ответ написан