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

В Vuetify тема определяет визуальный стиль компонентов, включая цвета, оттенки и акценты. Для управления темами используется объект theme, который позволяет настроить цвета primary, secondary, accent, error, info, success и warning.

Пример базовой конфигурации темы:

import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'customLight',
    themes: {
      customLight: {
        dark: false,
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00'
        }
      }
    }
  }
})

export default vuetify

Здесь создаётся светлая тема customLight с определёнными цветовыми значениями.

Включение и переключение между темами

Vuetify поддерживает динамическое переключение между светлой и тёмной темой. Для этого используется метод setTheme через vuetify.theme.global.

Пример переключения темы на тёмную:

import { useTheme } from 'vuetify'

const theme = useTheme()
theme.global.name.value = 'customDark'

Конфигурация тёмной темы может быть аналогична светлой, но с другими цветовыми значениями:

customDark: {
  dark: true,
  colors: {
    primary: '#BB86FC',
    secondary: '#03DAC6',
    accent: '#3700B3',
    error: '#CF6679',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00'
  }
}

Расширение и наследование тем

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

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

const baseTheme = {
  dark: false,
  colors: {
    primary: '#1976D2',
    secondary: '#424242'
  }
}

const extendedTheme = {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    accent: '#82B1FF',
    info: '#2196F3'
  }
}

Такой подход уменьшает дублирование кода и упрощает управление несколькими темами.

Использование CSS-переменных

Vuetify автоматически создаёт CSS-переменные для всех цветов темы, доступные через селекторы вида var(--v-theme-primary). Это позволяет подстраивать стили компонентов и кастомных элементов под текущую тему.

Пример:

.custom-button {
  background-color: var(--v-theme-primary);
  color: var(--v-theme-on-primary);
}

--v-theme-on-primary — это цвет текста, автоматически подбираемый для контраста с primary.

Темизация отдельных компонентов

Помимо глобальной темы, можно задавать локальные темы для отдельных компонентов с помощью свойства theme:

<v-btn :theme="{ colors: { primary: '#E91E63', secondary: '#FFEB3B' } }">
  Кастомная кнопка
</v-btn>

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

Настройка шрифтов и типографики

Vuetify позволяет интегрировать кастомные шрифты и размеры текста в тему:

const vuetify = createVuetify({
  theme: { defaultTheme: 'customLight' },
  defaults: {
    global: {
      font: {
        family: 'Roboto, sans-serif',
        size: 16,
        weight: 400
      }
    }
  }
})

Настройка типографики через объект defaults.global.font распространяется на все компоненты, поддерживающие текстовые свойства.

Динамическая адаптация цвета

Для сложных интерфейсов удобно использовать реактивные свойства темы. Vuetify предоставляет возможность менять цвета компонентов на лету, используя реактивные переменные Vue:

import { ref } from 'vue'
import { useTheme } from 'vuetify'

const theme = useTheme()
const primaryColor = ref('#1976D2')

watch(primaryColor, (newColor) => {
  theme.global.current.value.colors.primary = newColor
})

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

Лучшие практики кастомизации темы

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

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

Оглавление