Color Palette

Quasar 提供了大量现成的颜色 css。您可以将它们用作 Sass/SCSS 变量，或者直接用作 HTML 模板中的 CSS 类。

主题颜色

Quasar 提供了一套默认的主题颜色如下，所有的 Quasar 组件都依赖这些颜色，选择主题颜色应该是在应用程序的设计阶段就定好的。

色彩列表

下面这些颜色都是 quasar 预设的，可以直接使用的，您可以在 .vue文件的模版中把他们当作 css 类来使用，也可以在<style lang="...">标签中当作 Sass/SCSS 变量来使用。

当作 CSS 类使用

使用text- 或者 bg- 当作前缀，然后加上一个预设的颜色的名称，就可以改变文本/背景的颜色，例如：

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

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

当作 Sass/SCSS 变量来使用

您可以通过$加上一个预设的颜色名称来当作一个 css 变量使用，例如：$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>

添加您自己的颜色

您可以通过以下方式添加您自己的颜色，先在 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])

示例：

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])

示例：

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

更多的颜色工具

除了上面的 utils，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',
        // ...
      }
    }
  }
}

或者使用一个 Boot 文件来处理， @quasar/app-vite Boot File or @quasar/app-webpack Boot File:

// For Quasar CLI
//不要在 SSR 模式中启用此 boot 文件

import { setCssVar } from 'quasar'

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

如果您使用 Quasar UMD 或者 Quasar Vite plugin 或者 Vue CLI 方式引入的 Quasar，则需要这么做：

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

类型定义

/**
 * Augment this interface to add custom colors.
 *
 * @example
 * ```ts
 * declare module "quasar" {
 *   interface CustomColors {
 *     custom: string;
 *   }
 * }
 * ```
 */
export interface CustomColors {}

export type BrandColor =
  | "primary"
  | "secondary"
  | "accent"
  | "dark"
  | "positive"
  | "negative"
  | "info"
  | "warning";
type Color =
  | "red"
  | "pink"
  | "purple"
  | "deep-purple"
  | "indigo"
  | "blue"
  | "light-blue"
  | "cyan"
  | "teal"
  | "green"
  | "light-green"
  | "lime"
  | "yellow"
  | "amber"
  | "orange"
  | "deep-orange"
  | "brown"
  | "grey"
  | "blue-grey";
type ColorShade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;
type DetailedColor = `${Color}-${ColorShade}`;

export type NamedColor = LiteralUnion<
  BrandColor | Color | DetailedColor | keyof CustomColors
>;