Create NEW Brand Colors

digiproduct

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

tof06

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')

digiproduct

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.

digiproduct

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

tof06

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.

digiproduct

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

digiproduct

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

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

No More Posting New Topics!

Create NEW Brand Colors