Генератор светлой и тёмной темы (CSS-переменные)

Генератор светлой и тёмной темы (CSS-переменные): для чего нужен

Хорошая тёмная тема — это не инверсия светлой. По основному цвету вашего бренда генератор создаёт CSS-переменные для двух тем (фон, поверхность, граница, текст, вторичный текст, основной цвет и текст на нём) с нейтральными серыми или с оттенком цвета бренда.

Контраст каждой пары цветов считается по формуле WCAG и помечается как AAA, AA или недостаточный, а основной цвет подстраивается так, чтобы превышать 4,5:1 в обеих темах. Код переключает тему по режиму системы (prefers-color-scheme) и, если нужно, ещё и кнопкой с data-theme.

Как пользоваться

1. Выберите основной цвет.
2. Посмотрите предпросмотр и таблицу контраста.
3. Скопируйте CSS-переменные.

Когда использовать

• Создание тёмного режима для сайта.
• Подбор палитры для нового проекта.
• Проверка доступности цветов.

Частые вопросы

Почему тёмный режим — это не просто инверсия цветов?

Инверсия делает фон чисто чёрным, а цвета бренда — кричащими, и глаза устают. В хорошей тёмной теме используются очень тёмно-серый фон, почти белый текст и более светлая версия основного цвета, чтобы сохранить контраст без слепящего эффекта.

Что означают AA и AAA в контрасте?

Это уровни рекомендаций по доступности WCAG. AA требует контраста не менее 4,5:1 для обычного текста, AAA — 7:1. Генератор показывает отношение для каждой пары цветов и предупреждает, если оно ниже 4,5:1.

Как переключать тему кнопкой?

Код реагирует на режим системы (prefers-color-scheme), а также на атрибут data-theme у html. Кнопка, ставящая data-theme="dark" или "light", принудительно включает выбранную тему; инструмент «Кнопка тёмного режима» на этом сайте создаёт такую кнопку.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты