如何在Quasar中为浅色/深色模式自定义专属颜色？

你完全可以在现有的.body--dark和.body--light类中添加自定义CSS变量，实现和Vuetify类似的效果，具体步骤如下：

1. 在quasar.variables.scss中添加自定义颜色变量 #

直接在你已有的代码块里扩展自定义变量即可，不需要局限于Quasar预设的primary/secondary这些。比如新增一个--custom-accent和--custom-bg：

.body--dark {
  --q-primary: #exampleColor;
  --q-secondary: #exampleColor;
  --q-accent: #exampleColor;
  --q-positive: #exampleColor;
  --q-negative: #exampleColor;
  --q-info: #exampleColor;
  --q-warning: #exampleColor;
  --q-dark-page : #exampleColor;
  // 新增自定义变量
  --custom-accent: #2d3748;
  --custom-bg: #1a202c;
}

.body--light {
  --q-primary: #exampleColor;
  --q-secondary: #exampleColor;
  --q-accent: #exampleColor;
  --q-positive: #exampleColor;
  --q-negative: #exampleColor;
  --q-info: #exampleColor;
  --q-warning: #exampleColor;
  // 新增自定义变量
  --custom-accent: #ebf8ff;
  --custom-bg: #ffffff;
}

2. 在组件中使用自定义变量 #

方式一：直接在模板的样式绑定中使用 #

比如给一个元素设置背景色：

<template>
  <div :style="{ backgroundColor: 'var(--custom-bg)' }">
    自定义背景的内容
  </div>
</template>

方式二：在组件的Scoped样式中使用 #

如果用Scoped CSS/Sass，直接通过var()引用变量：

<style scoped>
.custom-box {
  background-color: var(--custom-bg);
  border-color: var(--custom-accent);
}
</style>

3. （可选）用Sass变量简化维护 #

如果需要频繁修改颜色值，可以先定义Sass变量再赋值给CSS变量，方便统一管理：

// 先定义深浅主题的自定义颜色
$custom-accent-dark: #2d3748;
$custom-bg-dark: #1a202c;
$custom-accent-light: #ebf8ff;
$custom-bg-light: #ffffff;

.body--dark {
  --q-primary: #exampleColor;
  --q-secondary: #exampleColor;
  --q-accent: #exampleColor;
  --q-positive: #exampleColor;
  --q-negative: #exampleColor;
  --q-info: #exampleColor;
  --q-warning: #exampleColor;
  --q-dark-page : #exampleColor;
  // 绑定自定义变量
  --custom-accent: #{$custom-accent-dark};
  --custom-bg: #{$custom-bg-dark};
}

.body--light {
  --q-primary: #exampleColor;
  --q-secondary: #exampleColor;
  --q-accent: #exampleColor;
  --q-positive: #exampleColor;
  --q-negative: #exampleColor;
  --q-info: #exampleColor;
  --q-warning: #exampleColor;
  // 绑定自定义变量
  --custom-accent: #{$custom-accent-light};
  --custom-bg: #{$custom-bg-light};
}

这样操作后，当Quasar切换深浅主题时，自定义颜色会自动跟随.body--dark/.body--light的生效而切换，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Ckuessner