Brand colors и их настройка

В библиотеке Quasar для Vue.js brand colors представляют собой основную палитру приложения, определяющую базовые цветовые акценты интерфейса. Эти цвета используются компонентами по умолчанию и влияют на визуальное оформление кнопок, ссылок, индикаторов, прогресс-баров и других элементов.

Brand colors включают в себя такие ключевые переменные, как:

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

Подключение и переопределение цветовой палитры

Для настройки brand colors необходимо работать с файлом конфигурации Quasar — quasar.config.js. Основной раздел для определения цветов находится в объекте framework.config.brand.

Пример базовой настройки:

framework: {
  config: {
    brand: {
      primary: '#1976D2',      // синий
      secondary: '#26A69A',    // бирюзовый
      accent: '#9C27B0',       // фиолетовый
      dark: '#1D1D1D',         // темный фон
      positive: '#21BA45',     // зеленый
      negative: '#C10015',     // красный
      info: '#31CCEC',         // голубой
      warning: '#F2C037'       // желтый
    }
  }
}

После такой настройки все компоненты Quasar, использующие эти цвета через классы bg-primary, text-secondary, border-accent и аналогичные, будут автоматически применять указанные оттенки.

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

Quasar поддерживает интеграцию brand colors как через классы, так и через пропсы компонентов.

Через классы:

<q-btn class="bg-primary text-white" label="Primary Button" />
<q-badge color="secondary" label="New" />
<q-card class="bg-accent text-white">Контент карточки</q-card>

Через пропсы компонентов:

<q-btn color="primary" label="Primary Button" />
<q-badge color="secondary" label="New" />
<q-progress-bar color="accent" value="50" />

Использование пропсов более гибкое, так как позволяет легко менять цвет динамически в зависимости от состояния приложения.

Темизация с помощью Brand Colors

Quasar поддерживает темную и светлую тему, при этом brand colors могут автоматически адаптироваться. Для активации темной темы:

framework: {
  config: {
    dark: true
  }
}

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

framework: {
  config: {
    brand: (isDark) => ({
      primary: isDark ? '#90CAF9' : '#1976D2',
      secondary: isDark ? '#80CBC4' : '#26A69A',
      accent: isDark ? '#CE93D8' : '#9C27B0'
    })
  }
}

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

Дополнительные возможности кастомизации

  1. CSS переменные: Quasar автоматически генерирует CSS-переменные для brand colors, доступные в стилях:
.my-button {
  background-color: var(--q-primary);
  color: var(--q-white);
}
  1. Градиенты и прозрачность: Через CSS можно использовать brand colors с прозрачностью или в градиенте:
background: linear-gradient(to right, var(--q-primary), var(--q-accent));
opacity: 0.8;
  1. Динамическая смена цветов: В Vue можно менять brand colors на лету, обновляя объект this.$q.colors.setBrand:
this.$q.colors.setBrand('primary', '#FF5722'); // оранжевый
  1. Компоненты с состояниями: Цвета positive, negative, warning, info помогают создавать элементы с визуальным отображением статусов. Например, индикаторы успеха или ошибки автоматически используют правильный цвет.

Рекомендации по работе с Brand Colors

  • Всегда задавать базовые цвета через quasar.config.js для единообразного внешнего вида приложения.
  • Использовать CSS-переменные для кастомных компонентов, чтобы сохранять связь с основной палитрой.
  • Поддерживать темную и светлую тему с отдельными оттенками brand colors для улучшенной UX.
  • Для динамических изменений цветов применять this.$q.colors.setBrand, что позволяет менять акценты без перезагрузки страницы.

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

Оглавление