Quasar
颜色实用程序
Quasar提供了一组有用的功能，可以在大多数使用情况下轻松操作颜色，而没有集成专用库的较高额外成本。
帮助Tree-Shake
你会注意到所有的例子都从Quasar导入colors对象。 但是，如果您只需要一种方法，那么您可以使用ES6解构来帮助Tree Shaking嵌入该方法而不是所有的colors。
setBrand（）示例：// 我们导入所有的`colors`
import { colors } from 'quasar'
// 解构只保留需要的东西
const { setBrand } = colors
setBrand('primary', '#f33')
颜色转换
这些函数将颜色作为字符串或对象并将其转换为另一种格式。
| 函数 | 源格式 | 目的地格式 | 说明 |
|---|---|---|---|
rgbToHex |
对象 | 字符串 | 将RGB/A颜色对象（{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}）转换为HEX/A作为字符串的表示（#RRGGBB<AA>）。如果Alpha通道出现在原始对象中，它也将出现在输出中。 |
rgbToHsv |
对象 | 对象 | 将RGB/A颜色对象（{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}）转换为HSV/A作为对象的表示（{ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]}）。如果Alpha通道出现在原始对象中，它也将出现在输出中。 |
hexToRgb |
字符串 | 对象 | 将HEX/A颜色字符串（#RRGGBB <AA>）转换为其RGB/A表示形式（{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}）。如果Alpha通道出现在原始对象中，它也将出现在输出中。 |
textToRgb |
字符串 | 对象 | 将HEX/A颜色字符串（#RRGGBB <AA>）或RGB/A颜色字符串（rgb（R，G，B <，A>））转换为它的RGB/A表示形式（{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}）。如果Alpha通道出现在原始对象中，它也将出现在输出中。 |
hsvToRgb |
字符串 | 对象 | 将HSV/A颜色对象（{ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]}）转换为RGB/A表示作为对象的表示（{r：[0-255]，g：[0-255]，b：[0-255} <，a：[0-100]>}）。如果Alpha通道出现在原始对象中，它也将出现在输出中。 |
颜色处理
这些功能对颜色进行更改或提取特定信息。
lighten (color, percent)
使color变亮（如果percent为正值）或使其变暗（如果percent为负值）。
一个HEX/A字符串或RGB/A字符串表示的color参数和一个应用于color的变亮/变暗的percent（0至100或-100至0）参数。
返回经计算过的color的HEX字符串表示形式。
luminosity (color)
计算color的相对亮度。
一个HEX/A字符串、RGB/A字符串或RGB/A对象表示的“color”参数。
返回0到1之间的值。
品牌(Brand)颜色的动态变化（动态主题颜色）
警告
这仅在支持CSS变量的浏览器（自定义属性）上受支持。
它不会在IE11上工作，但它会恢复到CSS主题中的品牌颜色。此功能需要Quasar v0.15.7 +
您可以在运行时动态定制品牌颜色： primary, secondary, tertiary, positive, negative, info, warning, light, dark, faded。这意味着您可以使用默认颜色主题构建应用程序的一个构建版本，但显示时使用运行时所选的一个。
主要颜色配置使用存储在根元素（:root）中的CSS自定义属性完成。每个属性的名称都是--q-color-${name}（例如：--q-color-primary，--q-color-secondary），并且应该具有有效的CSS颜色作为值。
CSS自定义属性使用与普通CSS相同的继承规则，因此只能重新定义所需的颜色，其余的将从父元素继承。
推荐的工作流程是在html（document.documentElement）或body（document.body）元素上设置自定义的颜色属性。这将允许您通过删除自定义颜色来恢复为默认颜色。
有关CSS自定义属性（变量）的更多信息：http://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
辅助方法 - setBrand
在colors实用程序中，Quasar提供了一个辅助方法用于设置自定义颜色：setBrand(colorName,colorValue[,element])
| 参数 | 类型 | 必需 | 说明 |
|---|---|---|---|
colorName |
字符串 | 是 | primary, secondary, tertiary, positive, negative,info, warning, light, dark, faded之一 |
colorValue |
字符串 | 是 | 有效的CSS颜色值 |
element |
元素 | - | （默认：document.body）设置自定义属性的元素。 |
使用辅助方法设置品牌颜色的示例：import { colors } from 'quasar'
colors.setBrand('light', '#DDD')
colors.setBrand('primary', '#33F')
colors.setBrand('primary', '#F33', document.getElementById('rebranded-section-id'))
辅助方法还将负责为某些颜色（positive，negative，light）设置相关的自定义属性，所以这是推荐的使用方式，而不是原始的JavascriptsetProperty（）。
辅助方法 - getBrand
在colors实用程序中，Quasar提供了一个辅助方法，用于获取自定义颜色：getBrand(colorName [,element])
| 参数 | 类型 | 必需 | 说明 |
|---|---|---|---|
colorName |
字符串 | 是 | primary, secondary, tertiary, positive, negative, info, warning, light, dark, faded 之一 |
element |
元素 | - | （默认值：document.body）将读取自定义属性的元素。 |
使用辅助方法获取自定义颜色的示例：import { colors } from 'quasar'
colors.getBrand('primary') // '#33F'
colors.getBrand('primary', document.getElementById('rebranded-section-id'))
这个辅助方法所做的就是包装原始Javascript的getPropertyValue()方法以方便使用。 等同于原始Javascript的示例：// 等同于原始Javascript中的colors.getBrand（'primary'）：
getComputedStyle(document.documentElement)
.getPropertyValue('--q-color-primary') // #0273d4
创建动态自定义颜色
您可以使用setBrand和getBrand来定义要在您的应用程序中使用的自定义品牌颜色。
这种新的自定义颜色用法的一个示例：
$primary-darkened = darken($primary, 10%) |
import { colors } from 'quasar' |