Кастомизация темы

В SvelteKit UI библиотеках кастомизация темы является фундаментальным инструментом для адаптации внешнего вида компонентов под дизайн-систему проекта. Большинство современных библиотек, таких как Svelte Material UI (SMUI), SvelteStrap и Carbon Components Svelte, предоставляют возможность переопределять стандартные переменные темы, работать с CSS-переменными и настраивать глобальные стили через конфигурационные объекты.

Работа с CSS-переменными

CSS-переменные позволяют динамически управлять цветами, размерами, отступами и типографикой компонентов. В SvelteKit UI libs переменные темы чаще всего объявляются на уровне корневого элемента:

:root {
    --primary-color: #6200ee;
    --secondary-color: #03dac6;
    --font-size-base: 16px;
    --border-radius: 8px;
}

Использование CSS-переменных в компонентах обеспечивает моментальное обновление всех связанных элементов при изменении значения переменной. Например, кнопка, использующая переменную --primary-color для фона:

<button style="background-color: var(--primary-color); color: white;">
    Click me
</button>

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

Переопределение стандартной темы через конфигурацию

Многие UI-библиотеки для SvelteKit предоставляют глобальный объект конфигурации для темы. Например, в Svelte Material UI можно определить тему через theme.js:

export const theme = {
    primary: '#6200ee',
    secondary: '#03dac6',
    background: '#f5f5f5',
    surface: '#ffffff',
    error: '#b00020',
    textPrimary: '#000000',
    textSecondary: '#666666',
};

Затем подключение темы происходит в корневом компоненте приложения:

<script>
    import { setTheme } from 'svelte-material-ui/theme';
    import { theme } from './theme.js';

    setTheme(theme);
</script>

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

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

Для более сложной кастомизации часто используют препроцессоры SCSS или SASS. В таких случаях создается отдельный файл переменных, который подключается к каждому компоненту или глобально через app.css:

$primary-color: #6200ee;
$secondary-color: #03dac6;
$font-size-base: 16px;
$border-radius: 8px;

button {
    background-color: $primary-color;
    color: white;
    border-radius: $border-radius;
    font-size: $font-size-base;
}

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

<style lang="scss">
    @import './variables.scss';
    
    .custom-button {
        background-color: $primary-color;
        border-radius: $border-radius;
    }
</style>

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

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

Некоторые Svelte UI библиотеки предоставляют возможность локальной кастомизации отдельного компонента через пропсы. Например, в SvelteStrap кнопки можно настраивать через пропсы color и size:

<Button color="primary" size="lg">
    Большая кнопка
</Button>

Для более гибкой кастомизации можно использовать классы и слоты:

<Button class="custom-button">
    <span slot="icon">⭐</span>
    Кнопка со слотом
</Button>

<style>
.custom-button {
    background-color: var(--secondary-color);
    border-radius: 12px;
}
</style>

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

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

Современные библиотеки SvelteKit UI часто имеют встроенную поддержку темной и светлой схемы. Например, через CSS-переменные и классы на body:

body.light {
    --primary-color: #6200ee;
    --background-color: #ffffff;
}

body.dark {
    --primary-color: #bb86fc;
    --background-color: #121212;
}

Переключение темы может происходить динамически через JS:

function toggleTheme() {
    document.body.classList.toggle('dark');
    document.body.classList.toggle('light');
}

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

Интеграция с Tailwind CSS

SvelteKit UI libs можно комбинировать с Tailwind CSS для дополнительной кастомизации через утилитарные классы. Например, переопределение базовой цветовой палитры:

// tailwind.config.cjs
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: '#6200ee',
                secondary: '#03dac6',
            },
            borderRadius: {
                xl: '1rem',
            },
        },
    },
};

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

Анимации и переходы

Темы можно кастомизировать не только по цвету и размеру, но и через анимации и переходы. В SvelteKit UI libs используется встроенный механизм transition:

<script>
    import { fade, fly } from 'svelte/transition';
</script>

<div in:fade={{ duration: 300 }} out:fly={{ y: 20, duration: 500 }}>
    Появляющийся элемент с кастомной анимацией
</div>

С помощью CSS-переменных и классов можно менять скорость и стиль анимации в зависимости от темы, создавая уникальные визуальные эффекты для разных цветовых схем.

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

  • Использовать CSS-переменные для глобальной темы и SCSS для локальных настроек компонентов.
  • Создавать централизованный объект темы для единообразия стилей.
  • Поддерживать светлую и темную тему через классы на body и динамическое переключение.
  • Сочетать UI-библиотеки с Tailwind CSS для более гибкой адаптивной верстки.
  • Применять локальные пропсы и слоты для уникальной кастомизации отдельных компонентов, сохраняя совместимость с глобальной темой.

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

Оглавление