Переменные темы

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

Основы темизации

Vuetify использует объект theme для управления цветами приложения. Он содержит следующие ключи:

  • primary — основной цвет интерфейса.
  • secondary — второстепенный цвет, для акцентов и второстепенных элементов.
  • accent — цвет акцента, часто используется для кнопок, ссылок и иконок.
  • error — цвет ошибок, предупреждений.
  • info — цвет информационных сообщений.
  • success — цвет успешных действий.
  • warning — цвет предупреждений.

Каждое свойство можно задавать как строкой с именем цвета ('red', 'blue'), так и с конкретным HEX-значением ('#FF0000').

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

import { createVuetify } from 'vuetify'

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

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

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

vuetify.framework.theme.currentTheme = 'dark'

Можно определять отдельные цвета для темной и светлой темы:

themes: {
  light: {
    colors: { primary: '#1976D2' }
  },
  dark: {
    colors: { primary: '#2196F3' }
  }
}

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

Vuetify предоставляет доступ к переменным темы через специальные CSS-переменные. Их можно использовать в стилях:

.my-button {
  background-color: var(--v-primary-base);
  color: var(--v-on-primary);
}

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

  • --v-primary-base — основной цвет.
  • --v-secondary-base — второстепенный цвет.
  • --v-accent-base — цвет акцента.
  • --v-error-base — цвет ошибок.
  • --v-info-base — цвет информации.
  • --v-success-base — цвет успеха.
  • --v-warning-base — цвет предупреждений.

Кроме того, Vuetify генерирует оттенки каждого цвета:

  • -lighten1, -lighten2 … -darken1, -darken2 Например: --v-primary-lighten1, --v-primary-darken2.

Пользовательские переменные

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

themes: {
  light: {
    colors: {
      primary: '#1976D2',
      brand: '#FF4081', // пользовательская переменная
    },
  },
}

CSS-переменные для пользовательских цветов автоматически создаются с префиксом --v-:

.header {
  color: var(--v-brand-base);
}

Типизация и реактивность

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

Глобальная настройка и доступность

  • Цвета темы используются не только в компонентах Vuetify, но и в системных утилитах (v-btn, v-card, v-alert).
  • CSS-переменные можно применять в собственных стилях, что позволяет интегрировать темы с кастомной графикой и анимациями.
  • Для лучшей доступности рекомендуется следить за контрастностью текста на фоне основных цветов.

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

  1. Определять основные цвета приложения в объекте theme для упрощения поддержки.
  2. Использовать пользовательские переменные для фирменного стиля или повторяющихся оттенков.
  3. Комбинировать динамическую смену темы с локальным хранилищем (localStorage) для сохранения предпочтений пользователя.
  4. Проверять контрастность цветов при смене темы, особенно при добавлении темной темы.

Интеграция с SASS/SCSS

Vuetify предоставляет возможность использовать переменные темы в SASS-процессинге:

$primary: map-get($vuetify-theme, 'primary');

.my-class {
  background-color: $primary;
}

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

Итоговое использование

Использование переменных темы в Vuetify обеспечивает единообразие визуального оформления, упрощает смену стиля и позволяет создавать динамические интерфейсы. CSS-переменные, реактивность и возможность расширения через пользовательские цвета делают эту систему гибкой и мощной для любого проекта на Vue.js.

Оглавление