Встроенные темы

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

Основы встроенных тем

Встроенные темы делятся на две ключевые категории:

  1. Светлая тема (light) – стандартная цветовая схема с преобладанием светлых тонов, обеспечивающая высокую читаемость и минимальную нагрузку на глаза при дневном освещении.
  2. Темная тема (dark) – адаптированная для низкой освещенности схема, где базовые цвета заменены на более темные оттенки, снижая блики и контрастность.

Каждая тема включает набор переменных, которые управляют:

  • Цветами фона и текста
  • Цветами основных элементов (кнопки, input, sel ect)
  • Оттенками для состояния hover, active, disabled
  • Типографикой (шрифты, размеры текста)
  • Отступами и размерами компонентов

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

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

import { createApp } fr om 'vue';
import { NConfigProvider, darkTheme } from 'naive-ui';
import App from './App.vue';

const app = createApp(App);

app.use(NConfigProvider, {
  theme: darkTheme
});

app.mount('#app');

В примере выше применяется темная тема через объект darkTheme. Для светлой темы можно использовать undefined или объект lightTheme, что является значением по умолчанию.

Настройка встроенных тем

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

import { createTheme, NConfigProvider } from 'naive-ui';

const customTheme = createTheme({
  common: {
    primaryColor: '#4caf50',
    primaryColorHover: '#45a049',
    textColor1: '#333333'
  },
  Button: {
    borderRadius: '12px',
    fontSize: '16px'
  }
});

app.use(NConfigProvider, {
  theme: customTheme
});

Особенности кастомизации:

  • Объект common содержит глобальные переменные темы, влияющие на все компоненты.
  • Каждый компонент имеет собственный объект стилей (например, Button, Input, Card), который позволяет изменять только конкретные свойства.
  • Возможность создавать несколько тем и переключать их динамически в приложении.

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

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

import { ref } from 'vue';
import { NConfigProvider, darkTheme, lightTheme } from 'naive-ui';

const isDark = ref(false);

<NConfigProvider :theme="isDark ? darkTheme : lightTheme">
  <App />
</NConfigProvider>

Для плавного переключения можно также переопределять переменные темы в реальном времени, создавая эффекты, соответствующие пользовательским предпочтениям.

Основные переменные встроенных тем

Встроенные темы содержат следующие ключевые переменные:

  • primaryColor – основной цвет для кнопок, ссылок и активных элементов.
  • infoColor, successColor, warningColor, errorColor – стандартные семантические цвета для уведомлений и статусов.
  • textColor1, textColor2 – базовые цвета текста, для заголовков и вспомогательной информации.
  • borderRadius – радиус скругления компонентов.
  • fontSize – базовый размер шрифта.

Эти переменные можно изменять локально для компонентов или глобально через NConfigProvider.

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

Naive UI позволяет интегрировать встроенные темы с CSS-переменными и сторонними стилями. Для этого можно использовать объект themeOverrides, который передается в NConfigProvider:

<NConfigProvider :theme="darkTheme" :theme-overrides="{
  Button: { color: '#ff5722' },
  Input: { borderRadius: '8px' }
}">
  <App />
</NConfigProvider>

Такой подход позволяет:

  • Быстро изменять визуальное оформление отдельных компонентов без затрагивания всей темы.
  • Сохранять совместимость с встроенными темами.
  • Создавать гибридные темы, объединяя светлые и темные оттенки по необходимости.

Рекомендации по работе с темами

  • Использовать встроенные темы как основу, переопределяя только необходимые переменные.
  • При динамическом переключении тем учитывать контрастность и читаемость текста.
  • Для крупных проектов создавать отдельные объекты кастомных тем, чтобы обеспечить единообразие интерфейса.
  • Проверять адаптивность цвета и состояния hover/active при изменении переменных темы.

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

Оглавление