colors утилиты для работы с цветом

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

Использование стандартной палитры

Quasar предлагает базовую палитру цветов, включающую такие группы, как primary, secondary, accent, positive, negative, info и warning. Каждый цвет имеет несколько оттенков, например:

this.$q.colors.getBrand('primary') // возвращает основной цвет primary
this.$q.colors.getBrand('secondary', 'darken-2') // возвращает затемненный оттенок secondary
  • getBrand(name: string, shade?: string) — основной метод для получения цветов бренда.
  • Параметр shade может принимать значения: 'lighten-1', 'lighten-2', 'darken-1', 'darken-2' и т.д.

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

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

Quasar автоматически создает CSS-переменные для всех брендов и их оттенков:

background-color: var(--q-color-primary);
color: var(--q-color-secondary);

Также поддерживаются специальные переменные для состояния компонентов:

  • --q-color-positive
  • --q-color-negative
  • --q-color-info
  • --q-color-warning

Использование переменных обеспечивает единообразие и упрощает поддержку темной и светлой темы.

Модификация цветов через утилиты

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

  1. Изменение яркости
this.$q.colors.brightness('primary', 30) // увеличивает яркость primary на 30%
  1. Изменение прозрачности (альфа-канала)
this.$q.colors.fade('primary', 0.5) // делает цвет primary прозрачным на 50%
  1. Композитные функции для светлых/темных оттенков
this.$q.colors.darken('secondary', 2) // затемняет secondary на 2 шага
this.$q.colors.lighten('accent', 1) // осветляет accent на 1 шаг

Эти функции возвращают строку в формате rgba или hex, что позволяет использовать их в стиле компонентов напрямую.

Конвертация и проверка цветов

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

  • Конвертация HEX → RGB / RGBA / HSL
this.$q.colors.hexToRgb('#ff0000') // { r: 255, g: 0, b: 0 }
this.$q.colors.hexToHsl('#ff0000') // { h: 0, s: 100, l: 50 }
  • Конвертация RGB → HEX / HSL
this.$q.colors.rgbToHex(255, 0, 0) // '#ff0000'
this.$q.colors.rgbToHsl(255, 0, 0) // { h: 0, s: 100, l: 50 }
  • Проверка корректности цвета
this.$q.colors.isColor('#ff0000') // true
this.$q.colors.isColor('invalid') // false

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

Quasar позволяет применять цвета динамически через объекты JS, что особенно удобно для темизации или кастомных компонентов:

<template>
  <div :style="{ backgroundColor: dynamicColor }">Цветной блок</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicColor: this.$q.colors.getBrand('primary')
    }
  }
}
</script>

Для реактивного изменения цветов можно комбинировать с computed свойствами:

computed: {
  accentColor() {
    return this.$q.colors.lighten('accent', 2)
  }
}

Интеграция с темами Quasar

Quasar поддерживает темную и светлую тему, и утилиты цветов интегрируются с этим механизмом. При смене темы динамически изменяются значения переменных:

this.$q.dark.set(true) // переключение на темную тему
console.log(this.$q.colors.getBrand('primary')) // автоматически подстроенный оттенок для темной темы

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

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

  • Для единообразия интерфейса рекомендуется использовать только брендовые цвета и их оттенки, избегая ручного подбора HEX.
  • Прозрачность и светлые/темные оттенки удобно применять для состояний компонентов (hover, active, disabled).
  • Утилиты цветов Quasar позволяют динамически адаптировать интерфейс под разные темы без дублирования стилей.

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

Оглавление