Плавни преходи в светъл и тъмен режим: жетони, CSS и движение
Как да изградите превключвател за светла/тъмна тема, който зачита системната настройка, избягва светкавицата при зареждане, стилизира собствените контроли и анимира, без да вреди на достъпността.
Ядро за вкъщи
Създавайте теми върху семантични токени, следвайте системната настройка с prefers-color-scheme по подразбиране, позволете на хората да я отменят и задайте свойството color-scheme, така че контролите на формата и лентите за превъртане да съвпадат. Приложете запазената тема преди изобразяването на страницата, за да избегнете светкавицата. Поддържайте анимацията на превключването кратка, като например бързо избледняване или преход на изглед, и я пропускайте, когато намаленото движение е включено.
Започнете от системните настройки
Мултимедийната функция prefers-color-scheme ви казва дали потребителят е поискал от операционната си система светла или тъмна тема. Използвайте го по подразбиране и добавете превключвател в приложението, който го заменя и се запомня.
Тема с токени, без замени
Дефинирайте цветовете като семантични токени (повърхност, текст, рамка, акцент) и дайте на всяка тема свои собствени стойности, обикновено като CSS персонализирани свойства на основния елемент. След това компонентите никога не се променят между темите; само символичните стойности го правят. Това е същият трислоен подход на токени, използван за системи за проектиране на различни марки.
Не забравяйте собствените контроли
MDN обяснява, че свойството цветова схема казва на браузъра кои схеми поддържа даден елемент, което променя цветовете по подразбиране на контролите на формуляра, лентите за превъртане и други вградени потребителски интерфейси. Без него тъмна страница може да показва ярко бели входове и ленти за превъртане.
Избягвайте светкавицата при натоварване
Ако запазената тема е приложена от JavaScript след изобразяване на страницата, хората виждат светкавица на грешната тема. Приложете го възможно най-рано, с малък вграден скрипт в главата на документа или изобразен от сървъра атрибут, преди листът със стилове да рисува.
Анимирайте превключвателя внимателно
Кратко кръстосано избледняване, около 150 до 250 милисекунди, кара промяната да се чувства преднамерена. Избягвайте прехода на всяко цветово свойство на всеки елемент, което може да бъде бавно на големи страници; една моментна снимка на View Transition често е по-плавна. Направете самото превключване ясно, с етикет или подсказка и премахнете анимацията, когато намаленото движение е включено.
Фрагмент за внедряване на продукцията
/* 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 Уеб документи