Theme provider и контекст

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

Подключение Theme Provider

Для начала работы необходимо импортировать ThemeProvider из пакета carbon-components-svelte:

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

Компонент ThemeProvider используется как обёртка для всей части приложения или для отдельных секций, где требуется единая тема:

<ThemeProvider theme="g100">
  <YourComponent />
</ThemeProvider>

Здесь параметр theme определяет используемую тему. Доступные варианты стандартно включают:

  • "white" — светлая тема по умолчанию
  • "g10" — светлая с серыми оттенками
  • "g90" — тёмная тема
  • "g100" — полностью тёмная тема

Ключевой момент: Theme Provider не только меняет цветовую схему, но и предоставляет контекст для всех дочерних компонентов, что позволяет им автоматически подстраиваться под заданную тему.

Контекст и его назначение

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

Установка контекста

Внутри ThemeProvider автоматически создаётся контекст с ключом CARBON_THEME. Любой дочерний компонент может получить доступ к этому контексту:

<script>
  import { getContext } from 'svelte';
  const theme = getContext('CARBON_THEME');
</script>

<p>Текущая тема: {theme}</p>

Контекст хранит объект с настройками темы, который включает:

  • theme: название темы ("white", "g90" и т.д.)
  • prefix: префикс классов Carbon (bx по умолчанию)
  • rtl: логическое значение для направления текста (true для right-to-left)

Использование контекста упрощает создание компонентов, адаптирующихся под разные темы без дублирования кода.

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

Theme Provider позволяет менять тему в реальном времени. Для этого можно использовать привязку к переменной:

<script>
  import { ThemeProvider } from 'carbon-components-svelte';
  let currentTheme = 'white';

  function toggleTheme() {
    currentTheme = currentTheme === 'white' ? 'g90' : 'white';
  }
</script>

<ThemeProvider {theme}={currentTheme}>
  <button on:click={toggleTheme}>Сменить тему</button>
  <YourComponent />
</ThemeProvider>

Все дочерние компоненты автоматически обновятся при изменении переменной currentTheme.

Работа с пользовательскими настройками

Кроме стандартной цветовой схемы, Theme Provider позволяет добавлять кастомные свойства в контекст:

<ThemeProvider theme="g100" custom={{ fontSize: '16px', borderRadius: '8px' }}>
  <YourComponent />
</ThemeProvider>

Дочерние компоненты могут получить доступ к этим параметрам:

<script>
  import { getContext } from 'svelte';
  const { theme, custom } = getContext('CARBON_THEME');
</script>

<p style="font-size: {custom.fontSize}; border-radius: {custom.borderRadius};">
  Пример с кастомными настройками
</p>

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

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

Все стандартные компоненты Carbon, такие как Button, Checkbox, TextInput, автоматически используют тему из контекста Theme Provider. Это позволяет:

  • Поддерживать единый стиль кнопок, полей ввода и меню
  • Легко переключать светлую и тёмную тему
  • Обеспечивать корректное отображение при использовании RTL

Пример использования с компонентами:

<ThemeProvider theme="g90">
  <Button kind="primary">Основная кнопка</Button>
  <TextInput labelText="Введите текст" />
</ThemeProvider>

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

Рекомендации по структуре приложения

  • Разместить ThemeProvider на уровне корневого компонента для глобальной темы
  • Для локальных вариантов темы можно оборачивать отдельные секции или панели
  • Использовать контекст для передачи кастомных настроек, чтобы компоненты оставались универсальными

Использование Theme Provider и контекста делает интерфейс гибким, модульным и легко масштабируемым, обеспечивая централизованное управление визуальным стилем и настройками компонентов.

Оглавление