Генератор палитры

Темы SUS — это CSS-класс: .theme-dark / .theme-light с подменой переменных --thm-* на шкалу палитры --base-*, и любой проект может добавить свой собственный блок .theme-<name>. Этот инструмент создаёт тему из нескольких входных параметров — названия темы, светлоты поверхности и цвета акцента — и заполняет все имена --thm-*, которые определены в runtime, чтобы результат был полной, готовой к применению темой, а не частичным переопределением.

Самая важная здесь проверка — это показатель контрастности: для основных пар текст/фон инструмент вычисляет фактический коэффициент WCAG и помечает все значения ниже порога AA для текста (4.5:1), вместо того чтобы полагаться на предположения после того, как цвета уже отправлены в production.

Имя темыСтанет CSS-классом .theme-<имя>. .theme-midnightСветлота поверхностей — 10Низкое значение — тёмная тема (поверхности светлеют с подъёмом). Высокое — светлая (поверхности темнеют с подъёмом).Primary (акцент)Свой цвет secondaryСвой цвет danger

Готовый блок

.theme-midnight {
    --thm-bg-page: #1a1a1a;
    --thm-bg-surface: #242424;
    --thm-bg-surface-raised: #2e2e2e;
    --thm-bg-surface-overlay: #383838;
    --thm-bg-surface-variant: #3d3d3d;
    --thm-bg-disabled: #666666;
    --thm-text-primary: #f5f5f5;
    --thm-text-secondary: #dbdbdb;
    --thm-text-disabled: #a8a8a8;
    --thm-text-on-primary: #0a0a0a;
    --thm-border: #4d4d4d;
    --thm-border-hover: #757575;
    --thm-border-focus: #3d9cf0;
    --thm-primary: #3d9cf0;
    --thm-primary-hover: #9cccf7;
    --thm-primary-pressed: #0e69b9;
    --thm-secondary: #4d4d4d;
    --thm-secondary-hover: #5c5c5c;
    --thm-success: #22c55e;
    --thm-success-hover: #45df7e;
    --thm-warning: #f59e0b;
    --thm-warning-hover: #f7b546;
    --thm-error: #ef4444;
    --thm-error-hover: #f47c7c;
    --thm-info: #38bdf8;
    --thm-info-hover: #73d1fa;
    --thm-scrim: rgba(0, 0, 0, 0.3);
    --thm-hover-overlay: rgba(255, 255, 255, 0.05);
    --thm-selected-overlay: rgba(255, 255, 255, 0.1);
    --thm-disabled-overlay: rgba(255, 255, 255, 0.05);
    --thm-rare: #4dabf7;
    --thm-epic: #a78bfa;
    --thm-legendary: #fbbf24;
    --thm-heal: #34d399;
    --thm-shield: #22d3ee;
}

Контраст текст/фон

Отношение WCAG, порог AA для текста 4.5:1. Пары ниже порога помечены.

Aatext-primary / bg-page15.96:1
Aatext-secondary / bg-page12.57:1
Aatext-primary / bg-surface14.24:1
Aatext-on-primary / primary6.80:1

Предпросмотр

Заголовок карточки

Текст на этой поверхности использует text-secondary; эта строка — text-primary.

оверлей hover

Генератор палитры ​

Далее ​

Генератор палитры

Далее