Css-переменные в веб-разработке: оформление темы сайта и настройка цветовой палитры

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

Опорные решения для палитры на CSS-переменных

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

Как разложить цвета по смысловым токенам

Смысловые токены подходят проектам, где нужно поддерживать несколько страниц, тем или состояний интерфейса. Они особенно полезны, если ожидаются редизайн, расширение компонентов или услуги веб-разработки для сайта с общей дизайн-системой.

Не усложняйте палитру токенами, если это небольшой одноразовый макет с несколькими неизменяемыми цветами: достаточно небольшого набора переменных. В остальных случаях начинайте не с названий оттенков вроде --blue-600, а с назначения цвета:

:root {
  --color-page: #ffffff;
  --color-surface: #f4f5f7;
  --color-text: #202124;
  --color-muted: #5f6368;
  --color-border: #d7dbe0;
  --color-primary: #2457c5;
  --color-on-primary: #ffffff;
}

Названия по роли упрощают замену палитры: компонент использует --color-primary, а не зависит от конкретного оттенка. Если оттенки нужны для графики или сложных эффектов, храните их отдельной шкалой и связывайте с интерфейсом через семантические токены.

Где объявлять переменные: :root, контейнер темы или компонент

Для работы понадобятся доступ к CSS-файлам или панели стилей, список основных компонентов и браузер с инструментами разработчика. Перед правками сохраните текущие значения или создайте отдельную ветку: так проще откатить неудачную тему и проверить каскад.

• :root - подходит для общей палитры сайта, доступной всем элементам. Риск: глобальное переопределение может затронуть виджеты и встроенные компоненты.
• Контейнер темы, например [data-theme="dark"], - удобен для переключения схемы или оформления отдельной области. Риск: переменные не действуют за пределами этого контейнера.
• Селектор компонента - уместен для локальных особенностей кнопки или карточки. Риск: множество локальных значений затрудняет единое управление палитрой.

Для обычного сайта практичный вариант - базовые токены в :root, а значения альтернативной схемы в селекторе контейнера темы. Переменные компонента добавляйте только тогда, когда его цветовое поведение действительно отличается от общего.

Как переключать светлую и тёмную схемы без дублирования стилей

Сначала определите способ переключения: атрибут на корневом элементе, класс темы или настройка операционной системы. Не внедряйте переключатель в производственную сборку, пока обе схемы не пройдут визуальную и контрастную проверку.

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

1. Определите набор токенов. Перечислите цвета, которые реально применяются в интерфейсе: фон, поверхности, текст, границы, ссылки и акцентные элементы.
2. Задайте базовую схему. Объявите переменные в :root и замените прямые значения цветов в основных компонентах ссылками на токены.
3. Переопределите токены для второй схемы. Используйте тот же набор имён внутри селектора темы. Это позволяет сохранить правила компонентов без копирования.
4. Подключите переключение. Меняйте атрибут корневого элемента, например data-theme, из существующей логики сайта. Если нужен только системный выбор, используйте медиавыражение prefers-color-scheme.
5. Проверьте переходы и состояния. Просмотрите обе темы на страницах с формами, ссылками, сообщениями об ошибках и всплывающими элементами. Убедитесь, что выбранная схема не скрывает фокус и границы.

:root {
  color-scheme: light;
  --color-page: #ffffff;
  --color-surface: #f4f5f7;
  --color-text: #202124;
  --color-primary: #2457c5;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #17191c;
  --color-surface: #24282d;
  --color-text: #f2f3f5;
  --color-primary: #9bb8ff;
}

body {
  background: var(--color-page);
  color: var(--color-text);
}

Свойство color-scheme сообщает браузеру, какие встроенные элементы управления уместны для схемы. Оно не заменяет настройку цветов сайта. Если в проекте уже используется механизм темы, подключайте переменные к нему, а не создавайте параллельный переключатель.

Как проверить контраст и не потерять читаемость интерфейса

