Переопределение токенов темы

В Naive UI система тем основана на токенах, которые представляют собой переменные, определяющие внешний вид компонентов. Каждый токен управляет конкретным визуальным аспектом: цветами, отступами, размерами шрифтов, закруглением углов, тенями и другими стилевыми свойствами. Понимание и переопределение этих токенов позволяет гибко настраивать интерфейс под конкретный дизайн.

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

  1. Глобальные токены Глобальные токены применяются ко всем компонентам, если не переопределены локально. Они включают базовые цвета темы (primary, success, warning, error), шрифты и размеры. Пример базовой структуры токенов:

    import { createTheme, globalLight } from 'naive-ui'

const customTheme = createTheme({
  name: 'custom-light',
  base: globalLight,
  overrides: {
    common: {
      primaryColor: '#42b983',
      textColor1: '#333333',
      borderRadius: '8px'
    }
  }
})

    Здесь common содержит базовые токены для цвета, текста и радиусов углов. Все компоненты, использующие эти токены, будут отображаться в новых цветах и с изменённым радиусом.

  2. Локальные токены компонентов Каждый компонент имеет собственный набор токенов, который может переопределять глобальные значения. Например, кнопка (Button) имеет токены:

    • buttonTextColor
    • buttonBorderRadius
    • buttonColorHover
    • buttonColorPressed

    Переопределение выглядит так:

    import { createTheme, globalLight } from 'naive-ui'

const customButtonTheme = createTheme({
  name: 'custom-button',
  base: globalLight,
  overrides: {
    Button: {
      buttonTextColor: '#ffffff',
      buttonColorHover: '#369f6b',
      buttonBorderRadius: '12px'
    }
  }
})

    При этом глобальные токены primaryColor остаются неизменными, если явно не заданы в локальных токенах.

Приоритеты токенов

Naive UI использует строгую иерархию:

  1. Локальные токены компонента – самый высокий приоритет.
  2. Токены темы (overrides) – применяются глобально к группе компонентов.
  3. Базовая тема (base) – значения по умолчанию из light или dark темы.

Понимание этой иерархии важно для корректного переопределения стилей: локальный токен всегда перекрывает глобальный.

Переопределение цветов темы

Цветовая система в Naive UI использует:

  • Основные цвета (primaryColor, infoColor, successColor, warningColor, errorColor)
  • Фоновые цвета (baseColor, tableHeaderColor, popoverColor)
  • Текстовые цвета (textColor1, textColor2, textColor3)

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

import { createTheme, globalLight } from 'naive-ui'

const darkCustomTheme = createTheme({
  name: 'dark-custom',
  base: globalLight,
  overrides: {
    common: {
      primaryColor: '#ff6b6b',
      textColor1: '#f0f0f0',
      textColor2: '#cccccc',
      baseColor: '#1e1e1e',
      borderRadius: '10px'
    },
    Button: {
      buttonColorHover: '#ff8787',
      buttonColorPressed: '#ff4d4d'
    },
    Input: {
      inputBorder: '1px solid #555555',
      inputColor: '#2b2b2b'
    }
  }
})

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

Динамическое переопределение токенов

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

import { useTheme, globalLight } from 'naive-ui'
import { ref } from 'vue'

const isDark = ref(false)

function toggleTheme() {
  const themeOverrides = isDark.value
    ? {
        common: { primaryColor: '#ff6b6b', baseColor: '#1e1e1e' }
      }
    : {
        common: { primaryColor: '#42b983', baseColor: '#ffffff' }
      }

  useTheme(globalLight, themeOverrides)
  isDark.value = !isDark.value
}

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

Переопределение токенов с функциями

Некоторые токены можно задавать через функции, что позволяет создавать зависимые значения:

import { createTheme, globalLight } from 'naive-ui'

const dynamicTheme = createTheme({
  name: 'dynamic-theme',
  base: globalLight,
  overrides: {
    common: {
      primaryColor: '#42b983',
      primaryColorHover: (token) => lighten(token.primaryColor, 10),
      primaryColorPressed: (token) => darken(token.primaryColor, 10)
    }
  }
})

Здесь lighten и darken – функции для изменения яркости цвета. Использование функций позволяет строить адаптивные темы, где hover и pressed состояния автоматически зависят от основного цвета.

Практические советы

  • Использовать локальные токены для точечного контроля: глобальные изменения могут повлиять на весь UI.
  • Не дублировать глобальные цвета в каждом компоненте, если достаточно переопределить базовые токены.
  • Динамическое обновление токенов удобно для реализации ночного режима или пользовательских схем цветов.
  • Функции в токенах повышают гибкость и сокращают количество ручных настроек.

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

Оглавление