Как добавить темный режим на свой сайт

Прежде чем мы начнем, я хотел бы предварить это, сказав, что это статья о программной стороне темного режима. Информацию о дизайне см. в этой очень полезной и подробной статье @abhirajb → https://hackernoon.com/how-to-implement-dark-mode. -5-основных-советов, которые нужно запомнить

Используемые технологии

• HTML

• CSS

• Ванильный JS (локальное хранилище)

Верно, начнем.

Итак, вы хотите добавить темный режим на свой веб-сайт, потому что это то, что делают все крутые ребята. Я был в таком же положении, потом немного погуглил и теперь я мастер, так что садись, открывай свой редактор и слушай мои слова.

Нам нужны четыре вещи.

1. Чтобы узнать, какая клиентская система предпочитает темный режим.

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

1. Прослушать, изменились ли системные предпочтения клиентов.

1. Прослушать, изменились ли предпочтения веб-сайта.

HTML…

Вот мой чертовски крутой сайт. Я создал index.html в корне пустой директории.

```javascript

<головной язык="en">

<мета-кодировка="utf-8">

<тело>

Мой замечательный сайт

Этот веб-сайт является веб-сайтом.

Темный режим

Как видите, есть элемент кнопки. Мы будем использовать это для включения или выключения темного режима. Также есть ссылка на два внешних ресурса: файл javascript для хранения логики темного режима и css, где живут правила стиля для темного режима.

Вот как это выглядит сейчас, без темного режима

Javascript

Теперь пришло время построить логику для определения того, когда применяется темный режим.

Давайте напишем небольшую логическую таблицу, чтобы убедиться, что наш код следует разумному набору правил. Я хочу, чтобы предпочтение веб-сайта имело приоритет над предпочтением системы при переключении, а предпочтение системы имело приоритет над предпочтением веб-сайта при его переключении. Но вы можете выбрать свою собственную логику, это просто имеет смысл в моем извращенном мозгу. Он также предлагает хороший рецепт для написания кода.

| Логический идентификатор | Пользователи Операционная система по умолчанию | предпочтения веб-сайта | Исход темного режима |

| 1 | Свет | Свет или нет | Свет |

| 2 | Свет | Темный | Темный |

| 3 | Темный | Темный или нет | Темный |

| 4 | Темный | Свет | Свет |

| 5 | Свет | Свет (переключается) | Свет |

| 6 | Свет | Темный (переключен) | Темный |

| 7 | Темный | Темный (переключен) | Темный |

| 8 | Темный | Свет (переключается) | Свет |

| 9 | Свет (переключается) | Свет | Свет |

| 10 | Свет (переключается) | Темный | Свет |

| 11 | Темный (переключен) | Темный | Темный |

| 12 | Темный (переключен) | Свет | Темный |

Теперь откройте darkmode.js и начните печатать…

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

```javascript

// Это проверяет правильность загрузки DOM, прежде чем мы начнем с ним возиться

