CODEWITHSUNDEEP
sassthemesquasar-framework
mbesson
mbesson

Reputation: 749

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 ?

Upvotes: 3

Views: 4522

Answers (3)

SaleCar
SaleCar

Reputation: 1196

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

Upvotes: 4

mbesson
mbesson

Reputation: 749

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

Upvotes: 1

cprcrack
cprcrack

Reputation: 19139

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

  // ...
}

Upvotes: 5

Related Questions