Недавно я переделал свой сайт. Вот 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.