调色板(Color Palette)

Quasar Framework开箱即可提供多种颜色选择。 您可以在CSS代码中将它们用作Stylus变量,或者直接在HTML模板中将它们用作CSS类。

阅读Quasar主题后,这个页面非常有用。你可能还想查看颜色实用程序.

品牌(Brand)颜色

在您的应用程序中可以使用三种主要颜色,称为 primary, secondary and tertiary

Quasar组件使用的大多数颜色都与这三种颜色紧密相连,您可以更改这些颜色。 选择这些颜色是区分自己的应用程序设计时应采取的第一步。 当更改的默认值时,您会立即注意到Quasar组件遵循这些颜色作为指导。

颜色列表

以下是开箱即用的颜色列表。 在应用程序的* .vue文件中将它们用作CSS类(在HTML模板中)或作为Stylus变量(在<style lang =“stylus”>标签中)。

primary, secondary, tertiary
positive, negative, info, warning, white, light, dark, faded

在以下颜色中有可用的变化形式:
red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey

颜色变化示例:red, red-1, red-2, …, red-14. 查看demo可以很好地了解这些变化。 变化11至14是颜色的强调。

使用CSS类

使用text-bg-前缀作为类名来改变文本的颜色或背景的颜色。

<!-- changing text color -->
<p class="text-primary">....</p>

<!-- changing background color -->
<p class="bg-positive">...</p>

使用Stylus变量

在应用程序的*.vue文件中,可以使用$primary$red-1等颜色。

<!-- Notice lang="stylus" -->
<style lang="stylus">
// "variables"是一个Webpack别名 (在/config/index.js中定义)
@import '~variables'

div
color $red-1
background-color $grey-5
</style>

添加你自己的颜色

如果您想使用自己的颜色作为组件,假设我们添加了一个名为“brand”的颜色,则只需将以下CSS添加到您的应用中即可:

.text-brand {
color: #a2aa33;
}
.bg-brand {
background: #a2aa33;
}

现在我们可以将这种颜色用于Quasar组件:

<q-input color="brand" ... />

品牌(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相同的继承规则,因此只能重新定义所需的颜色,其余的将从父元素继承。

推荐的工作流程是在htmldocument.documentElement)或bodydocument.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'))

辅助方法还将负责为某些颜色(positivenegativelight)设置相关的自定义属性,所以这是推荐的使用方式,而不是原始的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