Здравствуйте друзья!
Хотя я занимаюсь бэкэнд-разработкой, в моих проектах нередко приходится охватывать весь стек разработки. Именно поэтому сегодня я хотел рассказать вам о том, что беспокоило меня лично, и, надеюсь, поможет и вам.
Пойдем!
Темный режим – это популярная тенденция в дизайне, которая включает в себя изменение цветовой схемы веб-сайта на темный фон со светлым текстом и элементами. Эта функция также известна как Ночной режимилиТемная тема. Основная цель темного режима — свести к минимуму нагрузку на глаза при использовании устройств в условиях низкой освещенности, продлить срок службы батареи на мобильных устройствах и придать утонченный и современный вид.
Многие популярные веб-сайты и приложения теперь предлагают опцию Dark Mode — вот TailwindCSS:
Если вы разработчик, вы, скорее всего, уже знаете, как включить темный режим в Dev Tools (для тех, кто не знает, перейдите на вкладку «рендеринг»!):
Если вы хотите включить темный режим для своей операционной системы (и, следовательно, для всех приложений, поддерживающих темный режим), перейдите в «Системные настройки». На Mac вы найдете его в разделе «Системные настройки» > «Внешний вид»:
Уже есть множество руководств о том, как реализовать темный режим для веб-сайта.
В этом руководстве будут рассмотрены различные подходы, в том числе несколько потрясающих новых возможностей CSS, которые позволят вам отказаться от JavaScript.
Темный режим с использованием системных цветов
Для начала создадим простой HTML-документ с заголовком:
<body> <h1>Hello Darkness, My Old Friend</h1> </body>
В таблицу стилей мы добавим:
body {
color-scheme: light dark;
}
Это сообщит браузеру, что наш документ может принимать как светлый, так и темный color-scheme.
Даже если у вас включен темный режим, этот фрагмент будет отображаться светлым при запуске в браузере. Однако пользовательский интерфейс вашего браузера будет темным.
Это связано с тем, что в таблице стилей user-agent не заданы цвета по умолчанию.
Мы можем это быстро исправить, используя Системные цвета:
body {
background-color: Canvas;
color: CanvasText;
color-scheme: light dark;
}
Давайте еще раз проверим наш фрагмент:
Намного лучше! Темный режим для всего вашего сайта в трех строках CSS!
Давайте подробнее рассмотрим Системные цвета. Из спецификаций:
Как правило, ключевые слова
<system-color>отражают выбор цвета по умолчанию, сделанный пользователем, браузером или операционной системой. По этой причине они обычно используются в таблице стилей браузера по умолчанию.
Вот демонстрация Light Mode, показывающая доступные системные цвета в Safari:
Если мы переключаемся в темный режим, некоторые цвета меняются полностью (например, Canvas и CanvasText, с которыми мы уже сталкивались), а другие лишь слегка меняются:
Использование системных цветов для темного режима — это немного упрощенный опыт работы с темным режимом.
Да, это сработает, но чистое черно-белое изображение немного скучно.
Мы можем оживить его, используя color-mix в CSS. Мы можем смешать немного CanvasText (черного или белого) с Canvas (белым или черным) для background-color и наоборот для color:
body {
background-color: color-mix(in srgb, Canvas, CanvasText 2.5%);
color: color-mix(in srgb, CanvasText, Canvas 15%);
}
Это приводит к «более мягкому» виду:
Использование prefers-color-scheme медиа-запроса
Чтобы указать определенные цвета для светлого и темного режима, я рекомендую использовать Пользовательские свойства CSS, а затем обновлять их с помощью prefers-color-scheme медиа-запроса.
Используя Светлый режим по умолчанию, давайте добавим цвета в раздел :where(body), чтобы отделить их от наших обычных стилей body:
/* Properties */
:where(body) {
--background-color: #FFF;
--text-color: #222;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
Затем для Темного режима мы просто обновим эти свойства цветов:
@media (prefers-color-scheme: dark) {
:where(body) {
--background-color: hsl(228, 5%, 15%);
--text-color: hsl(228, 5%, 80%);
}
}
Давайте проверим это:
Но что, если мы хотим, чтобы пользователи выбирали, какую версию нашего веб-сайта они хотят, независимо от системных настроек?
Они могут предпочесть систему, установленную в темном режиме, но наш веб-сайт в светлом режиме.
Давайте создадим переключатель!
Создание переключателя цветовой схемы
Использование CSS
Используя несколько совершенно новых CSS-методов, мы можем создать переключатель без JavaScript.
Мы создадим переключатель с 3 состояниями:
- Легкий (принудительный)
- Авто (системное значение по умолчанию, может быть либо светлым, либо темным)
- Темный (принудительно)
Сначала немного базовой разметки:
<fieldset>
<label>
<input type="radio" name="color-scheme" id="color-scheme-light" value="0">
Light
</label>
<label>
<input type="radio" name="color-scheme" value="auto" checked>
Auto
</label>
<label>
<input type="radio" name="color-scheme" id="color-scheme-dark" value="1">
Dark
</label>
</fieldset>
После добавления некоторых базовых стилей (см. демо-версию Codepen ниже) он выглядит следующим образом:
Добавим свойство --darkmode и container-type к html-элементу:
html {
--darkmode: 0;
container-name: root;
container-type: normal;
}
Мы будем использовать @container style()-запросы, поэтому нам нужно установить узел как «контейнер».
Поскольку мы не хотим наблюдать inline-size-изменений, мы просто добавляем значение normal.
Если пользователь выберет «принудительное» значение, мы обновим --darkmode:
html:has(#color-scheme-light:checked) { --darkmode: 0; }
html:has(#color-scheme-dark:checked) { --darkmode: 1; }
И, наконец, мы будем использовать style()-запрос контейнера, чтобы проверить, установлен ли --darkmode в 1:
@container root style(--darkmode: 1) {
body {
--background-color: hsl(228, 5%, 15%);
--text-color: hsl(228, 5%, 80%);
}
}
ПРИМЕЧАНИЕ.
@container style()-queries в настоящее время работает тольков скрытом режимев Chrome, это первые дни, поэтому не используйте его в рабочей среде.
Теперь, после выбора «Dark», наш переключатель (и страница) выглядит так:
Просто и эффективно!
Состояние хранения
Чтобы сохранить предпочтения пользователя, нам нужно использовать JavaScript.
Во-первых, давайте добавим идентификатор к нашему <fieldset>:
<fieldset id="colorScheme">
Затем в JavaScript:
colorScheme.addEventListener('change', event => {
localStorage.setItem('color-scheme', event.target.value)
})
Теперь все, что нам нужно сделать, это установить для свойства значение localStorage, когда документ загружен:
window.addEventListener("load", event => {
const scheme = localStorage.getItem('color-scheme') || 'auto'
if (scheme) {
document.documentElement.style.setProperty('--darkmode', scheme)
}
})
Чтобы выбрать правильный режим в переключателе, добавьте это в блок if:
const selected = [...colorScheme.elements].filter(element => element.value === scheme) if (selected) selected[0].checked = true;
Вот так, ребята! Надеюсь моя статья поможет вам в вашем бизнесе
Спасибо, что прочитали это! Ждем ваших комментариев и предложений 😎✌
