Программное изменение темы

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

Подключение и подготовка

Для начала необходимо импортировать глобальные стили Carbon и установить переменные темы. В Svelte это делается через основной файл стилей приложения:

import 'carbon-components-svelte/css/all.css';

CSS-переменные задаются на уровне корневого элемента :root или контейнера приложения:

:root {
  --cds-background: #ffffff;
  --cds-text-01: #161616;
  --cds-interactive-01: #0f62fe;
}

Эти переменные контролируют ключевые цвета интерфейса: фон, основной текст и интерактивные элементы.

Динамическое изменение темы через Svelte

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

import { writable } from 'svelte/store';

export const theme = writable({
  background: '#ffffff',
  text01: '#161616',
  interactive01: '#0f62fe'
});

theme.subscribe(value => {
  document.documentElement.style.setProperty('--cds-background', value.background);
  document.documentElement.style.setProperty('--cds-text-01', value.text01);
  document.documentElement.style.setProperty('--cds-interactive-01', value.interactive01);
});

Теперь изменение темы сводится к простому обновлению состояния:

theme.set({
  background: '#161616',
  text01: '#ffffff',
  interactive01: '#ff7f50'
});

Интеграция с компонентами Carbon

Большинство компонентов Carbon используют CSS-переменные для своих цветов и стилей. Благодаря этому, обновление переменных автоматически влияет на внешний вид кнопок, карточек, меню и других элементов без необходимости повторного рендеринга компонентов:

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<Button kind="primary">Primary Button</Button>

При изменении --cds-interactive-01 цвет кнопки изменится в реальном времени.

Использование темы для светлой и темной схем

Carbon Components Svelte поддерживает две основные темы: светлую и темную. Для переключения достаточно создать два объекта с переменными и подменять их через store:

const lightTheme = {
  background: '#ffffff',
  text01: '#161616',
  interactive01: '#0f62fe'
};

const darkTheme = {
  background: '#161616',
  text01: '#ffffff',
  interactive01: '#0f62fe'
};

// Переключение
theme.set(isDarkMode ? darkTheme : lightTheme);

Это позволяет реализовать «тумблер» для смены темы в интерфейсе пользователя.

Анимация перехода между темами

Для более плавного визуального эффекта можно добавить CSS-переход для свойств, используемых в переменных:

:root {
  transition: background 0.3s ease, color 0.3s ease;
}

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

Расширение функциональности

Можно добавлять дополнительные переменные для кастомизации компонентов Carbon, например, для границ, теней и акцентов:

theme.set({
  background: '#161616',
  text01: '#ffffff',
  interactive01: '#ff7f50',
  border01: '#cccccc',
  shadow01: '0 2px 4px rgba(0, 0, 0, 0.2)'
});

Поддержка дополнительных переменных позволяет создавать полностью уникальные визуальные стили приложения без изменения исходного кода компонентов.

Практические рекомендации

  • Хранить все цвета и значения темы в одном объекте для удобного управления и расширения.
  • Использовать Svelte store для синхронизации темы между компонентами.
  • Для крупных приложений создавать модуль темы, экспортирующий функции переключения и текущую конфигурацию.
  • Проверять совместимость кастомных переменных с компонентами Carbon, чтобы не нарушить стилизацию.

Программное управление темой через CSS-переменные и Svelte store обеспечивает гибкость, минимизирует дублирование кода и позволяет легко масштабировать дизайн системы в реальном времени.

Оглавление