How to add quaternary color ?

[mariaczi]

3 main colors in not enough for me.
I want 4th color.
I did try to just add $quaternary= #E28413 to app.variables.styl but it’s not generating classes with this color.
I thought that it is iterating through all colors to generate necessary classes but looks like not?

[Jon]

@mariaczi said in How to add quaternary color ?:

I did try to just add $quaternary= #E28413 to app.variables.styl

That is correct.

It’s possible your project is configured to use the default Quasar stylesheet, rather than your custom theme…

Have a look in the App.vue file for something like the code below…

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
require('./themes/app.' + __THEME + '.styl')
// 2. or, use next line to activate DEFAULT QUASAR STYLE
// require('quasar/dist/quasar.' + __THEME + '.css')
// ==============================

Notice I’ve commented out option #2 (default quasar style) and enabled option #1 (custom theme styles)

[mariaczi]

I am pretty sure I am using my build as I am changing primary/sec/tertiary still (looking for perfect set) and it work,
but does not generate classes for $quaternary… any idea why ? @administrators ?

[rstoenescu]

Overwrite $colors Stylus variable. Copy-paste from HERE, add your quaternary, and since you’re here, remove any unused colors to lower the CSS footprint