• Проверьте основной и вторичный текст на всех типах фона.
• Оцените ссылки отдельно от обычного текста: различие должно быть заметно не только по цвету, если контекст этого требует.
• Проверьте границы полей, карточек и разделителей в светлой и тёмной схемах.
• Убедитесь, что индикатор фокуса виден на кнопках, ссылках и полях ввода.
• Проверьте состояния наведения, нажатия, отключения и ошибки.
• Просмотрите страницу при увеличенном масштабе и на узком экране.
• Используйте проверку контраста в инструментах доступности браузера или отдельный анализатор, задавая фактические цвета текста и фона.
• Повторите проверку для изображений, градиентов и прозрачных поверхностей: итоговый цвет может отличаться от значения токена.

Если контраст не проходит проверку, скорректируйте токены, а не добавляйте случайные исключения к отдельным элементам. После правки повторно проверьте все компоненты, которые используют изменённую переменную.

Как связать палитру с состояниями кнопок, ссылок и форм

Распространённые ошибки при настройке состояний:

• Задавать цвет только для обычного состояния кнопки и забывать о наведении, нажатии и фокусе.
• Использовать один акцент для текста, фона кнопки и её границы без проверки контраста.
• Обозначать ошибку только красным цветом, не добавляя текстового сообщения или другого понятного признака.
• Скрывать стандартный контур фокуса без замены на столь же заметный индикатор.
• Делать отключённый элемент неразличимым на фоне страницы.
• Переопределять цвет ссылки только при наведении, оставляя её незаметной в обычном состоянии.
• Использовать в компоненте жёстко заданный цвет вместо семантического токена, из-за чего он не меняется вместе с темой.

Для состояний можно завести отдельные переменные, если они повторяются в нескольких компонентах:

:root {
  --color-link: #2457c5;
  --color-focus: #a13ec4;
  --color-error: #b42318;
}

a {
  color: var(--color-link);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

Значения в примере нужно проверить на реальном фоне интерфейса. Для ошибки используйте также поясняющий текст, а для кнопок задавайте состояния согласованно с общей палитрой.

Какие ошибки каскада и наследования ломают цветовую тему

Если тему нужно исправить или расширить, выберите подход по масштабу задачи:

• Переопределить токены в контейнере. Уместно, если меняется палитра целой страницы или области. Проверьте, что все нужные компоненты находятся внутри контейнера.
• Создать токен компонента. Подходит для уникальной цветовой роли одного элемента. Не дублируйте таким образом уже существующие общие значения.
• Использовать медиавыражение. Уместно для автоматического выбора схемы по настройке устройства, если пользовательское предпочтение не должно управляться отдельно.
• Исправить порядок или область действия CSS. Выбирайте этот путь, когда новое значение перекрывается более поздним правилом или селектором с большей специфичностью. Не повышайте специфичность вслепую: сначала найдите правило-победитель в инструментах разработчика.

Типовые причины сбоев - переменная объявлена не в той области, компонент переопределяет её локально, тема подключена раньше базового CSS или значение задано напрямую. Для важных свойств можно указать резервное значение, например color: var(--color-text, #202124), но резерв не заменяет корректное объявление токена.

Разбор пограничных случаев при настройке цветовой системы

Можно ли объявить все переменные в :root?

Можно, если палитра едина для всего сайта. Для локальных областей или нескольких тем лучше переопределять токены в контейнере, чтобы избежать глобального побочного влияния.

Что выбрать: класс темы или атрибут data-theme?

Оба способа позволяют задать селектор темы. Выбирайте тот, который соответствует архитектуре проекта, и используйте его последовательно во всех стилях и логике переключения.

Нужно ли хранить в переменных каждый оттенок?

Нет. Переменные полезны для повторяющихся значений и значимых ролей интерфейса. Редкие декоративные значения можно оставить локальными, если они не должны переключаться вместе с темой.

Почему цвет переменной не применяется к элементу?

Проверьте, объявлена ли переменная в области действия элемента, не перекрыта ли она другим правилом и не задан ли цвет напрямую. Инструменты разработчика показывают итоговое значение и правило, которое победило в каскаде.

Достаточно ли поменять фон и текст для тёмной темы?

Нет. Проверьте также поверхности, ссылки, границы, фокус, поля ввода, сообщения об ошибках и встроенные элементы управления.

Как применить системную тему и сохранить выбор пользователя?

Системную схему можно задать через prefers-color-scheme, а явный выбор пользователя - отдельным атрибутом или классом. Уточните приоритет этих правил, чтобы автоматическая настройка не перезаписывала сохранённое предпочтение.

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

Автор: Ольга Соколова.