ДокументацияРазделы, компоненты, системы и их подразделы
Система тем
Светлая, тёмная и контрастная темы
04 · Система тем
Тема меняет представление, но не смысл
Компонент зависит от роли цвета, а не от конкретного оттенка. Поэтому одна разметка сохраняет назначение во всех режимах.
Режимы
Один контракт для разных условий просмотра
СветлаяТекст и поверхностьОсновной режим
ТёмнаяТекст и поверхностьСниженная яркость
Высокий контрастТекст и поверхностьМаксимальное различие
Режим system следует настройке операционной системы и обновляет активную тему при её изменении.
Семантические токены
В компонентах используются роли, а не палитра
SCSSРоли вместо оттенков
.card {
color: var(--ox-text-primary);
background: var(--ox-bg-primary);
border-color: var(--ox-border-default);
}Программное управление
Выбор темы доступен через единый API
JavaScriptПереключение режима
import { theme } from 'okaux/js/app.js';
theme.set('dark');
theme.set('high-contrast');
theme.set('system');
document.documentElement.addEventListener('okaux:theme-change', (event) => {
const { mode, theme: activeTheme } = event.detail;
});Адаптеры
Внешние виджеты переводятся на роли OKAUX
Если библиотека использует собственную палитру, проектный адаптер сопоставляет её с семантическими токенами. Компоненты не должны вручную проверять активную тему и выбирать оттенки.