如何处理多种配色方案

Question

我有一个带有深色主题切换的类星体项目。但如果使用深色模式，我想改变整个配色方案。

我对sass一无所知，我想知道可以通过在用户更改主题时更新sass变量来完成。

src/css/quasar.variables.sass这是（浅色主题）中定义的实际 sass 变量：

// Quasar Sass (& SCSS) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

$primary   : #1976D2
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

当启用深色主题时，我想要类似的东西：

$primary   : red
$secondary : blue
$accent    : green

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

有办法实现这一点吗？我可以将一些逻辑放入 .sass 文件中吗？

Answer 1

您可以使用setCssVar以编程方式更改品牌颜色，如下所示：

import { setCssVar } from 'quasar';

//...

setup() {
  // Setup theme
  setCssVar('primary', '#1976d2');
  setCssVar('secondary', '#26A69A');
  setCssVar('accent', '#9C27B0');
  setCssVar('dark', '#1d1d1d');
  setCssVar('positive', '#21BA45');
  setCssVar('negative', '#C10015');
  setCssVar('info', '#31CCEC');
  setCssVar('warning', '#F2C037');

  // ...
}