Темная тема для сайта

Вы задумывались, а как сделать для сайта темную тему? Если задумывались, это правильно так как чтобы пользователь оставался у вас на сайте даже в ночное время и продолжал читать контент, ему нужно создать все условия. Представьте ситуацию, есть сайт светлого оформления, днем он удобен для чтения, а ночью в темное время суток он своей светлостью выедает глаза, вот это основная проблема которая создает дискомфорт ночью, сегодня мы постараемся решить эту проблему и создать все условия для комфортного чтения сайта даже ночью.

Решение которое мы будем использовать не является нагромождением для кода сайта, всего несколько строк стилей, небольшой скрипт и кнопка включения / включения темной версии.

Установка Темной версии для сайта будет состоять с 3-х пунктов:

1. Установить в таблицу стилей CSS следующие стили:

 html .dark * {
 background-color: #1d1c1c !important;
 color: #fff!important;
 }

2. Установить в глобальный блок нижняя часть сайта или же просто перед тегом </body> скрипт:

 <script type="text/javascript">
 $(function(){
 var gun = localStorage.getItem('name') === null || localStorage.getItem('name') === 'false' ? false : true;
 $("body").toggleClass("dark", gun);
 $(".change").on("click", function() {
 $("body").toggleClass("dark");
 var gun = $('body').is('.dark'); 
localStorage.setItem('name', gun); 
 });});
 </script>

3. Последний пункт, это установка кнопки для включения / выключения темной версии, в удобном для вас месте в шаблоне установите кнопку:

<a type="btn" class="change"><img src="https://abclinux.org/img/darkthem1.png" alt="Темная тема для сайта" title="Темная тема для сайта" style="max-width: 20px; margin-top: -3px; cursor: pointer;"></a>

вот как-бы и все, ничего сложного в этом нет, просто подменяется фон на темный и цвет текста делается белым. Результат работы темной темы вы можете видеть нажав в шапке сайта на иконку лампочки или полумесяца. Если у вас есть лучшее решение "Темной темы для сайта", готов посмотреть на него и оценить. Оставляйте свои комментарии к материалу с вашими решениями по данному вопросу.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы: Похожие материалы не найдены.
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Меня всегда раздражали темные оформления сайтов людей. А вот о том что их удобно читать ночью, я не задумывался. А ваше решение открывает сайт в какой теме  при заходе на него. По умолчанию?
Я к вам попал когда, сайт был в ночной оранжировке.
Автор: Проблема решена!
avatar
Спасибо за замечание. Посмотрим и доработаем скрипт, вероятно что-то не так срабатывает.
E
а как для boostre сделать?
avatar
Ищите плагины, я так понимаю там все плагинами делается.
avatar
А как сделать, чтобы при увеличении картинки и карты черным не заливались?
avatar
По поводу картинки, в стили дописать:

Цитата
html .dark .fancybox-nav.fancybox-prev,html .dark .fancybox-nav.fancybox-next {background-color:transparent!important;}
а по поводу карты, нужно видеть конкретный пример сайт с проблемой, тогда я могу посмотреть и подсказать что поправить или дописать.
avatar
Здравствуйте, доброго времени суток.Помогите пожалуйста, сделал всё как описано в статье.Но код не работает.Я только начал изучать фронтенд, поэтому не знаю как решить проблему,возможно я где-то косякнул.Прикрепляю ссылку на репозитории GitHub https://github.com/FalseHuman/dark-mode Заранее, спасибо!
avatar
Добавьте к данному коду в блок хеад библиотеку квери, любую, например

Цитата
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Вот пример, тест: https://abclinux.org/File/dark.html 
И еще, если планируете делиться на гитхабе, укажите ссылку на первоисточник автора скрипта.
avatar