Переменные CSS для темизации
Создавайте систему тем на основе токенов с использованием пользовательских свойств CSS, переключающихся между светлыми и тёмными значениями.
«Переменные CSS для темизации» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Обзор архитектуры тем
Пользовательские свойства CSS — основа современной работы с темами. Они служат динамическим слоем токенов, который можно заменять во время выполнения, обеспечивая режим dark, решения под собственным брендом и персонализацию под управлением пользователя.
Слои токенов дизайна
Хорошо структурированная система тем состоит из трёх слоёв:
- Примитивные токены: исходные значения (
--blue-500: #3b82f6) - Семантические токены: основанные на значении (
--color-primary: var(--blue-500)) - Токены компонентов: специфичные для компонентов (
--button-bg: var(--color-primary))
Определение светлой темы
Определите полную светлую тему на :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
Переопределение темы dark
Переопределяйте токены в области видимости dark (медиазапросе или классе):
<div class="demo">Adapts to dark mode automatically</div>
Использование токенов в компонентах
Компоненты используют семантические токены, а не жёстко заданные значения:
<div class="card">Card using theme tokens</div>
Переопределение с помощью класса
Разрешите ручное переопределение с помощью класса на <html>:
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
Тематизация на уровне компонента
Компонент может определить собственный слой токенов для более глубокой настройки:
<div class="card">Component-level theming</div>
Тематизация под собственным брендом
Переменные CSS позволяют создавать продукты под собственным брендом, в которых каждый клиент получает отдельную тему благодаря переопределению небольшого набора брендовых токенов:
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
Переходы при смене темы
Плавные переходы между темами можно реализовать с помощью перехода CSS для свойств, связанных с цветом:
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
Документирование токенов
Документируйте токены дизайна, чтобы все разработчики знали, какие переменные использовать. Компонент руководства по стилям (например, Storybook), отображающий все токены с их значениями для светлой темы и темы dark, бесценен для больших команд.
Инструменты для токенов: Style Dictionary
Style Dictionary (от Amazon) автоматически преобразует токены дизайна, определённые в JSON, в пользовательские свойства CSS, константы JavaScript и форматы для других платформ, поддерживая синхронизацию токенов между дизайном и кодом.
Быстрая проверка
В двухуровневой архитектуре токенов на какой тип токена должен ссылаться компонент .button для цвета фона?
Повторение
Переменные CSS обеспечивают надёжные системы тем. Создайте три слоя: примитивные токены, семантические токены и токены компонентов. Определяйте темы как переопределения токенов на :root с помощью медиазапроса или селектора атрибута. Используйте в компонентах семантические токены для автоматического наследования темы. Такие инструменты, как Style Dictionary, автоматизируют распространение токенов между платформами.
Часто задаваемые вопросы
Урок «Переменные CSS для темизации» бесплатный?
Да — полный текст урока «Переменные CSS для темизации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переменные CSS для темизации»?
Создавайте систему тем на основе токенов с использованием пользовательских свойств CSS, переключающихся между светлыми и тёмными значениями. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Переменные CSS для темизации»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Медиазапрос prefers-color-scheme
- Переменные CSS для темизации
- Свойство color-scheme
- Автоматическое и ручное переключение тёмного режима