No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Create NEW Brand Colors

    Framework
    3
    32
    7665
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • digiproduct
      digiproduct @tof06 last edited by

      @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.

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @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" ... />
        
        digiproduct 3 Replies Last reply Reply Quote 0
        • digiproduct
          digiproduct @metalsadman last edited by digiproduct

          @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 …

          1 Reply Last reply Reply Quote 0
          • digiproduct
            digiproduct @metalsadman last edited by

            @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. 😃

            1 Reply Last reply Reply Quote 0
            • digiproduct
              digiproduct @metalsadman last edited by

              @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')
              
              metalsadman 1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @digiproduct last edited by

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

                digiproduct 2 Replies Last reply Reply Quote 0
                • digiproduct
                  digiproduct @metalsadman last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • digiproduct
                    digiproduct @metalsadman last edited by

                    @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

                    metalsadman 1 Reply Last reply Reply Quote 0
                    • metalsadman
                      metalsadman @digiproduct last edited by metalsadman

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

                      1 Reply Last reply Reply Quote 0
                      • T
                        tof06 last edited by tof06

                        @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.

                        digiproduct 1 Reply Last reply Reply Quote 0
                        • digiproduct
                          digiproduct @tof06 last edited by

                          @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.

                          1 Reply Last reply Reply Quote 0
                          • T
                            tof06 last edited by tof06

                            @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

                            digiproduct 1 Reply Last reply Reply Quote 0
                            • digiproduct
                              digiproduct @tof06 last edited by

                              @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

                              1 Reply Last reply Reply Quote 0
                              • T
                                tof06 last edited by

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

                                digiproduct 2 Replies Last reply Reply Quote 0
                                • digiproduct
                                  digiproduct @tof06 last edited by

                                  @tof06 OK will do …

                                  Here is the app.styl

                                  // app brand styles
                                  $actionbutton = #FFC107
                                  $cancelbutton = #FFFFFF
                                  $listToolbar = #31CCEC
                                  
                                  :root
                                    --q-color-actionbutton = $actionbutton
                                    --q-color-cancelbutton = $cancelbutton
                                    --q-color-listtoolbar = $listToolbar
                                  
                                  // actionbutton - for action buttons
                                  .text-actionbutton
                                    color $actionbutton
                                  .bg-actionbutton
                                    background $actionbutton !important
                                    //background: var(--q-color-actionbutton) !important
                                  .text-actionbuttonTextColor
                                    color #FFFFFF
                                  
                                  // cancelbutton - for cancel buttons
                                  .text-cancelbutton
                                    color $cancelbutton
                                  .bg-cancelbutton
                                    background $cancelbutton !important
                                    //background: var(--q-color-cancelbutton) !important
                                  .text-cancelbuttonTextColor
                                    color #000000
                                  
                                  // listtoolbar - for q-list Toolbar
                                  .text-listtoolbar
                                    color #31CCEC
                                  .bg-listtoolbar
                                    background: $listToolbar !important
                                    //background: var(--q-color-listtoolbar) !important
                                  .text-listtoolbarTextColor
                                    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)
                                    .fontsize-{num}
                                      fluid-font-size num (num*2+2) 300 1800
                                  
                                  
                                  
                                  
                                  1 Reply Last reply Reply Quote 0
                                  • digiproduct
                                    digiproduct @tof06 last edited by

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

                                    <template>
                                      <q-page>
                                        <div class="q-pa-md">
                                          <q-toolbar class="bg-listtoolbar text-white shadow-15">
                                            <q-toolbar-title>
                                              <q-icon name="fas fa-user-friends" class="q-pl-md"/>
                                              <span class="q-pl-lg">LEADS</span>
                                            </q-toolbar-title>
                                    
                                            <q-space/>
                                            <q-btn
                                              color="actionbutton"
                                              text-color="actionTextColor"
                                              ripple
                                              icon="far fa-user"
                                              label="ADD NEW LEAD"
                                            />
                                          </q-toolbar>
                                        </div>
                                      </q-page>
                                    </template>
                                    
                                    
                                    1 Reply Last reply Reply Quote 0
                                    • T
                                      tof06 last edited by

                                      @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 : https://codepen.io/cp-tof06/pen/VObvpd
                                      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.

                                      digiproduct 1 Reply Last reply Reply Quote 0
                                      • digiproduct
                                        digiproduct @tof06 last edited by

                                        @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;
                                        
                                        T 1 Reply Last reply Reply Quote 0
                                        • T
                                          tof06 @digiproduct last edited by tof06

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

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

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

                                          Edit: I’ve updated the codepen. It should work like you want :https://codepen.io/cp-tof06/pen/VObvpd

                                          digiproduct 2 Replies Last reply Reply Quote 0
                                          • digiproduct
                                            digiproduct @tof06 last edited by

                                            @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 …

                                            T 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post