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

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

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

Установка Темной версии для сайта будет состоять с 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="/img/darkthem1.png" alt="Темная тема для сайта" title="Темная тема для сайта" style="max-width: 20px; margin-top: -3px; cursor: pointer;"></a>

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