Quasar 主题色改变（vite-plugin）

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

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

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

在组件中设置 color="foo" 的原理大致是：附加了一个 .foo 的 class，这个 class 实现了 color: x 或 color: --q-x。设置 bg-color 同理。

为了实现 color="primary-1" 的效果，就需要创建一个 .primary-1 的 class，而它的颜色值为一个变量，可以通过 setCssVar 来设置。
产生色阶的一个最简单方法就是调亮度， quasar 提供的是 lighten，其作用和 CSS 的类似，将一个颜色按百分比调亮。

如果要实现 .primary-1 到 .primary-10 怎么办？我们使用的是 SCSS，它有循环功能：

@for $var from 1 through 10 {
  .primary-#{$var} {
    color: var(--q-primary-#{$var});
  }
  .bg-primary-#{$var} {
    background-color: var(--q-primary-#{$var});
  }
}

相应地，在设置颜色的地方，也可以用循环来赋值：

for (let i = 1; i <= 10; i++) {
  setCssVar(`primary-${i}`, lighten(color, (7 - i) * 15));
}

因为 primary 或 secondary 就代表了主题色，如果要让某些元素的颜色随主题色，用自定义的 primary-1 之类的色值就好了。