Переменные CSS для переключения темы

Пользовательские свойства CSS (переменные), определённые в :root, доступны во всей таблице стилей. Определите полную цветовую палитру один раз — фоны, цвета текста, поверхности и границы — и ссылайтесь на неё повсюду. Такой единый источник истины упрощает переключение темы.

Когда атрибут data-theme="dark" установлен на document.documentElement, селектор CSS вроде [data-theme='dark'] переопределяет корневые переменные тёмными значениями. Компоненты используют var(--color-bg) и автоматически получают новые значения без каких-либо изменений в коде.

Как минимум определите: --color-bg (фон страницы), --color-text (основной текст), --color-primary (цвет бренда), --color-surface (фон карточек и панелей) и --color-border (разделители). Согласованный набор токенов не позволяет случайным значениям цвета появляться в компонентах.

В CSS компонентов ссылайтесь на переменные, например background: var(--color-bg) и color: var(--color-text). Можно также указать резервное значение: var(--color-bg, #ffffff). Браузер разрешает переменную во время отрисовки, поэтому один класс работает и для светлой, и для тёмной темы.

Добавьте transition: background-color 200ms, color 200ms к селектору :root. Когда атрибут data-theme изменяется, все элементы, использующие переменные CSS, одновременно переходят к новым значениям. Это создаёт ощущение качественной анимации без кода анимации на JS.

Управлять темой через переменные CSS лучше, чем задавать встроенные стили из JavaScript. Браузер самостоятельно пересчитывает все стили, для каждого дочернего компонента с темой не запускаются дополнительные повторные отрисовки React, а каскад CSS автоматически обрабатывает наследование. JS нужно лишь переключить один атрибут на корневом элементе.

Можно объединить переменные CSS с запросом @media (prefers-color-scheme: dark) в качестве резервного варианта только на CSS. Определите переопределения для тёмной темы внутри медиазапроса в дополнение к селектору data-theme или вместо него. Это гарантирует работу тёмного режима, даже если JavaScript ещё не выполнялся.

Наиболее надёжный подход объединяет оба механизма: запрос @media задаёт системное значение по умолчанию, а атрибут data-theme позволяет переопределить его через JavaScript. Если атрибут присутствует, он имеет приоритет благодаря большей специфичности; если атрибута нет, применяется медиазапрос.

Для изображений, которые плохо выглядят на тёмном фоне, используйте элемент HTML picture с дочерним элементом source media="(prefers-color-scheme: dark)". Браузер автоматически выберет тёмный вариант. Для значков SVG в CSS можно использовать filter: invert(1) как быстрое приближение.

Переменные CSS можно ограничить областью действия отдельного компонента, определив их на корневом элементе компонента, а не на :root. Это позволяет задавать тему для каждого компонента отдельно: например, боковая панель может иметь собственный токен фона, отличный от фона страницы, и при этом корректно переключаться вместе с глобальной темой.

Chrome DevTools показывает вычисленные значения переменных CSS на панели стилей. Нажмите ссылку на переменную, чтобы перейти к её определению. Так легко проверить, применяется ли к любому элементу правильный тёмный или светлый токен. Значения переменных также можно изменять прямо на панели.

Какой селектор CSS используется для определения глобальных пользовательских свойств CSS, применяемых ко всему документу?

Пользовательские свойства CSS в :root обеспечивают централизованную систему токенов для тем. Переключайте темы мгновенно с помощью атрибута data-theme на элементе HTML. Добавляйте переходы CSS для плавной анимации, используйте медиазапрос prefers-color-scheme как резервный вариант только на CSS и избегайте переопределения стилей отдельных компонентов через JS.