Create NEW Brand Colors



  • Is it possible to create new custom-named Brand colors?

    There are already the pre-defined Brand Colors:-

    primary
    secondary
    accent
    positive
    negative
    info
    warning

    But, what if I wish to create some additional ones? For, example:-

    ListHeaderToolbar
    ActionButton



  • Hi,
    I’m pretty new to quasar & vue, but for my project, I needed the same thing. This is how I solved it :

    I created a variable in css/quasar.variables.styl, apply this variable to a css var prefixed by --q-color-, and then, I was able to use SetBrand to update the color at runtime

    quasar.variables.styl:

    $primary = #027BE3
    $secondary = #26A69A
    // ....
    
    $listHeaderToolbar = #123456
    
    :root
      --q-color-listheadertoolbar $listHeaderToolbar
    
    .bg-listheadertoolbar
      background: $listHeaderToolbar !important
      background: var(--q-color-listheadertoolbar) !important
    
    .listheadertoolbar-text
      color: $listHeaderToolbar !important
      color: var(--q-color-listheadertoolbar) !important
    

    vue template:

    <q-toolbar color="listheadertoolbar">...</q-toolbar>
    

    SetBrand usage:

    SetBrand('listheadertoolbar', '#ff0000')
    


  • Brilliant @tof06 … I was actually looking at the SetBrand docs before I wrote the post but didn’t figure it out … thanks for showing me.



  • @tof06 Would the same result be achieved by placing the code in app.styl ?

    Because … won’t APP.STYL remain untouched when an upgrade is applied … but QUASAR.VARIABLES.STYL might be overwritten during an update to Quasar???



  • I think it would work in app.styl too.

    But I don’t think quasar.variables.styl is overriden on upgrade.
    According to comments in this file, it’s used to customized quasar variables.

    // --------------------------------------------------
    // To customize the look and feel of this app, you can override
    // the Stylus variables found in Quasar's source Stylus files.
    
    // Check documentation for full list of Quasar variables
    
    // 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.
    


  • @tof06

    OK, read and understood … but then what is app.styl used for?

    Are we supposed to place specific values in quasar.variables.styl ?

    And Stylus rules in app.styl ?



  • @tof06 you’re absolutely right about quasar.variables.styl not getting changed … because it’s under the src folder and nothing under that folder should get changed by an update.



  • @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
    
    :root
      --q-color-listheadertoolbar = $listHeaderToolbar
    
    .bg-listheadertoolbar
      background: $listHeaderToolbar !important
      background: var(--q-color-listheadertoolbar) !important
    
    .listheadertoolbar-text
      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 https://v1.quasar-framework.org/style/color-palette#Adding-Your-Own-Colors.
    ie.

    //app.styl
    .text-myBrand
      color #a8875a
    .bg-myBrand
      background #a2aa33
    .text-someTextColor
      color #fff
    //somecomponent.vue
    <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 (https://github.com/quasarframework/quasar/blob/51065c8a330fa187a48b5bdb56f120fd6972fbf9/ui/src/utils/colors.js#L218)

    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')
      }
    
      element.style.setProperty(`--q-color-${color}`, value)
      switch (color) {
        case 'negative':
        case 'warning':
          element.style.setProperty(`--q-color-${color}-l`, lighten(value, 46))
          break
        case 'light':
          element.style.setProperty(`--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 …

    :root
      --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

    :root
      --q-color-listheadertoolbar $listheadertoolbar
    
    .bg-listheadertoolbar
      background: $listheadertoolbar // this is for "default" compiled in color
      background: var(--q-color-listheadertoolbar) // This will override with the color set by setBrand
    
    .listheadertoolbar-text
      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


Log in to reply