#ffffff · Карточка: rgba(255,255,255,0.08)Обе темы
Что такое цветовая схема или тема?
Тема — это именованный набор токенов оформления: фон, поверхность, текст, вторичный текст, граница и акцент, которые читает каждый компонент вместо жёстко заданных цветов. Переключение с тёмной на светлую меняет значения токенов один раз, и весь интерфейс следует за ними, поэтому одна смена акцента перекрашивает всё приложение.
Пример: тёмная схема сочетает белый текст (#ffffff) с фоном #0f2027, а светлая — #1a1a2e с #f5f7fa. Расчёт относительной яркости даёт контраст около 16,7:1 в тёмной и 15,9:1 в светлой схеме — оба значения намного выше минимума WCAG AA 4,5:1 для обычного текста. Вторичный текст намеренно слабее (около 7,7:1 в тёмной и 4,4:1 в светлой).
Как пользоваться просмотром тем
- Переключайтесь между тёмной и светлой схемами, чтобы сравнить оба набора токенов.
- Сравните образцы фона, поверхности и текста, из которых состоит каждая схема.
- Посмотрите акцентный цвет, который задаёт кнопки, ссылки и выделения.
- Используйте те же токены в своём CSS, чтобы оформление совпадало с превью.
Темы и контраст — частые вопросы
Что такое токен оформления?
Токен оформления — это именованное значение, например --text или --surface, на которое ссылаются компоненты вместо конкретных цветов. Изменив токен один раз, вы обновляете все места, где он используется, поэтому смена темы происходит мгновенно.
Почему контраст важен для темы?
Текст должен оставаться читаемым на любом фоне. WCAG AA требует не менее 4,5:1 для обычного текста и 3:1 для крупного, поэтому каждый набор токенов стоит проверять, а не предполагать.
Почему тёмная тема не чисто чёрная?
Очень тёмные серые, вроде #0f2027, уменьшают смазывание на OLED-экранах и сохраняют глубину, поэтому поверхности всё ещё различимы без резких чисто чёрных краёв.
