Is there a way to create my own colors for light and dark mode in Quasar?

Question

I have a Quasar app with Quasar CLI and I want to create my own colors that differentiate when I use light / dark theme. In my project before, I was using Vuetify and was easily able to do so by just editing my vuetify.js file and adding a color with the same name to my light and dark object.

In Quasar this doesn't seem so easy. As of right now, I have a quasar.variables.scss file where I can specify different colors for light and dark mode by using the .body--dark {} and .body--light{} classes. Unfortunately I'm only able to override the standard colors like primary, secondary, accent etc.. I can't add new colors here.

What I currently have:

.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;
}

.body--light {
  --q-primary: #exampleColor;
  --q-secondary: #exampleColor;
  --q-accent: #exampleColor;
  --q-positive: #exampleColor;
  --q-negative: #exampleColor;
  --q-info: #exampleColor;
  --q-warning: #exampleColor;
}

What I basically want is to add a new color to both classes. Does anyone have experience here or can get me in the right direction?

Answer 1

So I've found a part of the solution.

You can add custom colors to both of the classes by just adding

.body--dark {
 --q-yourCustomColor: #exampleColorDark
}

.body--light {
--q-yourCustomColor: #exampleColorLight
}

Then you are able to use them in your css inside your vue components like this:

.your-css-class {
background-color: var(--q-yourCustomColor)
}

Using --q- is mandatory, otherwise it will not work. Also what still doesn't work is using the variable in a property provided by quasar components. So <q-btn color="--q-yourCustomColor">Button</q-btn> still doesn't seem to be recognized. Workaround for that would be to give the button an id or a class and give it a background-color like I provided in the example.