Плавные переходы между светлым и темным режимами: токены, CSS и движение.
Как создать переключатель светлой/темной темы, который учитывает настройки системы, позволяет избежать вспышки при загрузке, стилизовать встроенные элементы управления и анимацию, не нарушая доступности.
Главное
Создавайте темы на основе семантических токенов, следуйте системным настройкам с параметром «prepres-color-scheme» по умолчанию, позволяйте людям переопределять их и устанавливайте свойство цветовой схемы, чтобы элементы управления формой и полосы прокрутки совпадали. Примените сохраненную тему до отображения страницы, чтобы избежать вспышки. Делайте анимацию переключения короткой, например быстрое плавное затухание или переход просмотра, и пропускайте ее, когда включено замедленное движение.
Начнём с настроек системы
Медиа-функция «предпочтительная цветовая схема» сообщает вам, запросил ли пользователь в своей операционной системе светлую или темную тему. Используйте его по умолчанию и добавьте переключатель в приложении, который переопределяет его и запоминает.
Тема с токенами, а не переопределениями
Определите цвета как семантические токены (поверхность, текст, граница, акцент) и присвойте каждой теме свои собственные значения, обычно в виде пользовательских свойств CSS корневого элемента. Тогда компоненты никогда не меняются между темами; действуют только значения токенов. Это тот же подход с трехуровневыми токенами, который используется для мультибрендовых систем дизайна.
Не забывайте нативные элементы управления
MDN объясняет, что свойство цветовой схемы сообщает браузеру, какие схемы поддерживает элемент, что изменяет цвета по умолчанию для элементов управления формы, полос прокрутки и другого встроенного пользовательского интерфейса. Без него на темной странице могут отображаться ярко-белые поля ввода и полосы прокрутки.
Избегайте вспышки при нагрузке
Если сохраненная тема применяется JavaScript после рендеринга страницы, люди видят вспышку неправильной темы. Примените его как можно раньше, используя небольшой встроенный скрипт в заголовке документа или атрибут, отображаемый сервером, до того, как таблица стилей будет отрисована.
Аккуратно анимируйте переключатель
Короткое плавное затухание, примерно от 150 до 250 миллисекунд, создает ощущение намеренного изменения. Избегайте переноса каждого свойства цвета на каждый элемент, что может быть медленным на больших страницах; один снимок перехода просмотра часто бывает более плавным. Сделайте сам переключатель понятным с помощью метки или всплывающей подсказки и удалите анимацию, когда включено замедленное движение.
Пример реализации для продакшена
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Ключевые принципы
- По умолчанию используется предпочтительная цветовая схема; пусть люди переопределят и запомнят это
- Тема с семантическими токенами, а не переопределениями для каждого компонента.
- Установите цветовую схему, чтобы она соответствовала родным элементам управления.
- Примените сохраненную тему перед первой рисованием
- Делайте анимацию переключения короткой и соблюдайте ограниченное движение.
Частые вопросы
Источники
- prefers-color-scheme — MDN Веб-документы
- color-scheme — MDN Веб-документы
- View Transition API — MDN Веб-документы