How to handle multiple color schemes

I have a quasar project with a dark theme switch. But I want to change the whole color scheme when if using the dark mode.

I don't know anything about sass, and I wonder that it can be done by updating sass variables when the user changes the theme.

Here's the actual sass variables defined in src/css/quasar.variables.sass (light theme):

// 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

And when the dark theme is enabled I want to have something like :

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

$dark      : #1D1D1D

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

Is there a way to achieve this ? Can I put some logic in a .sass file ?

You can programmatically change the brand colors using setCssVar like this:

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');

  // ...
}

Quasar V1 solution

Finally found it in the docs.

import { colors } from 'quasar'

colors.setBrand('light', '#DDD')
colors.setBrand('primary', '#33F')
colors.setBrand('primary', '#F33', document.getElementById('rebranded-section-id'))