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

Автор оригинала: Flavio Copes.

Я недавно переработал мой сайт Отказ Вот 2 фотографии того, как это Посмотрел Для справки:

Я разработал этот сайт почти 1 год назад и проделал много изменений по пути, как мы делаем с любым веб-сайтом.

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

Я сел вчера вечером и начал передать сайт, и я закончил редизайн этим утром:

Намного лучше! Содержание, самое главное, более заметно.

Я использовал моноспущенный шрифт (Inconsolata), потому что в качестве блога программирования он хороший, несмотря на уменьшенную читаемость и увеличенный размер страницы из-за использования шрифта, потому что I хочу Этот шрифт на моем сайте. Мне это нравится лучше, и так как мой сайт – большая часть моей повседневной деятельности, я хотел, чтобы это было то, что я хочу.

Я просто пропустил одну вещь: Темный режим Отказ Как я был в процессе переработки, у меня имеется вариант темного режима.

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

Затем я добавил фрагмент JavaScript, который работает, когда он нажал. Я только что добавил его в OnClick Обработчик событий встроенный в HTML, не собираясь Fancier:

  
localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

Это немного запутано, но в основном я проверяю, если Режим Недвижимость в Местное хранение Является ли «темным» (и по умолчанию в темноте, если он еще не установлен, используя оператор

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

Другой скрипт работает как можно скорее, и проверяет, является ли режим темным. Если это так, добавляет темный класс к Тело HTML-элемент:

document.addEventListener('DOMContentLoaded', (event) => {  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')})

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

Затем я добавил много инструкций CSS к CSS, все с префиксом Body.dark. . Как это:

body.dark {  background-color: rgb(30,34,39);  color: #fff;}body.dark code[class*=language-],body.dark table tbody>tr:nth-child(odd)>td,body.dark table tbody>tr:nth-child(odd)>th {  background: #282c34}

Теперь вещи уже должны работать! Вот мой сайт в темном режиме:

Я добавил темный класс к Тело Элемент по умолчанию, чтобы сделать темный режим по умолчанию:

 ... 

Почему? Во-первых, мне понравилось это лучше. Затем я сделал опрос в Twitter, и люди понравилось лучше.

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

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

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

Я предпочел бы сделать это в режиме света: показать темную страницу для пары миллисекунды, а затем снова повернуть его белым.

СМИ Уровень 5 Спецификация, все еще в работе в процессе, содержит новый Предпочитает-цветную схему СМИ особенность. Просмотр технологии Safari На MacOS уже поддерживает его, и мы можем использовать его, чтобы сообщить, что пользователю просматривает страницу в темном или легком режиме:

@media (prefers-color-scheme: dark) {  body {    background-color: black;    color: white;  }}@media (prefers-color-scheme: light) {  body {    background-color: white;    color: black;  }}

Надеюсь, это скоро будет стабильным в Safari, и в будущем Chrome и Firefox тоже его поддержит.

Первоначально опубликовано flaviocopes.com .

Оригинал: “https://www.freecodecamp.org/news/how-i-added-dark-mode-to-my-website-33611d246425/”