Цветовая палитра

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

Структура палитры

Каждый основной цвет в Vuetify представлен набором оттенков:

  • lighten-5 … lighten-1 – светлые оттенки цвета.
  • base – основной цвет палитры.
  • darken-1 … darken-4 – тёмные оттенки цвета.
  • accent-1 … accent-4 – дополнительные акцентные оттенки, которые используются для выделения элементов.

Пример стандартной палитры primary:

primary: {
  lighten5: '#E3F2FD',
  lighten4: '#BBDEFB',
  lighten3: '#90CAF9',
  lighten2: '#64B5F6',
  lighten1: '#42A5F5',
  base: '#2196F3',
  darken1: '#1E88E5',
  darken2: '#1976D2',
  darken3: '#1565C0',
  darken4: '#0D47A1',
  accent1: '#82B1FF',
  accent2: '#448AFF',
  accent3: '#2979FF',
  accent4: '#2962FF'
}

Настройка темы

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: '#FFC107'
        }
      },
      dark: {
        colors: {
          primary: '#2196F3',
          secondary: '#FFCDD2',
          accent: '#FF4081',
          error: '#F44336',
          info: '#00BCD4',
          success: '#8BC34A',
          warning: '#FFEB3B'
        }
      }
    }
  }
})

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

Цвета применяются через классы и свойство color компонентов Vuetify.

  • Свойство color: назначает основной цвет компонента.
<v-btn color="primary">Primary Button</v-btn>
<v-alert type="success" color="success">Operation Successful</v-alert>
  • CSS-классы: для более точной настройки оттенков.
<v-card class="primary lighten-3">Lightened Card</v-card>
<v-btn class="accent-2">Accent Button</v-btn>

Работа с оттенками и контрастом

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

<v-btn color="primary darken-3">Dark Primary Button</v-btn>

Для кастомных цветов можно управлять контрастом вручную через классы text--primary, text--secondary и другие.

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

Vuetify поддерживает семантические цвета для различных состояний:

  • success – успешное действие.
  • error – ошибка или предупреждение.
  • warning – предупреждение пользователя.
  • info – информационные сообщения.

Применение через компонент:

<v-alert type="warning">Warning Message</v-alert>
<v-progress-linear color="success" value="70"></v-progress-linear>

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

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

<template>
  <v-btn :color="currentColor">Dynamic Color</v-btn>
</template>

<script>
export default {
  data() {
    return {
      currentColor: 'primary'
    }
  },
  mounted() {
    setTimeout(() => this.currentColor = 'error', 2000)
  }
}
</script>

Создание пользовательских палитр

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

const customTheme = {
  themes: {
    light: {
      colors: {
        ocean: {
          lighten5: '#E0F7FA',
          lighten3: '#4DD0E1',
          base: '#00ACC1',
          darken2: '#00838F',
          accent1: '#00E5FF'
        }
      }
    }
  }
}

Применение нового цвета:

<v-btn color="ocean base">Ocean Button</v-btn>
<v-card class="ocean lighten3">Ocean Card</v-card>

Советы по гармонии цветов

  • Использовать основные палитры для ключевых элементов (кнопки, заголовки, навигация).
  • Акцентные цвета применять для элементов, требующих внимания.
  • Проверять контрастность для читаемости на разных устройствах и темах.
  • Поддерживать единообразие оттенков между светлой и тёмной темами.

Интеграция с SCSS и CSS-переменными

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

:root {
  --v-primary-base: #1976D2;
  --v-secondary-base: #424242;
}

<v-btn style="color: var(--v-primary-base)">Button</v-btn>

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

Итог

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

Оглавление