document.addEventListener («DOMContentLoaded», функция (событие) {

// здесь логика DM...

Остальной код будет внутри этого прослушивателя событий.

1. Выбор кнопки-переключателя и элементов тела…

```javascript

// Выбираем элемент тела

пусть тело = документ.querySelector('тело')

// Выбираем кнопку темного режима

let darkMode = document.querySelector('#darkmode-button');

Это позволит нам проверить, была ли нажата кнопка темного режима, и прикрепить класс к элементу body.

1. Настройка вспомогательных функций…

Они сделают страницу темной или светлой.

Мы сделаем две вещи в наших функциях. Во-первых, добавьте «темный» класс к нашему элементу body. Это вызовет применение классов css к странице. Во-вторых, добавьте выбранную нами настройку в локальное хранилище в браузере, чтобы мы могли сохранить настройку темного режима на всех страницах веб-сайта, а также запомнить настройку, когда пользователь вернется.

```javascript

// Вспомогательные функции

константа makeDark = () => {

body.classList.add ("темный");

localStorage.setItem('темный режим', 'темный');

константа makeLight = () => {

body.classList.remove ("темный");

localStorage.setItem('темный режим', 'светлый');

1. Растопить масло и добавить муку…

При запуске проверьте системные настройки и проверьте локальные настройки браузера. Это касается логических идентификаторов от 1 до 4 в моей логической таблице.

После вспомогательных функций добавьте следующий код.

```javascript

// 1-4

if (window.matchMedia && window.matchMedia('(предпочитает цветовую схему: светлая').matches && localStorage.darkMode !== 'темная') {

// Система легкая, веб-сайт легкий или нет предпочтений = Сделать легким

сделать свет();

else if (window.matchMedia && window.matchMedia('(предпочитает цветовую схему: светлая').matches && localStorage.darkMode === 'темная') {

// Система светлая, сайт темный = Сделать темным

сделать темным();

else if (window.matchMedia && window.matchMedia('(предпочитает цветовую схему: темный').matches && localStorage.darkMode !== 'светлый') {

// Система темная, веб-сайт темный = Сделать темным

сделать темным();

еще {

// Система должна быть темной, веб-сайт должен быть светлым или без предпочтений

сделать свет();

1. Работа с пользователем, нажимающим кнопку…

Слушайте щелчки пользователя и работайте с логическими идентификаторами 5-8, которые в основном говорят, что если пользователь меняет темный режим, делайте именно то, что он хочет. Поэтому мы можем игнорировать системные настройки.

```javascript

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

darkMode.addEventListener('щелчок', function() {

если (localStorage.darkMode === 'свет') {

сделать темным();

} еще {

сделать свет();

1. Когда система переключает предпочтения

Здесь вы можете возразить, что пользовательские предпочтения веб-сайта должны иметь приоритет, но я думаю; если пользователь не установил предпочтение на веб-сайте, и его система меняет предпочтение темного режима в зависимости от времени суток, веб-сайт должен следовать этому.

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

Разглагольствовать…

Работа с изменениями системных настроек

```javascript

// 9-12 Добавьте прослушиватель событий, который проверяет изменения системных настроек, делайте именно то, что он говорит

window.matchMedia('(предпочитает цветовую схему: темный)').addEventListener('change', event => {

если (событие.совпадает) {

сделать темным();

} еще {

сделать свет();

Файл Javascript готов!

Окончательный JS-файл…

```javascript

// Это проверяет правильность загрузки DOM, прежде чем мы начнем возиться с ним

document.addEventListener («DOMContentLoaded», функция (событие) {

// Выбираем элемент тела

пусть тело = документ.querySelector('тело')

// Выбираем кнопку темного режима

let darkMode = document.querySelector('#darkmode-button');

// Вспомогательные функции

константа makeDark = () => {

body.classList.add ("темный");

localStorage.setItem('темный режим', 'темный');

константа makeLight = () => {

body.classList.remove ("темный");

localStorage.setItem('темный режим', 'светлый');

// 1-4

if (window.matchMedia && window.matchMedia('(предпочитает цветовую схему: светлая').matches && localStorage.darkMode !== 'темная') {

// Система легкая, веб-сайт легкий или нет предпочтений = Сделать легким

сделать свет();

else if (window.matchMedia && window.matchMedia('(предпочитает цветовую схему: светлая').matches && localStorage.darkMode === 'темная') {

// Система светлая, сайт темный = Сделать темным

сделать темным();

else if (window.matchMedia && window.matchMedia('(предпочитает цветовую схему: темный').matches && localStorage.darkMode !== 'светлый') {

// Система темная, веб-сайт темный = Сделать темным

сделать темным();

еще {

// Система должна быть темной, веб-сайт должен быть светлым или без предпочтений

сделать свет();

// 5-8 Добавьте прослушиватель событий, который проверяет нажатие кнопки, делает именно то, что говорит кнопка

darkMode.addEventListener («щелчок», функция () {

если (localStorage.darkMode === 'свет') {

сделать темным();

} еще {

сделать свет();

// 9-12 Добавьте прослушиватель событий, который проверяет изменения системных настроек, делайте именно то, что он говорит

window.matchMedia('(предпочитает цветовую схему: темный)').addEventListener('change', event => {

если (событие.совпадает) {

сделать темным();

} еще {

сделать свет();

Наконец, CSS

До сих пор все, что мы видели, это переключение тега body с помощью класса .dark и изменение локального хранилища.

Здесь мы переходим к darkmode.css и добавляем стили, специфичные для темного режима. Все, что мне нужно для моего сайта, это два объявления и два селектора. Ваш, вероятно, будет более сложным. Но помните, что все, что вам нужно сделать, чтобы что-то изменить в темном режиме, — это написать объявление с body.dark перед селектором. Скорее всего, многие элементы на вашей странице будут иметь похожий стиль, поэтому вы можете связать селекторы, как я сделал ниже…

```javascript

/ Стиль темного режима /

тело.темное,

кнопка body.dark {

цвет фона: черный;

белый цвет;

СПАСИБО ЗА ПРОЧТЕНИЕ, Наслаждайтесь своими веб-сайтами в новом крутом темном режиме!