Урок 3: Цвет, контраст и тёмная тема — одна тема, два режима
Продакт-менеджер просит тёмную тему, и вы обнаруживаете, что каждому компоненту нужен свой `dark:bg-gray-900 dark:text-white`. Этот урок научит вас определять `semantic color tokens` (семантические цветовые токены) с помощью CSS-переменных — так что тёмная тема становится заменой значения в одном ме
Семантический цветовой токен — как сказать «цвет стены» вместо «вот этот конкретный бежевый». Переключитесь в ночной режим, и всё, помеченное как «цвет стены», перекрашивается разом — без обработки каждой стены по отдельности.
- семантический цветовой токен
- Токен, названный по роли — `surface`, `on-surface`, `border`, — а не по оттенку. Компонент запрашивает роль, а тема решает, какой оттенок подходит каждому режиму.
- Темизация на CSS-переменных
- Определение значений цвета как CSS-переменных (`--surface`) в `:root` и их переопределение под `.dark`. Компоненты ссылаются на переменную, поэтому замена значения меняет их все сразу.
- коэффициент контрастности
- Мера читаемости между цветом текста и фоном. WCAG AA требует не менее 4.5:1 для обычного текста — и семантический токен должен соответствовать этому в обоих режимах.
- стратегия тёмной темы
- Выбор того, как реализовать тёмную тему: дублирование `dark:` на каждом элементе (неподдерживаемо) против замены значений токенов в одном месте через класс `.dark` (поддерживаемо).
