调色板(Color Palette)

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

品牌(Brand)颜色

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

primary
secondary
accent
dark
positive
negative
info
warning

提示

  • 还要查阅主题生成器 ,以获取有关自定义您的网站/应用品牌颜色的工具。
  • 在Quasar v1.3.0中添加了dark

颜色列表

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

red
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
red-11
red-12
red-13
red-14
pink
pink-1
pink-2
pink-3
pink-4
pink-5
pink-6
pink-7
pink-8
pink-9
pink-10
pink-11
pink-12
pink-13
pink-14
purple
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
purple-11
purple-12
purple-13
purple-14
deep-purple
deep-purple-1
deep-purple-2
deep-purple-3
deep-purple-4
deep-purple-5
deep-purple-6
deep-purple-7
deep-purple-8
deep-purple-9
deep-purple-10
deep-purple-11
deep-purple-12
deep-purple-13
deep-purple-14
indigo
indigo-1
indigo-2
indigo-3
indigo-4
indigo-5
indigo-6
indigo-7
indigo-8
indigo-9
indigo-10
indigo-11
indigo-12
indigo-13
indigo-14
blue
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
blue-11
blue-12
blue-13
blue-14
light-blue
light-blue-1
light-blue-2
light-blue-3
light-blue-4
light-blue-5
light-blue-6
light-blue-7
light-blue-8
light-blue-9
light-blue-10
light-blue-11
light-blue-12
light-blue-13
light-blue-14
cyan
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
cyan-11
cyan-12
cyan-13
cyan-14
teal
teal-1
teal-2
teal-3
teal-4
teal-5
teal-6
teal-7
teal-8
teal-9
teal-10
teal-11
teal-12
teal-13
teal-14
green
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
green-11
green-12
green-13
green-14
light-green
light-green-1
light-green-2
light-green-3
light-green-4
light-green-5
light-green-6
light-green-7
light-green-8
light-green-9
light-green-10
light-green-11
light-green-12
light-green-13
light-green-14
lime
lime-1
lime-2
lime-3
lime-4
lime-5
lime-6
lime-7
lime-8
lime-9
lime-10
lime-11
lime-12
lime-13
lime-14
yellow
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
yellow-11
yellow-12
yellow-13
yellow-14
amber
amber-1
amber-2
amber-3
amber-4
amber-5
amber-6
amber-7
amber-8
amber-9
amber-10
amber-11
amber-12
amber-13
amber-14
orange
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
orange-10
orange-11
orange-12
orange-13
orange-14
deep-orange
deep-orange-1
deep-orange-2
deep-orange-3
deep-orange-4
deep-orange-5
deep-orange-6
deep-orange-7
deep-orange-8
deep-orange-9
deep-orange-10
deep-orange-11
deep-orange-12
deep-orange-13
deep-orange-14
brown
brown-1
brown-2
brown-3
brown-4
brown-5
brown-6
brown-7
brown-8
brown-9
brown-10
brown-11
brown-12
brown-13
brown-14
grey
grey-1
grey-2
grey-3
grey-4
grey-5
grey-6
grey-7
grey-8
grey-9
grey-10
grey-11
grey-12
grey-13
grey-14
blue-grey
blue-grey-1
blue-grey-2
blue-grey-3
blue-grey-4
blue-grey-5
blue-grey-6
blue-grey-7
blue-grey-8
blue-grey-9
blue-grey-10
blue-grey-11
blue-grey-12
blue-grey-13
blue-grey-14

使用CSS类

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

<!-- 更改文字颜色 -->
<p class="text-primary">....</p>

<!-- 改变背景色 -->
<p class="bg-positive">...</p>

使用Sass/SCSS/Stylus变量

在应用程序的*.vue文件中,可以使用$primary$red-1等颜色。请注意,对于Sass/SCSS,您将需要“@quasar/app” v1.1.0 +和Quasar v1.1.1 +。

<!-- 注意lang="sass" -->
<style lang="sass">
div
  color: $red-1
  background-color: $grey-5
</style>
<!-- 注意lang="scss" -->
<style lang="scss">
div {
  color: $red-1;
  background-color: $grey-5;
}
</style>
<!-- 注意lang="stylus" -->
<style lang="stylus">
div
  color $red-1
  background-color $grey-5
</style>

添加自己的颜色

如果您想为自己的组件使用自己的颜色(假设我们要添加一种名为“ brand”的颜色),您要做的就是将以下CSS添加到您的应用中:

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

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

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

品牌(Brand)颜色的动态变化(动态主题颜色)

WARNING

这仅在支持CSS变量的浏览器(自定义属性)上受支持。 它不会在IE11上工作,但它会恢复到CSS主题中的品牌颜色。

您可以在运行时动态定制品牌颜色: primary, secondary, accent, dark, positive, negative, info, warning。这意味着您可以使用默认颜色主题构建应用程序的一个构建版本,但显示时使用运行时所选的一个。

主要颜色配置使用存储在根元素(: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, accent, dark, positive, negative, info, warning之一
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'))

WARNING

辅助方法还将负责为品牌颜色(positivenegativelight)设置相关的自定义属性,所以这是推荐的使用方式,而不是原始的JavascriptsetProperty()

辅助方法 - getBrand

colors实用程序中,Quasar提供了一个辅助方法,用于获取设置的自定义颜色:getBrand(colorName [,element])

参数类型必需说明
colorName字符串primary, secondary, accent, dark, positive, negative, info, warning之一
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

设置默认值

WARNING

IE11不支持

如果您希望设置一些品牌颜色而不破坏Stylus变量,则可以在quasar.conf.js中进行设置:

// quasar.conf.js
return {
  framework: {
    config: {
      brand: {
        primary: '#ff0000',
        // ...
      }
    }
  }
}

这在使用Quasar UMD版本时特别有用,在该版本中,将全局quasarConfig对象放置在Quasar脚本标记之前。

// for Quasar UMD
<script>
  // 可选
  window.quasarConfig = {
    brand: {
      primary: '#ff0000',
      // ...
    }
  }
</script>