Урок 20 · CSS

Цвета через переменные и переключатель класса

Тёмная тема — это второй набор цветов, а не отдельная копия всех правил.

Почему это следующий шаг

Таблица и форма уже красятся. Если цвета размазаны по файлу, тему не включить одной кнопкой.

Как сделать

Собери фон, текст, приглушённый текст и акцент в переменные на :root. Для темы повесь на html или body атрибут data-theme="dark" и переопредели только переменные. Проверь рамки и подсказки: на тёмном фоне серый текст часто пропадает. Картинки и тени тоже могут стать слишком яркими.

:root { --bg: #f7f4ef; --text: #221f1c; --accent: #2f5d50; }
[data-theme="dark"] { --bg: #17181c; --text: #f3efe8; --accent: #8fd0b8; }
body { background: var(--bg); color: var(--text); }

Что проверить

• Переключился фон и текст, а не только фон.
• Ссылка и кнопка остались видны.
• Обычная тема не сломалась.