Темный режим в последнее время приобрел большую популярность. Так, например, компания Apple добавила темный режим в свои операционные системы iOS и macOS. Windows и Google сделали то же самое.
Давайте же взглянем на темный режим в контексте веб-сайтов. Мы рассмотрим различные подходы к реализации дизайна темного режима и технические соображения, которые они влекут за собой. Также, в процессе нашего обсуждения, будут описаны некоторые приемы, которые могут оказаться полезными и в вашей практике.
Переключение между темамиСогласно типичному сценарию на сайте уже есть светлая тема, и вы хотите создать ее более темный аналог. Или, если вы начинаете с нуля, у вас будут две темы: светлая и темная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении. В большинстве случаев это светлая тема (хотя, как мы увидим в дальнейшем, можно позволить браузеру пользователя сделать этот выбор за нас). Также должен быть способ переключиться на другую тему (что может делаться автоматически) — например, пользователь нажимает кнопку, и цветовая тема меняется.
Для этого существует несколько подходов.
Использование специального класса в теге bodyДанный прием заключается в том, что в теге body динамически меняется класс, который используется как зацепка для изменения стилей на странице
| Код |
|---|
<body class="dark-theme || light-theme"> |
Пример кода JavaScript, который будет менять класс при нажатии на специальную кнопку:
| Код |
|---|
// Находим нужную кнопку const btn = document.querySelector('.btn-toggle'); // Прослушиваем нажатие на кнопку btn.addEventListener('click', function() { // Переключаем (добавляем/удаляем) класс .dark-theme document.body.classList.toggle('dark-theme'); })
|
Вот как можно использовать эту идею:
| Код |
|---|
<body> <button class="btn-toggle">Вкл/Выкл темный режим</button> <h1>Привет! Это заголовок</h1> <p>Это просто текст, нужный для создания абзаца</p> <p>А это еще один кусочек текста, потому что два лучше, чем один</p> <a href="#">Я ссылка.</a> </body> |
Общая идея данного подхода состоит в том, что мы оформляем стили как обычно (это будет режим по умолчанию), а затем создаем набор цветовых стилей, опираясь на класс в теге body, которые будут использоваться в качестве темного режима.
Допустим, по умолчанию мы используем светлую цветовую гамму. Все эти светлые стили написаны точно так же, как вы обычно пишете CSS. Учитывая наш HTML код, давайте применим некоторый глобальный стиль к тегу body и ссылкам.
| Код |
|---|
body { color: #222; background: #fff; } a { color: #0033cc; }
|
У нас есть темный текст (#222) и темные ссылки (#0033cc) на светлом фоне (#fff). Наша тема "по умолчанию" успешно стартовала.
Теперь давайте переопределим значения этих свойств, опираясь на другой класс элемента body:
| Код |
|---|
body { color: #222; background: #fff; } a { color: #0033cc; } /* Стили "темного" режима */ body.dark-theme { color: #eee; background: #121212; } body.dark-theme a { color: #809fff; }
|
Стили темной темы будут производными от одного и того же родительского класса - в нашем примере это класс .dark-theme, который мы установили для элемента body.
Как же будут "переключаться" классы в элементе body, чтобы задействовать темные стили? Для этого мы будем использовать JavaScript! Мы по классу выберем кнопку переключения стилей (.btn-toggle), прикрепим к ней перехватчик событий, который будет перехватывать нажатия на нее, и по этому событию будем добавлять класс темной темы (.dark-theme) в список классов элемента body. Благодаря спецификации каскадной таблицы стилей, это будет переопределять все светлые цвета, которые мы задали по умолчанию.
Вот работающий пример на моём сайте. Нажмите на кнопку, чтобы включить/выключить темный режим:
