3 /* light / dark theme switch based on system pref if available */ body #app
5 {{ getVars(themes.light) }}
6 } @media (prefers-color-scheme: light), (prefers-color-scheme:
7 no-preference) { body #app {
8 {{ getVars(themes.light) }}
9 } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
10 theme override base on user choice. */ body #app.is-dark {
11 {{ getVars(themes.dark) }}
12 } body #app.is-light {
13 {{ getVars(themes.light) }}
25 getVars: function (theme) {
27 for (const themeVars in theme) {
28 let value = `${theme[themeVars]}`;
31 } else if (themeVars == "background-image") {
32 value = `url(${theme[themeVars]})`;
34 vars.push(`--${themeVars}: ${value}`);
36 return vars.join(";");