Светлая и темная темы

Vuetify предоставляет встроенную поддержку светлой и темной темы оформления, что позволяет быстро адаптировать интерфейс приложения под разные визуальные предпочтения пользователя. Основным инструментом для работы с темами является объект theme, который настраивается в корневом экземпляре Vuetify.

Настройка темы при создании Vuetify

При инициализации Vuetify можно указать цветовую схему по умолчанию:

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

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00',
        },
      },
      dark: {
        colors: {
          primary: '#2196F3',
          secondary: '#FFCDD2',
          accent: '#FF4081',
          error: '#F44336',
          info: '#00BCD4',
          success: '#8BC34A',
          warning: '#FFC107',
        },
      },
    },
  },
})

export default vuetify

defaultTheme — задает тему, которая используется по умолчанию.
themes — объект, содержащий определения светлой (light) и темной (dark) тем.
colors — ключи соответствуют предопределенным переменным Vuetify (primary, secondary, accent, error, info, success, warning), которые автоматически применяются к компонентам.

Переключение между темами динамически

Vuetify предоставляет возможность программного переключения темы в рантайме через доступ к объекту $vuetify.theme. Для этого можно использовать реактивное свойство:

export default {
  data() {
    return {
      isDark: false,
    }
  },
  watch: {
    isDark(newVal) {
      this.$vuetify.theme.global.name.value = newVal ? 'dark' : 'light'
    },
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark
    },
  },
}

В этом примере свойство isDark управляет текущей темой. При изменении его значения автоматически обновляется глобальная тема приложения.

Пользовательские цвета и вариации

Vuetify позволяет расширять стандартные цвета и создавать собственные пользовательские палитры:

themes: {
  light: {
    colors: {
      primary: '#1976D2',
      customBlue: '#1E88E5',
    },
  },
  dark: {
    colors: {
      primary: '#2196F3',
      customBlue: '#90CAF9',
    },
  },
}

После определения пользовательского цвета customBlue его можно использовать в компонентах:

<v-btn color="customBlue">Нажми меня</v-btn>

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

Vuetify 3 генерирует CSS-переменные для каждой темы, что позволяет использовать их не только в компонентах Vuetify, но и в собственных стилях:

body {
  background-color: var(--v-theme-background);
  color: var(--v-theme-on-background);
}

Основные переменные:

--v-theme-primary, --v-theme-secondary — основные цвета.
--v-theme-background — фон приложения.
--v-theme-surface — цвет поверхностей (карточки, панели).
--v-theme-on-background, --v-theme-on-surface — цвет текста на соответствующем фоне.

Темы для компонентов

Каждый компонент Vuetify автоматически использует текущую тему. Дополнительно можно переопределять цветовую схему на уровне компонента:

<v-card color="primary" dark>
  <v-card-title>Тёмная карточка</v-card-title>
</v-card>

Атрибут color задает цвет фона компонента.
Атрибут dark или light позволяет локально переопределить режим темы для конкретного компонента.

Хранение предпочтений пользователя

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

mounted() {
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme) {
    this.$vuetify.theme.global.name.value = savedTheme
    this.isDark = savedTheme === 'dark'
  }
},
methods: {
  toggleTheme() {
    this.isDark = !this.isDark
    const themeName = this.isDark ? 'dark' : 'light'
    this.$vuetify.theme.global.name.value = themeName
    localStorage.setItem('theme', themeName)
  },
}

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

Темизация и дизайн системы

Использование светлой и темной темы в Vuetify — это не только визуальный выбор, но и инструмент соблюдения дизайна системы. Грамотная настройка цветов позволяет обеспечить:

Контрастность элементов интерфейса.
Четкость текста и иконок.
Гармоничное сочетание поверхностей, кнопок и фоновых областей.

Адаптация сторонних компонентов

Для сторонних компонентов, не использующих Vuetify по умолчанию, можно использовать глобальные CSS-переменные для синхронизации цвета с текущей темой:

.custom-component {
  background-color: var(--v-theme-surface);
  color: var(--v-theme-on-surface);
}

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