Create NEW Brand Colors

digiproduct

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

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

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

digiproduct

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

digiproduct

@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

@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

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

digiproduct

@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

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

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

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

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

@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

tof06

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

digiproduct

@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

digiproduct

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

tof06

@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

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

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

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