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

Пример:

HTML:

CSS:

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

Добавляем:

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

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

JS:

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

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

Оформления логотипа сайта новогодним элементом на примере лого ВКонтакте

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

Падающий снег для шапки, секций или фотографий

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

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

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

  • SOME:

    А ведь можно сделать div блок который покрывает всё пространство с фильтром invert(...)

    И тогда нужно написать скрипт чтобы при нажатии на кнопку был filter:invert(100);
    а если ещё раз нажать то filter:invert(0);

    Вот материал(я просто в JavaScript не шарю)

    /*style*/
    .tema{
    position:fixed;
    top:0px;left:0px;right:0px;bottom:0px;
    backdrop-filter:invert(0);
    transition: all 5s easy;
    }
    

    А далее сама страница

    <!html!>
    <div class="tema"></div>
    Этот текст после того как ты нажмёшь на кнопку станет белым<br>соотвественно фон станет ЧЁРНЫМ
    

    Если несложно то пожалуйста можете написать для кода JavaScript код
    заранее спасибо!

    Ответить
    • Alexander:

      Интересный вариант 🙂

      JS оставляйте такой как есть
      HTML так, как вы написали, только <div class="tema"></div> под <body>
      CSS:

      .tema {
          position: fixed;
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          backdrop-filter: invert(0);
          transition: all 5s ease;
          pointer-events: none;
          z-index: 99999999;
      }
      body.dark .tema {
          backdrop-filter: invert(100);
      }

      И дополнительно можно делать корректировки, например на фото:

      body.dark img {
          filter: invert(100);
      } 
      Ответить
  • Вова:

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

    Ответить
    • Alexander:

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

      Ответить
  • Roudeep:

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

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

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

    Ответить
    • Alexander:

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

      Ответить