<template>
<DynamicStyle>
- /* light / dark theme switch based on system pref if available */ body #app
- {
+ :root, body #app.is-light {
{{ getVars(themes.light) }}
} @media (prefers-color-scheme: light), (prefers-color-scheme:
- no-preference) { body #app {
+ no-preference) { :root, body #app {
{{ getVars(themes.light) }}
- } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
- theme override base on user choice. */ body #app.is-dark {
+ } } body #app.is-dark {
{{ getVars(themes.dark) }}
- } body #app.is-light {
- {{ getVars(themes.light) }}
- }
+ } @media (prefers-color-scheme: dark) { :root, body #app {
+ {{ getVars(themes.dark) }}
+ } }
</DynamicStyle>
</template>
getVars: function (theme) {
let vars = [];
for (const themeVars in theme) {
- vars.push(`--${themeVars}: ${theme[themeVars]}`);
+ let value = `${theme[themeVars]}`;
+ if (!value) {
+ value = "initial";
+ } else if (themeVars == "background-image") {
+ value = `url(${theme[themeVars]})`;
+ }
+ vars.push(`--${themeVars}: ${value}`);
}
return vars.join(";");
},