Ночная тема для сайта

Кнопка, которая добавляет и запоминает к тегу <body> класс dark, которым можно перекрасить весь сайт.

Пример:

HTML:

CSS:

А далее добавляем к нужным элементам сайта дополнительные цвета, например имеем:

Добавляем:

В этом примере я использовал массовую замену фона и шрифтов, добавив:

Но так лучше не делать, т.к. может измениться лишнее, а что-то нужное нет.

JS:

JS используется для того, чтобы запомнить сделанный выбор и вывести его при загрузке страницы.

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Вова:

    Кто поможет, как сделать что бы после перехода между страницами или после обновления страницы повторно не включался светлый режим, а только после переключения ползунка.

    Ответить
    • Alexander:

      Скрипт запомниает же нажатие.

      Ответить
  • Roudeep:

    Спасибо большое вам за ваши скрипты это очень удобно я добавил снег в ссылка ! Bы супер ребята

    Ответить
  • Иван:

    Откуда взялся theme в getItem('theme')?

    Ответить
    • Alexander:

      Это название ключа, можно tema написать везде, если так больше нравится.

      Ответить