Плавні переходи між світлим і темним режимами: жетони, CSS і рух
Як створити перемикач світлої/темної теми, який поважає налаштування системи, уникає спалаху під час завантаження, стилізує власні елементи керування та анімує без шкоди для доступності.
Основний винос
Створюйте теми на семантичних токенах, дотримуйтеся системних налаштувань із параметром prefers-color-scheme за замовчуванням, дозволяйте іншим перевизначати це та встановлюйте властивість color-scheme, щоб елементи керування формою та смуги прокручування відповідали. Застосуйте збережену тему перед відтворенням сторінки, щоб уникнути спалаху. Нехай анімація перемикання буде короткою, як-от швидке перехресне згасання або перехід перегляду, і пропускайте її, коли ввімкнено зменшення руху.
Почніть із налаштувань системи
Медіа-функція prefers-color-scheme повідомляє вам, чи користувач попросив свою операційну систему встановити світлу чи темну тему. Використовуйте його як параметр за замовчуванням і додайте перемикач у програмі, який замінює його та запам’ятовується.
Тема з маркерами, а не перевизначеннями
Визначте кольори як семантичні токени (поверхня, текст, межа, акцент) і надайте кожній темі власні значення, як правило, у вигляді спеціальних властивостей CSS кореневого елемента. Тоді компоненти ніколи не змінюватимуться між темами; лише значення токенів. Це той самий трирівневий підхід до токенів, який використовується для мультибрендових систем дизайну.
Не забувайте про нативні елементи керування
MDN пояснює, що властивість color-scheme повідомляє браузеру, які схеми підтримує елемент, що змінює стандартні кольори елементів керування форми, смуг прокручування та іншого вбудованого інтерфейсу користувача. Без цього на темній сторінці можуть відображатися яскраво-білі введення та смуги прокрутки.
Уникайте спалаху під час навантаження
Якщо 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);
}Ключі Principle, які слід запам’ятати
- За замовчуванням надає перевагу колірній схемі; нехай люди перевизначають і запам’ятають це
- Тема із семантичними токенами, а не перевизначеннями для кожного компонента
- Налаштуйте колірну схему, щоб рідні елементи керування відповідали
- Застосуйте збережену тему перед першим малюванням
- Тримайте анімацію перемикача короткою та зважайте на зменшення руху
Часті запитання
Джерела
- prefers-color-scheme — MDN Веб-документи
- color-scheme — MDN Веб-документи
- View Transition API — MDN Веб-документи