How to handle multiple color schemes

Question

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 ?

Hi @Mathieu, Please check this link [Sass for multi theme architecture](https://stackoverflow.com/a/65281841/1189070). This might be not the exact implementation which you are looking for. However, you can look at the approach for it. Let me know if anything is unclear — Himanshu Saxena, Apr 13 '21 at 19:14
Thank you ! It's more complex but prettier than the answer I posted — mbesson, Apr 20 '21 at 08:51

score 4 · Answer 1 · answered Jan 22 '22 at 15:55

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

  // ...
}

SaleCar · Answer 2 · 2022-09-29T18:35:57.477

I have done this with pure CSS. There are two ways:

First:

.body--light {
    --q-primary: #244156;
    --q-secondary: #...;
    --q-accent: #...;
}

.body--dark {
    --q-primary: #1D3549;
    --q-secondary: #...;
    --q-accent: #...;
}

.body--light .drawer {background: #E9F1F7;}
.body--dark .drawer {background: #112330;}

.body--light .loginbtn {background: #7F8F82;}
.body--dark .loginbtn {background: #364D3B;}

Second (with vars). First you define all you colors, both light and dark and then use it in classes:

.body--light {
    --red: red;
    --blue: blue;
    --green: green;
}

.body--dark {
    --red: darkred;
    --blue: darkblue;
    --green: darkgreen;
}

.drawer {
    background: var(--blue)
}

.loginbtn {
    background: var(--red)
}

Nice! Have you found a way to use these variables in quasar components that have a "color" prop? Like — Ckuessner, Mar 21 '23 at 10:36

mbesson · Answer 3 · 2022-03-14T15:54:23.347

0

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

edited Mar 14 '22 at 15:54

answered Apr 13 '21 at 14:20

mbesson

629
5
24

Upvoted because I found the solution thanks to this answer. But the actual code only worked in Quasar v1. For Quasar v2, check [my answer](https://stackoverflow.com/a/70814538/423171). – cprcrack Jan 22 '22 at 15:57

How to handle multiple color schemes

3 Answers3