Quasar 框架提供了丰富的开箱即用颜色选择。你可以在 CSS 代码中将它们用作 Sass/SCSS 变量，也可以直接将它们用作 HTML 模板中的 CSS 类。

¥Quasar Framework offers a wide selection of colors out of the box. You can use them both as Sass/SCSS variables in your CSS code or directly as CSS classes in your HTML templates.

// quasar.config file

return {
  framework: {
    config: {
      brand: /* look at QuasarConfOptions from the API card */
    }
  }
}

品牌颜色(Brand Colors)

¥Brand Colors

Quasar 组件使用的大多数颜色都与这八种你可以更改的颜色紧密相关。选择这些颜色是区分应用设计时应该采取的第一步。你会立即注意到，在更改默认值后，Quasar 组件会遵循这些颜色作为指导。

¥Most of the colors that Quasar Components use are strongly linked with these eight colors that you can change. Choosing these colors is the first step one should take when differentiating the design of an App. You’ll notice immediately upon changing their default values that Quasar Components follow these colors as a guideline.

颜色列表(Color List)

¥Color List

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

¥Here’s the list of colors provided out of the box. Within your app’s *.vue files you can use them as CSS classes (in HTML templates) or as Sass/SCSS variables in <style lang="..."> tags.

使用 CSS 类(Using as CSS Classes)

¥Using as CSS Classes

使用 text- 或 bg- 前缀作为类名，可更改文本颜色或背景颜色。

¥Use text- or bg- prefixes as class names to change the color of text or the color of the background.

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

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

使用 Sass/SCSS 变量(Using Sass/SCSS Variables)

¥Using Sass/SCSS Variables

在你应用的 *.vue 文件中，你可以将颜色用作 $primary、$red-1 等。

¥In your app’s *.vue files you can use the colors as $primary, $red-1, and so on.

<!-- Notice lang="sass" -->
<style lang="sass">
div
  color: $red-1
  background-color: $grey-5
</style>

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

添加自定义颜色(Adding Your Own Colors)

¥Adding Your Own Colors

如果你想为组件使用自己的颜色（假设我们添加了一个名为 “brand” 的颜色），你只需将以下 CSS 添加到你的应用中：

¥If you want to use your own colors for your components (let’s say we are adding a color named “brand”) all you need to do is add the following CSS into your app:

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

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

¥Now we can use this color for Quasar components:

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

你可以使用 getPaletteColor 工具在 JS 上下文中访问自定义颜色值（十六进制字符串）。

¥You can access a custom color value (hex string) in JS context with the getPaletteColor util.

动态更改品牌颜色（动态主题颜色）(Dynamic Change of Brand Colors (Dynamic Theme Colors))

¥Dynamic Change of Brand Colors (Dynamic Theme Colors)

工作原理(How it works)

¥How it works

你可以在运行时动态自定义品牌颜色：primary, secondary, accent, dark, positive, negative, info, warning.这意味着你可以使用默认颜色主题构建一个应用，但使用运行时选择的主题进行显示。

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

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

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

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

¥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.

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

¥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.

更多关于 MDN 中 CSS 自定义属性（变量）的信息。

¥More info on CSS custom properties (variables) on MDN.

实用程序：setCssVar(Util: setCssVar)

¥Util: setCssVar

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

¥Quasar offers a helper function for setting Quasar CSS variables that can be used for the brand colors too: setCssVar(colorName, colorValue[, element])

使用助手设置品牌颜色的示例：

¥Example of setting brand colors using the helper:

import { setCssVar } from 'quasar'

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

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

¥Example of setting brand colors using vanilla JavaScript:

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

实用程序：getCssVar(Util: getCssVar)

¥Util: getCssVar

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

¥Quasar offers a helper function for getting the value of Quasar CSS variables that can be used for brand colors too: getCssVar(colorName[, element])

使用助手获取品牌颜色的示例：

¥Example of getting brand colors using the helper:

import { getCssVar } from 'quasar'

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

这个助手的作用是封装原始的 JavaScript getPropertyValue()，以便于使用。以下是等效原生 JavaScript 的示例：

¥What this helper does is wrap the raw JavaScript getPropertyValue() and it’s available for convenience. Here is an example of equivalent vanilla JavaScript:

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

更多颜色工具(More color utils)

¥More color utils

除了上述实用程序之外，我们在文档中还有一个专门的部分，用于处理你可能感兴趣的颜色：颜色工具。

¥Besides the utils above, we also have a dedicated section in docs for handling colors that you might be interested in: Color utils.

import { colors, setCssVar } from 'quasar'

const { lighten } = colors

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

设置默认值(Setting Up Defaults)

¥Setting Up Defaults

你可以设置一些品牌颜色，而无需篡改 Sass/SCSS 变量。

¥You can set up some brand colors without tampering with the Sass/SCSS variables.

请参阅上面的 配置 部分，了解如何在 Quasar CLI、Quasar Vite 插件和 UMD 项目的初始配置期间进行设置。

¥See the Configuration section above for setting it during initial configuration for Quasar CLI, Quasar Vite plugin, and UMD projects.

如果你使用的是 Quasar CLI，你也可以使用 @quasar/app-vite Boot File 或 @quasar/app-webpack Boot File。如果你想在初始加载时动态更改颜色，例如在从 API 获取颜色之后，这尤其有用。

¥If you are using Quasar CLI, you can also use a @quasar/app-vite Boot File or a @quasar/app-webpack Boot File. This is especially useful if you want to change the colors dynamically at initial load time, perhaps after fetching them from an API.

import { setCssVar } from 'quasar'
import { defineBoot } from '#q-app/wrappers'

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

如果使用 SSR 模式，请在服务器端运行时禁用此启动文件：

¥If using SSR mode, disable this boot file when running on server-side:

boot: [
  { server: false, path: 'brand-colors' }, // or the name you gave it
  // ...
],