]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <DynamicStyle> | |
3 | /* light / dark theme switch based on system pref if available */ body #app | |
4 | { | |
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) }} | |
14 | } | |
15 | </DynamicStyle> | |
16 | </template> | |
17 | ||
18 | <script> | |
19 | export default { | |
20 | name: "DynamicTheme", | |
21 | props: { | |
22 | themes: Object, | |
23 | }, | |
24 | methods: { | |
25 | getVars: function (theme) { | |
26 | let vars = []; | |
27 | for (const themeVars in theme) { | |
154e6efe BW |
28 | let value = `${theme[themeVars]}`; |
29 | if (!value) { | |
30 | value = "inital"; | |
31 | } else if (themeVars == "background-image") { | |
32 | value = `url(${theme[themeVars]})`; | |
33 | } | |
34 | vars.push(`--${themeVars}: ${value}`); | |
b9c5fcf0 BW |
35 | } |
36 | return vars.join(";"); | |
37 | }, | |
38 | }, | |
39 | }; | |
40 | </script> |