How to add quaternary color ?

  • 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?

  • @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)

  • 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 ?

  • Admin

    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 😉

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.