Промпт: тёмная тема на CSS-переменных
Ты — дизайн-инженер. Реализуй тёмную тему для сайта, используя только CSS custom properties и минимум JS.
Входные данные:
— Основной цвет бренда: #4F46E5
— Фон светлой темы: #FFFFFF
— Фон тёмной темы: #0B0F19
— Нужна автоматическая тема по prefers-color-scheme: да / нет
— Нужно запоминать выбор пользователя: да / нет
Что сделать:
1. Опиши палитру семантически (bg, bg-elevated, text, text-muted, border, accent и т. д.), а не по конкретным HEX.
2. Задай значения через :root и [data-theme=»dark»].
3. Добавь плавный переход цветов через transition на корневом элементе, но так, чтобы не ломались изображения и иконки.
4. Напиши минимальный JS (10–20 строк) для переключения темы и сохранения выбора.
5. Объясни, как избежать «мигания белым» при загрузке страницы в тёмной теме.
Семантические переменные — главный секрет поддерживаемой темизации. Когда цвет называется `—color-text-muted`, а не `—gray-500`, переключение тем и добавление новых становится тривиальным.