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

Naive UI предоставляет гибкий механизм для кастомизации визуального оформления компонентов через систему тем. Каждая тема представляет собой объект, содержащий значения CSS-переменных, которые применяются к компонентам библиотеки. Это позволяет изменять цвета, размеры, отступы и прочие визуальные параметры без необходимости прямого редактирования стилей компонентов.

Структура темы

Тема в Naive UI состоит из основных категорий переменных:

  • color — набор цветов для текста, фона, границ, акцентов.
  • font — параметры шрифтов: размер, вес, семейство.
  • border — радиусы, ширины и стили границ.
  • boxShadow — тени компонентов.
  • action — состояния элементов, например hover, pressed, focus.
  • fontSize — глобальные размеры шрифтов.

Пример базовой структуры темы:

import { createTheme } from 'naive-ui'

const customTheme = createTheme({
  common: {
    primaryColor: '#4CAF50',
    primaryColorHover: '#45A049',
    infoColor: '#2196F3',
    successColor: '#8BC34A',
    warningColor: '#FFC107',
    errorColor: '#F44336',
    fontSize: '14px',
    borderRadius: '6px'
  },
  Button: {
    color: '#4CAF50',
    colorHover: '#45A049',
    colorPressed: '#388E3C',
    textColor: '#FFFFFF'
  },
  Input: {
    borderRadius: '4px',
    borderColor: '#CCCCCC',
    borderColorFocus: '#4CAF50'
  }
})
  • common содержит глобальные переменные, которые наследуются всеми компонентами.
  • Каждая компонента может иметь отдельные переопределения.

Подключение кастомной темы

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

import { createApp, h } from 'vue'
import { create, NButton, NConfigProvider } from 'naive-ui'
import { customTheme } from './themes'

const naive = create()

createApp({
  render: () =>
    h(NConfigProvider, { theme: customTheme }, [
      h(NButton, { type: 'primary' }, { default: () => 'Кнопка' })
    ])
}).use(naive).mount('#app')
  • theme принимает объект, созданный через createTheme.
  • Все вложенные компоненты будут использовать указанные стили.

Переопределение отдельных переменных

Для тонкой настройки отдельных аспектов компонента можно использовать CSS-переменные или props темы.

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

const buttonTheme = {
  Button: {
    color: '#FF5722',
    colorHover: '#E64A19',
    colorPressed: '#D84315',
    textColor: '#FFFFFF',
    borderRadius: '8px'
  }
}

Затем объединяем с глобальной темой:

import { mergeTheme } from 'naive-ui'

const finalTheme = mergeTheme(customTheme, buttonTheme)
  • mergeTheme объединяет несколько объектов темы, при этом приоритет имеют свойства последнего объекта.
  • Этот подход позволяет создавать модулируемые темы, где базовая тема задается глобально, а отдельные компоненты кастомизируются локально.

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

Naive UI поддерживает динамическое обновление темы без перезагрузки приложения. Для этого используется реактивный объект Vue:

import { reactive } from 'vue'

const themeState = reactive({
  theme: customTheme
})

// Применение
h(NConfigProvider, { theme: themeState.theme })

// Смена темы
themeState.theme = darkTheme
  • Можно реализовать переключение светлой и тёмной темы.
  • Любые изменения в объекте темы сразу отражаются на всех компонентах.

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

  1. Использовать common для базовых цветов — так проще менять основной стиль всего приложения.
  2. Создавать отдельные объекты для крупных компонентных наборов — это упрощает поддержку и масштабирование темы.
  3. Проверять контраст цветов — особенно для текста на цветных фонах, чтобы соблюсти доступность.
  4. Использовать mergeTheme для расширяемости — позволяет подключать сторонние темы без полного копирования стилей.
  5. Оптимизировать размеры и радиусы через единый объект переменных — упрощает глобальные изменения интерфейса.

Полезные инструменты Naive UI для работы с темами

  • createTheme — создание нового объекта темы.
  • mergeTheme — объединение нескольких тем.
  • NConfigProvider — контекстный провайдер для применения темы на уровне дерева компонентов.
  • CSS-переменные компонентов — возможность на лету менять отдельные стили через style или реактивные переменные.

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

Оглавление