Full example:
The variables in a styl file:
$themes = {
"theme-default": {
'$primary': $primary
'$secondary': $secondary
'$tertiary': $tertiary
'$neutral': $neutral
'$positive': $positive
'$negative': $negative
'$info': $info
'$warning': $warning
'$light': $light
'$dark': $dark
},
"theme-retro": {
'$primary': purple
'$secondary': lime
'$tertiary': grey
'$neutral': $neutral
'$positive': $positive
'$negative': $negative
'$info': $info
'$warning': $warning
'$light': $dark
'$dark': $light
},
}
// Create the Stylus mixin:
themify($themes, $mixin)
for $theme in $themes
.{$theme} &
$mixin($themes[$theme])
You can see that the themes hold the original values from Quasar. To change these you best change them before you make your $themes
object.
Then in the theme-retro
you see I can leave original options or change to my second theme. I can even switch around light
and dark
!
Then you have to add all the Quasar color classes with the correct mixin like so:
.text-primary
themify($themes, @($theme) {
color: $theme.$primary !important
})
.bg-primary
themify($themes, @($theme) {
background: $theme.$primary !important
})
.text-secondary
themify($themes, @($theme) {
color: $theme.$secondary !important
})
.bg-secondary
themify($themes, @($theme) {
background: $theme.$secondary !important
})
.text-tertiary
themify($themes, @($theme) {
color: $theme.$tertiary !important
})
.bg-tertiary
themify($themes, @($theme) {
background: $theme.$tertiary !important
})
.text-faded
themify($themes, @($theme) {
color: $theme.$faded !important
})
.bg-faded
themify($themes, @($theme) {
background: $theme.$faded !important
})
.text-positive
themify($themes, @($theme) {
color: $theme.$positive !important
})
.bg-positive
themify($themes, @($theme) {
background: $theme.$positive !important
})
.text-negative
themify($themes, @($theme) {
color: $theme.$negative !important
})
.bg-negative
themify($themes, @($theme) {
background: $theme.$negative !important
})
.text-info
themify($themes, @($theme) {
color: $theme.$info !important
})
.bg-info
themify($themes, @($theme) {
background: $theme.$info !important
})
.text-warning
themify($themes, @($theme) {
color: $theme.$warning !important
})
.bg-warning
themify($themes, @($theme) {
background: $theme.$warning !important
})
.text-light
themify($themes, @($theme) {
color: $theme.$light !important
})
.bg-light
themify($themes, @($theme) {
background: $theme.$light !important
})
.text-dark
themify($themes, @($theme) {
color: $theme.$dark !important
})
.bg-dark
themify($themes, @($theme) {
background: $theme.$dark !important
})
That’s all! Now your Quasar components will change when you change a class on the <body>
tag from theme-default
to theme-retro
.