Color Utils     

Quasar provides a set of useful functions to manipulate colors easily in most use cases, without the high additional cost of integrating dedicated libraries.

Helping Tree-Shake

You will notice all examples import colors Object from Quasar. However, if you need only one method from it, then you can use ES6 destructuring to help Tree Shaking embed only that method and not all of colors.

Example with setBrand():

// we import all of `colors`
import { colors } from 'quasar'
// destructuring to keep only what is needed
const { setBrand } = colors

setBrand('primary', '#f33')

Color Conversion

These functions take a color as string or Object and convert it to another format.

Color Processing

These functions perform changes on the color or extract specific information.

lighten (color, percent)

Lighten the color (if percent is positive) or darken it (if percent is negative).

Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 100 or -100 to 0) of lighten/darken to be applied to the color.
Returns a HEX String representation of the calculated color.

luminosity (color)

Calculates the relative luminance of the color.

Accepts a HEX/A String, a RGB/A String or a RGB/A Object as color.
Returns a value between 0 and 1.

Dynamic Change of Brand Colors (Dynamic Theme Colors)

WARNING
This is only supported on browsers that support CSS Variables (Custom Properties).
It is not going to work on IE11, but it will fall back to the brand colors from the CSS theme.

This feature requires Quasar v0.15.7+

You can dynamically customize the brand colors during run-time: primary, secondary, tertiary, positive, negative, info, warning, light, dark, faded. That means you can have one build of your application with a default color theme but show it with a runtime selected one.

The main color configuration is done using CSS custom properties, stored on the root element (:root). Each property has a name of --q-color-${name} (example: --q-color-primary, --q-color-secondary) and should have a valid CSS color as value.

The CSS Custom properties use the same inheritance rules as normal CSS, so you can only redefine your desired colors and the rest will be inherited from the parent elements.

The recommended workflow is to set your customized color properties on the html (document.documentElement) or body (document.body) elements. This will allow you to revert to the default color by just deleting your custom one.

More info on CSS custom properties (variables): https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Helper - setBrand

Quasar offers a helper function for setting custom colors in the colors utils: setBrand(colorName, colorValue[, element])

Example of setting brand colors using the helper:

import { colors } from 'quasar'

colors.setBrand('light', '#DDD')
colors.setBrand('primary', '#33F')
colors.setBrand('primary', '#F33', document.getElementById('rebranded-section-id'))

The helper function will also take care of setting dependent custom properties for some colors (positive, negative, light), so this is the recommended way of usage instead of the raw Javascript setProperty().

Helper - getBrand

Quasar offers a helper function for getting custom colors in the colors utils: getBrand(colorName[, element])

Example of getting brand colors using the helper:

import { colors } from 'quasar'

colors.getBrand('primary') // '#33F'
colors.getBrand('primary', document.getElementById('rebranded-section-id'))

What this helper does is wrap the raw Javascript getPropertyValue() and it’s available for convenience. Example of equivalent raw Javascript:

// equivalent of colors.getBrand('primary') in raw Javascript:

getComputedStyle(document.documentElement)
  .getPropertyValue('--q-color-primary') // #0273d4

Create Dynamic Custom Colors

You can use setBrand and getBrand to define custom brand colors to use in your application.
An example of such a new custom color usage:

$primary-darkened = darken($primary, 10%)

:root
  --q-color-primary-darkened $primary-darkened

.text-primary-darkened
  color $primary-darkened !important
  color var(--q-color-primary-darkened) !important
.bg-primary-darkened
  background $primary-darkened !important
  background var(--q-color-primary-darkened) !important

import { colors } from 'quasar'

const { lighten, setBrand } = colors

const newPrimaryColor = '#933'
setBrand('primary', newPrimaryColor)
setBrand('primary-darkened', lighten(newPrimaryColor, -10))