Design

Один сайт — две разные темы

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

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

Skillbox

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

Код

Код достаточно простой. Я просто написал отдельное CSS-правило для темной темы.

Так как у меня начались проблемы с тем, что некоторые свойства конфликтовали с другими, мне пришлось использовать !important, чтобы повысить приоритетность конфликтующих свойств темной темы. Однако я знаю, что использовать !important не рекомендуется, поэтому в ближайшем будущем я попытаюсь решить эту проблему несколько иначе.

Для работы переключателя тем я написал следующий JS-код:

Сначала я выбрал div с идентификатором light-dark-mode-container и добавил к нему прослушиватель событий. Затем объявил переменную everything, которая выбирает весь контент на странице, а также projectTiles, потому что этот класс принадлежит определенному набору оверлеев, и я не хочу, чтобы цвет фона был сплошным.

Далее, поскольку я использую querySelectorAll, который возвращает статичный NodeList, я перебираю все элементы в обоих NodeLists, а затем либо подключаю класс dark, либо полностью удаляю его из элементов, возвращаемых переменной projectTiles.

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

Конечный результат
Следующая страничка моего сайта в темном режиме

Вот и все. Надеюсь, что вы разобрались с моим кодом! Удачного вам дня!

Перевод статьи Jonathan Sexton: How I added dark mode to my website

Ещё статьи по теме web development & design