search

quasarframework / quasar-framework.org

[DEPRECATED, v0.17] Quasar Framework - The Official Website
https://quasar-framework.org
MIT License
110 stars 314 forks source link

setBrand doesn't work with custom colors #643

Closed RotemBot closed 5 years ago

RotemBot commented 5 years ago

Software version

Quasar: v0.17.18, as plugin in vue cli 3 project Browsers: Chrome

What did you get as the error?

I create and use custom colors, as explained in the color utils documentation - this works fine. I want to allow users to switch between color themes. I need to bo able to dynamically change my custom colors, and quasar palette colors, other than 'primary, secondary, tertiary, positive, negative, info, warning, light, dark, faded', such as body-background.

This is how I defined the custom colors:

  --q-color-primary-darkened $primary-darkened
  --q-color-body-background-darkened $body-background-darkened

.text-primary-darkened
  color $primary-darkened !important
  color var(--q-color-primary-darkened) !important
.bg-primary-darkened
  background $primary-darkened !important
  background var(--q-color-primary-darkened) !important
.text-body-background-darkened
  color $body-background-darkened !important
  color var(--q-color-body-background-darkened) !important
.bg-body-background-darkened
  background $body-background-darkened !important
  background var(--q-color-body-background-darkened) !important

This is how I tried changing them in the code. Primary, secondary and tertiary work fine: 

   setBrand('secondary', '#26A69A')
   setBrand('tertiary', '#555')

   setBrand('primary-darkened', '#0256a7')
   setBrand('body-background-darkened', '#868889')

What were you expecting?

When using color utils' "setBrand", it had not effect whatsoever on custom and system colors (other than the ones listed above). I need a way to chage all colors dynamically...

rstoenescu commented 5 years ago

Hi,

setBrand as its name implies, is for the brand colors (primary, secondary, tertiary) only.

For other colors use CSS variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables and you can change them through JS too (the page I indicated shows everything you need to know).