Переключение между темами

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

Контекст темы

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

import { setTheme } from 'carbon-components-svelte';

setTheme('g100'); // Включение тёмной темы

Поддерживаются стандартные темы Carbon:

'white' — светлая тема по умолчанию
'g10', 'g90', 'g100' — градации тёмной темы

Установка темы через setTheme автоматически обновляет все компоненты, использующие переменные темы, без необходимости ручного применения классов или inline-стилей.

CSS-переменные и автоматическая адаптация компонентов

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

--cds-background: #ffffff;
--cds-text-primary: #161616;
--cds-button-background: #0f62fe;

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

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

Для ситуаций, когда требуется локальная тема на уровне части интерфейса, применяется компонент ThemeProvider:

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

<ThemeProvider theme="g90">
  <Button>Кнопка в тёмной теме</Button>
</ThemeProvider>

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

Динамическое переключение темы в Svelte

Переключение темы в реальном времени реализуется через реактивные переменные Svelte. Пример:

<script>
  import { setTheme } from 'carbon-components-svelte';
  import { onMount } from 'svelte';

  let currentTheme = 'white';

  function toggleTheme() {
    currentTheme = currentTheme === 'white' ? 'g100' : 'white';
    setTheme(currentTheme);
  }

  onMount(() => {
    setTheme(currentTheme);
  });
</script>

<button on:click={toggleTheme}>
  Переключить тему
</button>

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

Особенности работы с темами для кастомных компонентов

Если создаются собственные компоненты, важно использовать CSS-переменные Carbon вместо жёстко заданных цветов:

<style>
  div.custom-card {
    background-color: var(--cds-background);
    color: var(--cds-text-primary);
    border: 1px solid var(--cds-border-subtle);
  }
</style>

<div class="custom-card">
  Контент компонента
</div>

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

Плавные переходы между темами

Для создания визуально комфортного эффекта переключения можно добавить CSS-анимацию:

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

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