Применение цветов к компонентам

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

Основные источники цветов:

  • Тема по умолчанию – primary, secondary, accent, error, info, success, warning.
  • Дополнительные цвета – цвета из палитры Material Design, например red, blue, green с уровнями оттенков lighten-1, darken-2 и т.д.
  • Пользовательские цвета – можно задавать через CSS-переменные или через настройку темы Vuetify.

Применение цвета к компоненту выполняется через свойство color. Например:

<v-btn color="primary">Кнопка</v-btn>
<v-alert color="error">Ошибка!</v-alert>

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

Использование оттенков и вариаций цвета

Для более точного контроля можно применять оттенки и вариации:

  • lighten-[1-5] – светлые оттенки.
  • darken-[1-4] – темные оттенки.
  • accent-[1-4] – акцентные оттенки для выделения элементов.

Пример:

<v-btn color="blue lighten-2">Светло-синяя кнопка</v-btn>
<v-chip color="red darken-3">Темно-красная метка</v-chip>
<v-icon color="green accent-3">mdi-check</v-icon>

Оттенки применяются к любому компоненту, который поддерживает свойство color.

Цвета текста и фона

Vuetify позволяет отдельно задавать цвет текста и фона:

  • Текст: class="text-[color]" Примеры: text-primary, text-success, text-red lighten-1.

  • Фон: class="bg-[color]" Примеры: bg-secondary, bg-warning lighten-2.

Пример использования:

<v-card class="bg-blue lighten-4">
  <v-card-title class="text-red darken-2">Заголовок</v-card-title>
  <v-card-text class="text-body-1 text-grey darken-1">
    Содержимое карточки
  </v-card-text>
</v-card>

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

Темизация компонентов

Vuetify поддерживает динамические темы, которые можно задавать глобально через объект theme при инициализации Vuetify:

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

После этого компоненты автоматически будут использовать эти цвета при применении соответствующих классов и свойств:

<v-btn color="primary">Синяя кнопка</v-btn>
<v-alert color="error">Ошибка!</v-alert>

Для переключения между светлой и тёмной темой используется свойство dark:

<v-app :theme="{ dark: true }">
  <v-btn color="primary">Темная тема</v-btn>
</v-app>

Градиенты и пользовательские цвета

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

<v-card style="background: linear-gradient(45deg, #FF6B6B, #FFD93D); color: white;">
  Градиентная карточка
</v-card>

Для более глобального подхода можно добавить пользовательские переменные в scss или css и использовать их через style или class.

Цвета для иконок, кнопок и индикаторов

  • Иконки – свойство color или классы text-[color].
  • Кнопки – color, с возможностью комбинации с outlined, text или elevated.
  • Индикаторы (progress, chips, badges) – те же правила, что и для обычных компонентов.

Пример:

<v-btn color="success" outlined>
  <v-icon left color="green darken-2">mdi-check</v-icon>
  Подтвердить
</v-btn>
<v-progress-linear color="purple accent-4" height="10" :value="75"></v-progress-linear>

Динамическое управление цветом через привязку

Свойство color поддерживает двустороннюю привязку к переменной:

<template>
  <v-btn :color="btnColor">Нажми меня</v-btn>
  <v-select v-model="btnColor" :items="colors" label="Выберите цвет" />
</template>

<script>
export default {
  data() {
    return {
      btnColor: 'primary',
      colors: ['primary', 'secondary', 'success', 'error', 'warning', 'info']
    }
  }
}
</script>

Такой подход делает интерфейс интерактивным и адаптивным, позволяя менять цвета компонентов в реальном времени.

Итоговые рекомендации по цветам

  • Использовать тему Vuetify для единообразия цветов в приложении.
  • Применять оттенки (lighten, darken, accent) для визуального контраста.
  • Разделять цвета текста и фона через text-[color] и bg-[color].
  • Для нестандартных эффектов использовать CSS-переменные и градиенты.
  • Динамическая привязка цвета повышает интерактивность компонентов.

Сочетание этих подходов обеспечивает гибкое, эстетичное и структурированное применение цветов в интерфейсах на Vuetify.

Оглавление