Мульт##брендовая темизация с переменными CSS
Переключайтесь между несколькими брендовыми темами во время выполнения, заменяя значения пользовательских свойств CSS.
«Мульт##брендовая темизация с переменными CSS» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Обзор архитектуры тем
Темизация для нескольких брендов сопоставляет один набор токенов-алиасов компонентов с разными значениями глобальных токенов для каждого бренда. Компоненты обращаются к токенам-алиасам, а файлы тем брендов переназначают алиасы на глобальные токены, специфичные для бренда.
Слой базовых токенов
Определите глобальные токены в :root: все исходные значения цветов, интервалы и значения типографики. Это бренд по умолчанию. Компоненты никогда не обращаются к глобальным токенам напрямую — только через токены-алиасы.
<span class="swatch swatch-primary"></span>
<span class="swatch swatch-secondary"></span>Слой токенов-алиасов
Токены-алиасы ссылаются на глобальные токены с помощью var(): --color-action: var(--color-brand-primary). Компоненты используют --color-action. Изменение смысла --color-brand-primary изменяет всю систему.
Классы тем брендов
Применяйте темы брендов с помощью класса на html или элементе-контейнере. Каждый класс темы переопределяет глобальные токены в области действия этого бренда. Компоненты внутри контейнера автоматически наследуют значения бренда.
<span class="swatch"></span>
<span class="theme-brand-a swatch"></span>
<span class="theme-brand-b swatch"></span>Тёмный режим как тема
Тёмный режим — это вариант темы: класс или медиазапрос, переопределяющий токены цветов. Используйте prefers-color-scheme для настроек ОС по умолчанию, а класс .dark — для пользовательского переопределения. Оба варианта изменяют одни и те же токены-алиасы.
<div class="surface">Themed surface</div>Наследование токенов
Пользовательские свойства CSS каскадируются и наследуются. Тема, применённая к элементу-контейнеру, влияет на всех его потомков. Вложенные темы переопределяют внешние темы на уровне контейнера — это удобно для темизации виджетов внутри страницы.
Предотвращение утечки токенов
Следите, чтобы токены-алиасы всегда были определены. Если класс темы отсутствует, для алиаса следует предусмотреть корректный возврат к значению по умолчанию. Используйте синтаксис запасного значения CSS var(): var(--color-action, #3b82f6), чтобы предотвратить исчезновение текста или фона.
Генерация файлов тем
Style Dictionary может создавать отдельные CSS-файлы тем из JSON с токенами. На этапе сборки создаются theme-brand-a.css и theme-brand-b.css. Загружайте подходящий файл во время выполнения или компилируйте его в отдельные пакеты для каждого бренда.
Тестирование тем
Пишите тесты визуальной регрессии, отображающие каждый компонент в каждой теме. Percy и Chromatic создают снимки экрана для каждого варианта темы. Автоматическое визуальное тестирование выявляет регрессии, когда глобальные значения токенов неожиданно изменяются.
Переключение тем во время выполнения
Переключайте классы тем с помощью JavaScript: document.documentElement.classList.replace("theme-a", "theme-b"). Переменные CSS обновляются мгновенно, без повторной отрисовки компонентов — не требуется ни повторная отрисовка React, ни пересчёт стилей статических значений.
Особенности производительности
Переменные CSS вычисляются в момент отрисовки — изменение корневой переменной вызывает перерисовку всех использующих её элементов. Ограничивайте изменения глобальных переменных взаимодействиями пользователя, например переключением темы, а не циклами анимации. Для анимированных эффектов темизации используйте переходы отдельных свойств.
Проверка знаний
Как темы на основе пользовательских свойств CSS позволяют переключать бренды без изменения CSS компонентов?
Итоги
Темизация для нескольких брендов отделяет глобальные исходные значения токенов от семантических токенов-алиасов. Классы тем переопределяют глобальные токены в области действия контейнера. Компоненты, использующие алиасы, автоматически отображают активную тему бренда, что позволяет переключаться между темами во время выполнения без изменений кода компонентов.
Часто задаваемые вопросы
Урок «Мульт##брендовая темизация с переменными CSS» бесплатный?
Да — полный текст урока «Мульт##брендовая темизация с переменными CSS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Мульт##брендовая темизация с переменными CSS»?
Переключайтесь между несколькими брендовыми темами во время выполнения, заменяя значения пользовательских свойств CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Мульт##брендовая темизация с переменными CSS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое токены дизайна
- Соглашения об именовании токенов
- Мульт##брендовая темизация с переменными CSS
- Инструменты для токенов: Style Dictionary