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 vars.push(`--${themeVars}: ${theme[themeVars]}`);
30 return vars.join(";");