CSS переменные и темы

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

Объявление и использование CSS переменных

CSS переменные объявляются с помощью синтаксиса --имя-переменной и чаще всего размещаются в корневом селекторе :root:

:root {
  --primary-color: #4f46e5;
  --secondary-color: #facc15;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

Использование переменных осуществляется через функцию var():

button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-base);
  padding: calc(var(--spacing-unit) * 2);
}

В SvelteKit компонентах можно применять CSS переменные как внутри <style> тегов компонента, так и глобально через app.css или global.css.

Динамическая смена тем

Одно из преимуществ CSS переменных — возможность легко менять тему приложения без перезагрузки страницы. Для этого создаются отдельные блоки переменных для каждой темы:

:root {
  --primary-color: #4f46e5;
  --background-color: #ffffff;
  --text-color: #111827;
}

[data-theme="dark"] {
  --primary-color: #6366f1;
  --background-color: #1f2937;
  --text-color: #f9fafb;
}

В SvelteKit динамическая смена темы может управляться через состояние приложения:

<script>
  import { writable } from 'svelte/store';

  export const theme = writable('light');

  function toggleTheme() {
    theme.update(current => current === 'light' ? 'dark' : 'light');
  }
</script>

<svelte:window bind:document.body.dataset-theme={$theme} />

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

Интеграция с UI библиотеками

Многие UI библиотеки для SvelteKit, такие как Svelte Material UI (SMUI) или Skeleton UI, используют CSS переменные для настройки компонентов:

  • Цвета: позволяет изменять основной, вторичный и акцентные цвета кнопок, карточек и меню.
  • Размеры: легко масштабировать компоненты, задавая переменные для padding, margin, border-radius.
  • Типографика: управление шрифтами и их размерами через переменные.

Пример настройки темы для SMUI:

:root {
  --smui-theme-primary: #4f46e5;
  --smui-theme-secondary: #facc15;
  --smui-theme-background: #ffffff;
  --smui-theme-surface: #f3f4f6;
}

Преимущества использования CSS переменных

  1. Централизованное управление стилями – все изменения можно делать в одном месте.
  2. Поддержка динамических тем – переключение между светлой и темной темой без переписывания стилей.
  3. Совместимость с компонентной архитектурой – переменные могут наследоваться и переопределяться на уровне отдельных компонентов.
  4. Производительность – браузеры эффективно обрабатывают переменные, а их обновление не требует пересборки CSS.

Продвинутые техники

  • Комбинирование переменных и функций CSS: calc(), clamp() и другие позволяют создавать адаптивные размеры:
.card {
  padding: calc(var(--spacing-unit) * 3);
  font-size: clamp(14px, 1.2vw, 18px);
}
  • Наследование переменных между компонентами: локальные переменные компонента могут переопределять глобальные:
<style>
  :global(:root) {
    --primary-color: #4f46e5;
  }

  .special-button {
    --primary-color: #f43f5e;
    background-color: var(--primary-color);
  }
</style>
  • Темизация с использованием data-attributes позволяет легко переключать темы без JavaScript-фреймворков:
<body data-theme="dark">
  <button>Тема</button>
</body>

Практическая структура для SvelteKit проекта

  1. src/app.css – глобальные CSS переменные и базовая типографика.
  2. src/lib/styles/themes.css – набор переменных для светлой и темной темы.
  3. src/routes/+layout.svelte – логика переключения темы.
  4. Компоненты – локальные переменные для индивидуальной стилизации.

Такой подход обеспечивает гибкость, масштабируемость и чистоту кода при работе с UI библиотеками и компонентами в SvelteKit.

Оглавление