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

品牌(Brand)颜色

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

颜色列表

以下是开箱即用的颜色列表。 在你的应用程序的*.vue文件中，你可以将它们作为CSS类（在HTML模板中）或作为Sass/SCSS变量在<style lang="...">标签中使用。

使用CSS类

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

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

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

使用Sass/SCSS变量

在应用程序的*.vue文件中，可以使用$primary，$red-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>

添加自己的颜色

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

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

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

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

您可以使用getPaletteColor实用程序在JS上下文中访问得到自定义颜色值（十六进制字符串）。

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

它是如何工作的

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

主要颜色配置使用存储在根元素（:root）中的CSS自定义属性完成。每个属性的名称都是--q-color-${name}（例如：--q-color-primary，--q-color-secondary），并且应该具有有效的CSS颜色作为值。

CSS自定义属性使用与普通CSS相同的继承规则，因此只能重新定义所需的颜色，其余的将从父元素继承。

推荐的工作流程是在html（document.documentElement）或body（document.body）元素上设置自定义的颜色属性。这将允许您通过删除自定义颜色来恢复为默认颜色。

在MDN上获取有关CSS自定义属性（变量）的更多信息。

Util: setCssVar

Quasar提供了一个用于设置Quasar CSS变量的辅助函数，也可用于品牌颜色：setCssVar(colorName, colorValue[, element])。

使用辅助方法设置品牌颜色的示例：

import { setCssVar } from 'quasar'

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

使用vanilla JavaScript设置品牌颜色的例子：

// equivalent of setCssVar('primary') in raw JavaScript:
document.body.style.setProperty('--q-primary', '#0273d4')

Util: getCssVar

Quasar提供了一个获取Quasar CSS变量值的辅助函数，也可用于品牌颜色：getCssVar(colorName[, element])。

使用辅助方法获取自定义颜色的示例：

import { getCssVar } from 'quasar'

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

这个辅助方法所做的就是包装原始JavaScript的getPropertyValue()方法以方便使用。 这是一个等效的原始JavaScript示例：

// equivalent of getCssVar('primary') in raw JavaScript:
getComputedStyle(document.documentElement)
  .getPropertyValue('--q-primary') // #0273d4

更多颜色实用程序

除了上面的实用程序，我们在文档中还有一个专门的章节用于处理颜色，你可能会感兴趣。颜色实用程序。

import { colors, setCssVar } from 'quasar'

const { lighten } = colors

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

设置默认值

这是如何设置一些品牌颜色而不篡改Sass变量的方法：

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

或者用@quasar/app-vite Boot File或@quasar/app-webpack Boot File：

// For Quasar CLI
// Do NOT run this boot file for SSR mode

import { setCssVar } from 'quasar'

export default () => {
  setCssVar('primary', '#ff0000')
}

如果您使用的是Quasar UMD版本或Quasar Vite插件或Vue CLI:

// UMD or Quasar Vite plugin or Vue CLI
app.use(Quasar, {
  config: {
    brand: {
      primary: '#ff0000',
      // ...
    }
  }
})