CSS переменные

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

Подключение и использование переменных

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

import { createVuetify } from 'vuetify'

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

После этого каждый цвет можно использовать через CSS-переменные вида:

background-color: var(--v-primary-base);
color: var(--v-secondary-base);

Ключевой момент: Vuetify автоматически генерирует тональные вариации для каждой переменной (-lighten1, -darken2 и т.д.), которые можно применять напрямую в стилях:

border-color: var(--v-primary-darken2);

Динамическая смена темы

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

document.documentElement.style.setProperty('--v-primary-base', '#FF5722')
document.documentElement.style.setProperty('--v-secondary-base', '#607D8B')

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

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

Vuetify 3 поддерживает использование CSS-переменных в inline стилях и scoped стилях компонентов. Например:

<template>
  <v-btn class="custom-btn">Кнопка</v-btn>
</template>

<style scoped>
.custom-btn {
  background-color: var(--v-primary-base);
  color: var(--v-on-primary);
  border-radius: 12px;
}
</style>

Здесь --v-on-primary автоматически подбирается Vuetify как контрастный цвет к primary, что упрощает работу с доступностью и визуальной гармонией.

Кастомизация компонентов через переменные

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

  • Кнопки (v-btn): --v-btn-height, --v-btn-padding, --v-btn-font-size
  • Текстовые поля (v-text-field): --v-input-height, --v-input-label-color, --v-input-border-color
  • Карты (v-card): --v-card-background, --v-card-border-radius

Пример изменения стандартной высоты кнопки и отступов:

.v-btn {
  height: var(--v-btn-height, 48px);
  padding: var(--v-btn-padding, 0 16px);
}

Если задать переменные в глобальном :root, они будут применяться ко всем кнопкам проекта:

:root {
  --v-btn-height: 56px;
  --v-btn-padding: 0 24px;
}

Наследование и переопределение

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

.custom-section {
  --v-primary-base: #009688;
  --v-btn-height: 60px;
}

Все кнопки внутри .custom-section автоматически примут новый цвет и высоту, без изменения глобальных настроек.

Темизация и переменные в TypeScript

При использовании Vuetify с TypeScript можно получать типизированные значения переменных через theme API:

import { useTheme } from 'vuetify'

const theme = useTheme()
const primaryColor = theme.current.value.colors.primary

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

Практические рекомендации

  • Использовать CSS-переменные для всех цветов темы, чтобы обеспечить возможность динамического изменения и светлых/тёмных режимов.
  • Переопределять переменные на уровне :root или контейнера для специфических секций интерфейса.
  • Использовать автоматические тональные вариации (-lighten1, -darken2) для градиентов и hover-эффектов.
  • Стараться применять переменные Vuetify вместо жестко заданных HEX-цветов для сохранения единообразия интерфейса.
  • При работе с компонентами учитывать все специфические CSS-переменные для точного управления внешним видом.

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

Оглавление