Создание кастомной темы

Carbon Components Svelte предоставляет возможность создавать пользовательские темы для управления внешним видом компонентов на уровне всей библиотеки. Подход к кастомизации основывается на использовании Sass-переменных, CSS-переменных и специальных свойств компонентов.

Настройка Sass-переменных

Библиотека использует набор Sass-переменных для определения цветов, отступов, шрифтов и размеров компонентов. Для создания кастомной темы необходимо:

  1. Создать файл с переопределением переменных, например custom-theme.scss.
  2. Подключить базовые переменные Carbon и переопределить необходимые:
@use 'carbon-components/scss/globals/scss/styles' as *;

$brand-01: #0052ff; // Основной цвет бренда
$ui-background: #f4f4f4; // Цвет фона интерфейса
$text-01: #161616; // Основной текст
$interactive-01: #0f62fe; // Цвет интерактивных элементов

@use 'carbon-components/scss/components/button/button' with (
  $btn-primary-background: $interactive-01,
  $btn-primary-color: $text-01
);

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

Использование CSS-переменных

Для динамической смены темы на клиенте рекомендуется использовать CSS-переменные. Carbon Components Svelte автоматически поддерживает большинство глобальных CSS-переменных:

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

[data-theme='dark'] {
  --cds-ui-background: #161616;
  --cds-text-01: #ffffff;
  --cds-interactive-01: #78a9ff;
}

Переключение тем в Svelte можно реализовать через директиву bind и реактивную переменную:

<script>
  let theme = 'light';

  function toggleTheme() {
    theme = theme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', theme);
  }
</script>

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

Кастомизация отдельных компонентов

Каждый компонент в Carbon Svelte поддерживает свойства для настройки внешнего вида:

  • Button: kind, size, disabled, expressive
  • TextInput: helperText, invalid, labelText, placeholder
  • Dropdown: items, selectedItem, size

Для глубокого изменения стиля компонентов можно использовать class или style в комбинации с CSS-переменными:

<Button class="custom-button">Нажми меня</Button>

<style>
.custom-button {
  background-color: var(--cds-interactive-01);
  color: var(--cds-text-01);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}
</style>

Организация кастомной темы

Для больших проектов рекомендуется структурировать тему по уровням:

  1. Глобальные переменные — шрифты, цвета, отступы.
  2. Компонентные стили — переопределение Sass-переменных или CSS-переменных для отдельных компонентов.
  3. Тематические наборы — light/dark или несколько цветовых схем для быстрого переключения.

Пример структуры файлов:

src/themes/
├─ _variables.scss
├─ _components.scss
├─ light.scss
├─ dark.scss

В main.js или App.svelte подключаются соответствующие файлы через import или через CSS-переменные для динамического применения темы.

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

Для глобального управления темой удобно использовать Svelte store:

// themeStore.js
import { writable } from 'svelte/store';

export const theme = writable('light');

// App.svelte
<script>
  import { theme } from './themeStore.js';

  $: document.documentElement.setAttribute('data-theme', $theme);
</script>

<button on:click={() => theme.set($theme === 'light' ? 'dark' : 'light')}>
  Сменить тему
</button>

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

  • Использовать CSS-переменные для всех глобальных цветов и отступов.
  • Переопределять только нужные Sass-переменные для уменьшения объёма стилей.
  • Группировать переменные по логике использования: цвета бренда, фоны, тексты, интерактивные элементы.
  • Проверять совместимость кастомной темы с компонентами Carbon, так как некоторые компоненты имеют сложные вложенные стили.

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

Оглавление