Quasar 提供了丰富的预设颜色。您可以将它们用作 Sass/SCSS 变量，或者直接在 HTML 模板中作为 CSS 类使用。
主题颜色
Quasar 提供了一套默认的主题颜色，所有 Quasar 组件都依赖这些颜色。选择主题颜色应该在应用程序的设计阶段就确定好。
TIP
在主题构建器页面查看如何为您的网站/应用自定义主题颜色。
颜色列表
下面这些颜色都是 Quasar 预设的，可以直接使用。您可以在 .vue 文件的模板中把它们当作 CSS 类来使用，也可以在 <style lang="..."> 标签中当作 Sass/SCSS 变量 来使用。
作为 CSS 类使用
使用 text- 或 bg- 作为前缀，然后加上预设颜色的名称，就可以改变文本/背景的颜色，例如：
<!-- 改变文本颜色 -->
<p class="text-primary">...</p>
<!-- 改变背景颜色 -->
<p class="bg-positive">...</p>作为 Sass/SCSS 变量使用
您可以通过 $ 加上预设颜色的名称来作为 CSS 变量使用，例如：$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>添加自定义颜色
您可以通过以下方式添加自定义颜色，先在 CSS 中编写类似如下的代码：
.text-brand {
color: #a2aa33 !important;
}
.bg-brand {
background: #a2aa33 !important;
}然后在 Quasar 的组件中就可以这样使用刚才定义的颜色：
<q-btn color="brand" ... />您可以在 JS 中通过 getPaletteColor 工具函数获取颜色的值（16 进制字符串）。
动态切换主题颜色
工作原理
您可以在运行时修改上述主题色：primary、secondary、accent、dark、positive、negative、info、warning。也就是说，您可以为您的网站预设一个主题，然后在运行时切换不同的主题。
所有的主题颜色会作为 CSS 变量存储在页面的根节点（:root）上，每个颜色属性都被命名为 --q-${name}，例如：--q-primary、--q-secondary。这些 CSS 颜色属性跟普通的 HTML 属性一样会被子节点继承，所以您可以在运行时修改/重置它们，并且在整个应用程序中生效。
推荐您也把自定义的颜色放在 html（document.documentElement）或 body（document.body）上，这样当您修改它时，所有的子元素都会继承这些修改。
更多关于 CSS 变量的知识，请查看：MDN。
工具函数：setCssVar
Quasar 提供了一个实用的工具函数来帮助您设置 CSS 变量，也可以修改上述主题颜色。
用法：setCssVar(colorName, colorValue[, element])
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
colorName | String | 是 | CSS 颜色名称，可以是主题色：primary、secondary、accent、dark、positive、negative、info、warning |
colorValue | String | 是 | 16 进制颜色值 |
element | Element | 否 | （默认值：document.body）将 CSS 变量注入到哪个 DOM 元素上 |
示例：
import { setCssVar } from "quasar";
setCssVar("light", "#DDD");
setCssVar("primary", "#33F");
setCssVar("primary", "#F33", document.getElementById("rebranded-section-id"));// setCssVar('primary', '#0273d4') 在原生 JS 中等于：
document.body.style.setProperty("--q-primary", "#0273d4");工具函数：getCssVar
同样，Quasar 也提供了一个获取 CSS 变量的工具函数。
用法：getCssVar(colorName[, element])
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
colorName | String | 是 | CSS 颜色名称，可以是主题色：primary、secondary、accent、dark、positive、negative、info、warning |
element | Element | 否 | （默认：document.body）从哪个 DOM 元素中读取 CSS 变量 |
示例：
import { getCssVar } from "quasar";
getCssVar("primary"); // '#33F'
getCssVar("primary", document.getElementById("rebranded-section-id"));这个函数是原生 JS 中 getPropertyValue() 的包装，等同于：
// getCssVar('primary') 等于原生 JS 中的：
getComputedStyle(document.documentElement).getPropertyValue("--q-primary"); // #0273d4更多颜色工具
除了上面的工具函数，Quasar 还有更多的处理颜色的工具函数：Color utils
import { colors, setCssVar } from "quasar";
const { lighten } = colors;
const newPrimaryColor = "#933";
setCssVar("primary", newPrimaryColor);
setCssVar("primary-darkened", lighten(newPrimaryColor, -10));设置颜色默认值
如果不使用 Sass/SCSS，您需要通过 quasar.config.js 来修改默认的主题颜色：
// Quasar CLI - quasar.config.js
return {
framework: {
config: {
brand: {
primary: "#ff0000",
// ...
},
},
},
};如果使用 Quasar CLI，也可以通过 @quasar/app-vite Boot File 或 @quasar/app-webpack Boot File 来设置。 这种方式非常适合需要在应用初始化时动态设置颜色的场景，例如从接口获取主题色后再应用到页面上。
import { setCssVar } from "quasar";
import { defineBoot } from "#q-app/wrappers";
export default defineBoot(() => {
setCssVar("primary", "#ff0000");
});如果使用 SSR 模式，需要禁用此 boot 文件的服务端执行：
boot: [
{ server: false, path: 'brand-colors' }, // 或者您给 boot 文件取的名称
// ...
],