Create NEW Brand Colors



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



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


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


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



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

    :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



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



  • Yes, it’s working … thanks so, so much for your help @tof06



  • @tof06 One tiny last problem …

    I can’t get the SetBrand to work … I get a reference error on Quasar.utils.colors.setBrand(‘listtoolbar’, color)



  • @tof06 Never mind … I got working.

    I needed this

    import { colors } from "quasar";
    

    and then I could do

    colors.setBrand("listtoolbar", "green");
    

    or whatever color I need



  • @digiproduct said in Create NEW Brand Colors:

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

    Yes it should ! But you should also understand what you are copying 🙂 That’s the smarter way to learn new things, imho 🙂

    @digiproduct said in Create NEW Brand Colors:

    I can’t get the SetBrand to work … I get a reference error on Quasar.utils.colors.setBrand(‘listtoolbar’, color)

    In Codepen, I have to use Quasar.utils.colors.setBrand, because it is based on UMD version of Quasar. But I see you found the solution by yourself, that’s great !



  • @tof06 Yeah, I need a deeper understanding of CSS variables … but, with your help, I’ve got a starting point … MANY THANKS ☺


Log in to reply