Create NEW Brand Colors
-
@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 yourapp.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 inapp.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
-
@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 …