Создание собственных цветовых схем

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

В Quasar каждая цветовая схема определяется через объект colors и может быть подключена глобально или локально для конкретных компонентов. Основные точки управления цветами:

  • Primary – основной цвет приложения, используемый для кнопок, акцентных элементов и активных состояний.
  • Secondary – вторичный цвет, часто применяемый для менее значимых элементов интерфейса.
  • Accent – дополнительный цвет для акцентирования деталей.
  • Positive, Negative, Info, Warning – семантические цвета для отображения состояния, сообщений и уведомлений.

Настройка цветовой схемы через конфигурацию Quasar

Цветовые схемы задаются в файле quasar.config.js в разделе framework.config. Пример глобальной настройки темы:

framework: {
  config: {
    brand: {
      primary: '#1976D2',
      secondary: '#26A69A',
      accent: '#9C27B0',
      positive: '#4CAF50',
      negative: '#F44336',
      info: '#2196F3',
      warning: '#FB8C00'
    }
  }
}

В этом объекте brand задаются все ключевые цвета приложения. После конфигурации Quasar автоматически подставляет эти значения во все компоненты, поддерживающие темизацию.

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

Quasar поддерживает динамическое обновление цветовой схемы без перезагрузки страницы. Для этого используется метод setBrand из $q объекта:

this.$q.colors.setBrand({
  primary: '#FF5722',
  secondary: '#00BCD4'
});

После вызова setBrand все компоненты, использующие цвета primary и secondary, мгновенно изменят свой внешний вид.

Для удобства можно хранить несколько схем в объекте и переключать их по событию, например, при смене темы с светлой на тёмную:

const themes = {
  light: {
    primary: '#1976D2',
    secondary: '#26A69A'
  },
  dark: {
    primary: '#BB86FC',
    secondary: '#03DAC6'
  }
};

changeTheme(theme) {
  this.$q.colors.setBrand(themes[theme]);
}

Локальные цветовые схемы для компонентов

Некоторые компоненты Quasar позволяют переопределять цвета локально через свойства:

<q-btn color="primary" text-color="white" label="Нажми меня" />
<q-card class="my-card" :style="{ backgroundColor: $q.colors.getBrand('secondary') }">
  <q-card-section>Контент карточки</q-card-section>
</q-card>

Метод $q.colors.getBrand('colorName') возвращает текущее значение цвета, что позволяет применять динамическое оформление даже в inline-стилях.

Создание полностью кастомной цветовой схемы

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

framework: {
  config: {
    brand: {
      primary: '#1E1E2F',
      secondary: '#3F3F5E',
      accent: '#FF4081',
      highlight: '#FFC107',
      background: '#121212'
    }
  }
}

После этого пользовательские цвета можно использовать в компонентах через getBrand, добавляя новые свойства в объект brand:

<div :style="{ backgroundColor: $q.colors.getBrand('background'), color: $q.colors.getBrand('highlight') }">
  Пользовательский блок
</div>

Работа с CSS-переменными

Quasar автоматически создает CSS-переменные для всех цветов из объекта brand. Их можно использовать в стилях компонентов:

.my-button {
  background-color: var(--q-color-primary);
  color: var(--q-color-accent);
}

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

Поддержка светлой и тёмной темы

Quasar имеет встроенную поддержку светлой и тёмной темы через объект dark:

framework: {
  config: {
    dark: 'auto'
  }
}
  • 'auto' – система автоматически выбирает тему в зависимости от предпочтений пользователя.
  • true / false – принудительное включение светлой или тёмной темы.

Цвета можно настроить отдельно для тёмной темы, используя brand.dark:

brand: {
  primary: '#1976D2',
  dark: {
    primary: '#BB86FC',
    secondary: '#03DAC6'
  }
}

Метод setBrand также поддерживает переключение на тёмные цвета при активации темы:

this.$q.dark.set(true); // Включение тёмной темы
this.$q.colors.setBrand(this.$q.colors.getBrand('dark'));

Итоговые возможности

  • Полная централизация управления цветами через объект brand.
  • Динамическое обновление цветовой схемы без перезагрузки страницы.
  • Локальная настройка цветов на уровне компонентов.
  • Создание полностью кастомных цветовых наборов с поддержкой семантических и пользовательских цветов.
  • Интеграция с CSS-переменными для расширяемости и совместимости.
  • Поддержка светлой и тёмной темы с возможностью автоматического переключения.

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

Оглавление