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

// quasar.config file

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

品牌颜色

Quasar 组件使用的大多数颜色都与这八种颜色密切相关，您可以更改它们。选择这些颜色是区分应用程序设计的第一步。您会立即注意到，在更改其默认值后，Quasar 组件会将这些颜色作为指导原则。

颜色列表

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

用作 CSS 类

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

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

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

使用 Sass/SCSS 变量

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

<!-- 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>

添加您自己的颜色

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

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

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

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

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

品牌颜色的动态更改（动态主题颜色）

工作原理

您可以在运行时动态自定义品牌颜色：primary、secondary、accent、dark、positive、negative、info、warning。这意味着您可以构建一个具有默认颜色主题的应用程序，但以运行时选择的主题显示它。

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

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

建议的工作流程是在 html (document.documentElement) 或 body (document.body) 元素上设置自定义颜色属性。这将允许您仅通过删除自定义颜色即可恢复为默认颜色。

有关 CSS 自定义属性（变量）的更多信息，请访问 MDN。

工具：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'))

使用原生 JavaScript 设置品牌颜色的示例

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

工具：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/SCSS 变量。

请参阅上面关于在 Quasar CLI、Vite 插件/Vue CLI 和 UMD 项目的初始配置期间设置它的 配置 部分。

如果您使用的是 Quasar CLI，您还可以使用 @quasar/app-vite 启动文件 或 @quasar/app-webpack 启动文件。如果您想在初始加载时动态更改颜色，例如在从 API 获取颜色后，这将特别有用。

import { setCssVar } from 'quasar'
import { boot } from 'quasar/wrappers'

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

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

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