Цветовая система

Vuetify использует Material Design Color System, которая обеспечивает единообразие визуальных элементов и позволяет быстро управлять темами приложения. Цветовая система включает основные цвета, акцентные цвета, градации оттенков и поддержку светлых и тёмных тем.

Основные цвета

Каждый проект Vuetify по умолчанию имеет набор основных цветов, включающий:

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

Цвета определяются не только названием, но и градациями оттенков от lighten-5 до darken-4. Например, primary lighten-2 создаёт светлый вариант основного цвета.

Акцентные цвета

Акцентные цвета (accent) применяются для кнопок, чекбоксов, слайдеров и других интерактивных элементов. В Vuetify доступно четыре стандартных акцента:

  • accent-1
  • accent-2
  • accent-3
  • accent-4

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

Тёмная и светлая тема

Vuetify поддерживает динамическое переключение тем:

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

Тема влияет на все компоненты, автоматически подбирая контраст текста, кнопок и иконок.

Градации цветов

Каждый базовый цвет Vuetify представлен в виде градаций, позволяющих создавать плавные переходы и выделять элементы. Формат:

<color> lighten-1
<color> lighten-2
<color> lighten-3
<color> lighten-4
<color> lighten-5
<color> darken-1
<color> darken-2
<color> darken-3
<color> darken-4

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

<v-btn color="primary lighten-2">Нажать</v-btn>
<v-alert type="error darken-1">Ошибка!</v-alert>

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

Vuetify позволяет добавлять свои цвета в тему через объект themes:

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          brandBlue: '#1E88E5',
          brandPink: '#E91E63',
        },
      },
    },
  },
})

Эти цвета можно использовать так же, как стандартные: <v-btn color="brandBlue">.

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

Компоненты Vuetify поддерживают утилитарные классы для цветов, которые можно применять к тексту, фону и бордерам:

  • text-primary – цвет текста.
  • bg-primary – цвет фона.
  • border-primary – цвет рамки.

Также доступны модификаторы градаций: text-primary lighten-3, bg-success darken-2.

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

Цвета можно менять на лету через реактивные переменные Vue:

<template>
  <v-btn :color="currentColor">Кнопка</v-btn>
  <v-switch v-model="darkTheme" label="Тёмная тема"/>
</template>

<script>
export default {
  data() {
    return {
      darkTheme: false,
      currentColor: 'primary',
    }
  },
  watch: {
    darkTheme(val) {
      this.$vuetify.theme.global.name.value = val ? 'dark' : 'light'
    }
  }
}
</script>

Цвета состояния компонентов

Vuetify автоматически использует цветовую систему для состояний компонентов:

  • hover – подсветка при наведении.
  • active – активное состояние кнопок и чекбоксов.
  • disabled – уменьшенная яркость для неактивных элементов.
  • focus – рамка или тень при фокусе на поле ввода.

Цветовые палитры Material Design

Vuetify интегрирован с официальными палитрами Material Design, что обеспечивает совместимость и единообразие:

  • Красный: red, red lighten-3, red darken-1
  • Синий: blue, blue lighten-2, blue darken-3
  • Зелёный: green, green lighten-1, green darken-2

Каждая палитра содержит 13 оттенков, включая стандартные base, lighten и darken.

Советы по использованию

  • Выбирать primary и secondary цвета, исходя из бренда приложения.
  • Использовать градации для визуальной иерархии элементов.
  • Для кнопок и предупреждений применять стандартные success, error, warning.
  • Поддерживать светлую и тёмную темы для удобства пользователей.
  • Использовать утилитарные классы text- и bg- для быстрого изменения цвета без кастомизации компонента.

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

Оглавление