Темизация компонентов

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

Основные принципы темизации

  1. CSS-переменные

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

  • --cds-background: фон компонента
  • --cds-border: цвет границы
  • --cds-text: основной цвет текста
  • --cds-interactive: цвет интерактивных элементов (кнопки, ссылки)

Пример переопределения переменной глобально:

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

Эти значения автоматически применяются ко всем компонентам, использующим соответствующие переменные.

Тёмная и светлая темы

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

:root[data-theme="light"] {
  --cds-background: #ffffff;
  --cds-text: #161616;
  --cds-border: #e0e0e0;
}

:root[data-theme="dark"] {
  --cds-background: #161616;
  --cds-text: #f4f4f4;
  --cds-border: #525252;
}

Переключение темы выполняется динамически через изменение атрибута data-theme на <html> или <body>:

function switchTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
}

Использование CSS-переменных позволяет компонентам автоматически адаптироваться к выбранной теме без необходимости переписывать внутренние стили.

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

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

Пример для кнопки:

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

<Button
  style="--cds-interactive: #ff4f58; --cds-background: #ffe5e5;"
>
  Локальная кнопка
</Button>

В этом примере цвет фона и интерактивного состояния изменён только для конкретной кнопки, не влияя на остальные элементы.

Глобальные настройки темы через Svelte store

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

import { writable } from 'svelte/store';

export const theme = writable('light');

theme.subscribe(value => {
  document.documentElement.setAttribute('data-theme', value);
});

Компоненты, использующие CSS-переменные, автоматически обновляют визуальные свойства при смене темы.

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

<select bind:value={$theme}>
  <option value="light">Светлая</option>
  <option value="dark">Тёмная</option>
</select>

Пользовательские темы и расширение стандартных

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

Пример расширенной темы:

:root[data-theme="custom"] {
  --cds-background: #1a1a2e;
  --cds-text: #e0e0e0;
  --cds-border: #0f3460;
  --cds-interactive: #162447;
  --cds-primary-hover: #53354a;
}

Ключевой момент — использование всех необходимых переменных, иначе часть компонентов может отображаться неконсистентно.

Темизация компонентов с состояниями

Многие компоненты имеют состояния: hover, active, disabled. Carbon управляет этими состояниями через дополнительные переменные:

  • --cds-primary-hover
  • --cds-primary-active
  • --cds-disabled-text

Пример:

<Button
  style="
    --cds-interactive: #ff7f50;
    --cds-primary-hover: #ff6333;
    --cds-primary-active: #ff4500;
  "
>
  Активная кнопка
</Button>

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

Темизация через SCSS

Если проект использует SCSS, Carbon предоставляет возможность импортировать переменные темы и создавать миксины для компонентов:

@use 'carbon-components-svelte/scss/globals' as *;

.my-button {
  background-color: var(--cds-background);
  color: var(--cds-text);
  border-color: var(--cds-border);
  
  &:hover {
    background-color: var(--cds-primary-hover);
  }
}

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

Совместимость тем с кастомными компонентами

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

  • единый визуальный стиль
  • корректное переключение между темами
  • удобство масштабирования приложения

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

<div class="custom-card" style="background: var(--cds-background); color: var(--cds-text);">
  Контент карточки
</div>

Резюме ключевых практик

  • Все компоненты Carbon используют CSS-переменные, что упрощает глобальное и локальное управление стилем.
  • Динамическое переключение тем реализуется через изменение атрибута data-theme.
  • Локальная настройка компонентов возможна через inline-стили или классы.
  • Для крупных проектов рекомендуется применять Svelte store для глобальной темы.
  • Собственные компоненты должны использовать те же переменные, что и Carbon, чтобы сохранялась визуальная консистентность.

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

Оглавление