frontend Category

自定义调色板

颜色列表

首先，我们需要获取 Quasar 支持的颜色变量列表。这个在 quasar/dist/types/api/color.d.ts 中有定义：

// color.d.ts
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
>;

Quasar 主题色改变（vite-plugin）

有些时候，我们希望能够让用户自定义网页的主题色，对于 Quasar 来说，特别是 primary。更进一步，我们希望主题色分为多阶（好比提供的 red-1，red-2 系列），均能同步改变。

Quasar 提供了 getCssVar 和 setCssVar 两个设置 CSS 变量的函数，其效果是在 DOM 根结点的 style 加上对应的变量声明。

例如 setCssVar("primary", "red")，那么它会设置 --q-primary: red，加上一个 --q- 前缀。这样所有的 primary color 都会变成设定的颜色。

Stankle of QuadnucYardOriginal...About 1 min