vuetifyjs-dynamic-theme-example
This is test of dynamic CSS variables usage in Vuetify. See demo online.
Browser issues
Theme switch is disabled by feature and browser detection where needed.
IE
Black & White as expected.
Edge
Broken Badges and Picker. My guess it has something to do with ::before
, ::after
CSS selectors.
It loads style without CSS variables and the theme switch is disabled.
Contrast issues
Unfortunately there is no text automatic color, which may lead to bad usability.
How it works?
./src/stylus/main.styl file:
@import '../../node_modules/vuetify/src/stylus/settings/_colors'
body {
--primary: $blue.darken-2;
--accent: $amber.accent-3;
--secondary: $grey.base;
--info: $blue.base;
--warning: $amber.base;
--error: $red.accent-2;
--success: $green.base;
}
$theme := {
primary: var(--primary)
accent: var(--accent)
secondary: var(--secondary)
info: var(--info)
warning: var(--warning)
error: var(--error)
success: var(--success)
}
@import '../../node_modules/vuetify/src/stylus/main'
./src/App.vue file:
setTheme (theme) {
document.body.style.setProperty('--primary', theme[0])
document.body.style.setProperty('--accent', theme[1])
document.body.style.setProperty('--secondary', theme[2])
}
./node_modules/vuetify/src/stylus/tools/_progress-linear.styl
source needed:
Fix in progress-linear(progress)
.progress-linear__bar
//background: lighten(progress, 50%)
background: lighten(black, 87.5%)
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.