Недавно я переделал свой сайт. Вот 2 изображения того, как это выглядело для справки:

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

Прежде чем мы продолжим: Загрузите мои 15 бесплатных электронных книг о JavaScript, React, Python, Svelte и многом другом!

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

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

Намного лучше! Контент, самое главное, более заметен.

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

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

Как я это сделал? Во-первых, я добавил Moon Emoji 🌓 на боковой панели, чтобы люди могли менять режим со светлого на темный.

Затем я добавил фрагмент кода JavaScript, который запускается при нажатии. Я просто добавил его в обработчик событий onclick, встроенный в HTML, без всяких наворотов:

<p>
  <a href="#" onclick="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')" title="Dark/light
</p>

Это JavaScript, который запускается в onclick:

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')

Это немного запутано, но в основном я проверяю, является ли свойство mode в локальном хранилище темным (и по умолчанию имеет значение темное, если оно еще не установлено, с помощью оператора ||), и я устанавливаю противоположное этому в локальном хранилище. место хранения.

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

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

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
}

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

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

<body class="dark"> ... </body>

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

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

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

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

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

Спецификация Media Queries Level 5, работа над которой еще продолжается, содержит новую prefers-color-scheme функцию мультимедиа. Safari Technology Preview в 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.