Create NEW Brand Colors

  • @tof06 I couldn’t get your example to work for me … but, your instructions pointed me in the correct direction, and I did manage to get it working …

    Here’s what I did …

    in quasar.variables.styl I added the following

    // app specific brand colours
    $listHeaderToolbar = #31CCEC
      --q-color-listheadertoolbar = $listHeaderToolbar
      background: $listHeaderToolbar !important
      background: var(--q-color-listheadertoolbar) !important
      color: $listHeaderToolbar !important
      color: var(--q-color-listheadertoolbar) !important

    in index.js immediately after

    import Vue from 'vue'

    I added the following

    // Setup the custom Brand colours
    import { colors } from 'quasar'
    colors.setBrand('listheadertoolbar', '#31CCEC')

    Finally, in my component Vue file, which in my case is called Leads.vue, I set the class for the background color of the q-toolbar as follows

    <q-toolbar class="bg-listheadertoolbar text-white shadow-15">

    and … it worked …

    So now, when I wish to change the background color of each q-toolbar in my application , I just need to go to index.js and change the color value from #31CCEC to whatever value I need.

    I’m not planning on making the colors dynamically changeable at the moment … although I might do that at a future date.

  • @digiproduct @tof06 you can set it in app.styl

      color #a8875a
      background #a2aa33
      color #fff
    <q-btn color="myBrand" bg-color="myBrand" text-color="someTextColor" ... />

  • @metalsadman How on earth did I miss that when I looked at the Docs yesterday? 😭 😭 😭

    I’ve even got that page already open in my browser now

    A ten-second job … that I wasted hours on!

    That’s so simple …

  • @metalsadman OK, I’ve decided to give myself a bit of a break … the Docs don’t explain it as clearly as your example … I might not have worked out the correct Stylus to put in app.styl

    You’ve explained it very clearly and make it simple for me to duplicate for my own purposes … thanks. 😃

  • @metalsadman Using myBrand from your example code above …

    Having put your code in app.styl … can I then change the color dynamically? … with the following …

    colors.setBrand('myBrand', '#31CCEC')

  • @digiproduct haven’t tried it, but i notice you need a page refresh when you change the value of the classes inside app.styl.

  • @metalsadman I just changed the value in app.styl and it refreshed automatically for me

  • @metalsadman I’ll try using SetBrand to do things dynamically sometime over the next few days when I create a settings page for my application

  • @digiproduct cool, would love to see how it goes too, coz i might need something like this in future projects. good luck.

  • @digiproduct If you want tu use colors.setBrand, you need to create your css variable --q-color-myBrand in your app.styl, and use this variable in .bg-myBrand and .text-myBrand, like I did in my example.
    Have a look at Quasar source code (

    export function setBrand (color, value, element = document.body) {
      if (typeof color !== 'string') {
        throw new TypeError('Expected a string as color')
      if (typeof value !== 'string') {
        throw new TypeError('Expected a string as value')
      if (!(element instanceof Element)) {
        throw new TypeError('Expected a DOM element')
 `--q-color-${color}`, value)
      switch (color) {
        case 'negative':
        case 'warning':
`--q-color-${color}-l`, lighten(value, 46))
        case 'light':
`--q-color-${color}-d`, lighten(value, -10))

    It sets the style property --q-color-${color} with the new value.
    Every style and class defined in app.styl will be compiled in your application, therefore, you must use CSS variables to be able to change them dynamically.

  • @tof06 So, from what you are saying, is that I need the following piece still included if I want to be able to use SetBrand …

      --q-color-listheadertoolbar = $listHeaderToolbar

    I’ve never done anything with CSS Variables before so this is all completely new to me.

  • @digiproduct, yes, you need that AND your need to assign this new css var in your class .bg-{color} and .{color}-text

      --q-color-listheadertoolbar $listheadertoolbar
      background: $listheadertoolbar // this is for "default" compiled in color
      background: var(--q-color-listheadertoolbar) // This will override with the color set by setBrand
      color: $listheadertoolbar
      color: var(--q-color-listheadertoolbar)

    Note that, as stated in documentation, it is not supported by IE 11 becase this browser doesn’t support CSS vars

  • @tof06 This line gives me issues

    background: var(--q-color-listheadertoolbar) 

    Whenever I try to include that line I get a white bar instead of the color I’d set

  • @digiproduct can you share the whole app.styl file and the template of your toolbar ?

  • @tof06 OK will do …

    Here is the app.styl

    // app brand styles
    $actionbutton = #FFC107
    $cancelbutton = #FFFFFF
    $listToolbar = #31CCEC
      --q-color-actionbutton = $actionbutton
      --q-color-cancelbutton = $cancelbutton
      --q-color-listtoolbar = $listToolbar
    // actionbutton - for action buttons
      color $actionbutton
      background $actionbutton !important
      //background: var(--q-color-actionbutton) !important
      color #FFFFFF
    // cancelbutton - for cancel buttons
      color $cancelbutton
      background $cancelbutton !important
      //background: var(--q-color-cancelbutton) !important
      color #000000
    // listtoolbar - for q-list Toolbar
      color #31CCEC
      background: $listToolbar !important
      //background: var(--q-color-listtoolbar) !important
      color #FFFFFF
    // app global css
    // responsive font creation
    fluid-font-size($minimumSize = 12, $maximumSize = 36, $minimumViewportWidth = 300, $maximumViewportWidth = 1600)
      font-size: 'calc(%spx + (%s - %s) * ((100vw - %spx) / (%s - %s))) !important' % ($minimumSize $maximumSize $minimumSize $minimumViewportWidth $maximumViewportWidth $minimumViewportWidth)
    for num in (8..28)
        fluid-font-size num (num*2+2) 300 1800

  • @tof06 and the following is the relevant section of the template

        <div class="q-pa-md">
          <q-toolbar class="bg-listtoolbar text-white shadow-15">
              <q-icon name="fas fa-user-friends" class="q-pl-md"/>
              <span class="q-pl-lg">LEADS</span>
              icon="far fa-user"
              label="ADD NEW LEAD"

  • @digiproduct Can you inspect generated style (in the head of html page) to see if the :root variables are defined ?

    I just made a CodePen sample :
    I don’t know why, but default values for css vars are not set (the CSS generated from stylus doesn’t include the :root section)…
    If you click on one of the button, the color changes.

  • @tof06 Here’s what is there when I inspect the page

    :root {
        --q-size-xs: 0;
        --q-size-sm: 600px;
        --q-size-md: 1024px;
        --q-size-lg: 1440px;
        --q-size-xl: 1920px;
    :root {
        --q-color-primary: #027be3;
        --q-color-secondary: #26a69a;
        --q-color-accent: #9c27b0;
        --q-color-positive: #21ba45;
        --q-color-negative: #c10015;
        --q-color-info: #31ccec;
        --q-color-warning: #f2c037;

  • @digiproduct Oh, my bad… I just found my mistake…

    There’s no “=” to set up the css var (like any property in stylus !) :

      --q-color-actionbutton $actionbutton
      --q-color-cancelbutton $cancelbutton
      --q-color-listtoolbar $listToolbar

    Edit: I’ve updated the codepen. It should work like you want :

  • @tof06 So I just copy what’s in the CSS (Stylus) section of the codepen to my app.styl file and it all should work?

    Going to go and try now …

Log in to reply