]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <DynamicStyle> | |
67fd101a | 3 | :root, body #app.is-light { |
b9c5fcf0 BW |
4 | {{ getVars(themes.light) }} |
5 | } @media (prefers-color-scheme: light), (prefers-color-scheme: | |
67fd101a | 6 | no-preference) { :root, body #app { |
b9c5fcf0 | 7 | {{ getVars(themes.light) }} |
67fd101a | 8 | } } body #app.is-dark { |
b9c5fcf0 | 9 | {{ getVars(themes.dark) }} |
67fd101a BW |
10 | } @media (prefers-color-scheme: dark) { :root, body #app { |
11 | {{ getVars(themes.dark) }} | |
12 | } } | |
b9c5fcf0 BW |
13 | </DynamicStyle> |
14 | </template> | |
15 | ||
16 | <script> | |
17 | export default { | |
18 | name: "DynamicTheme", | |
19 | props: { | |
20 | themes: Object, | |
21 | }, | |
22 | methods: { | |
23 | getVars: function (theme) { | |
24 | let vars = []; | |
25 | for (const themeVars in theme) { | |
154e6efe BW |
26 | let value = `${theme[themeVars]}`; |
27 | if (!value) { | |
2662b170 | 28 | value = "initial"; |
154e6efe BW |
29 | } else if (themeVars == "background-image") { |
30 | value = `url(${theme[themeVars]})`; | |
31 | } | |
32 | vars.push(`--${themeVars}: ${value}`); | |
b9c5fcf0 BW |
33 | } |
34 | return vars.join(";"); | |
35 | }, | |
36 | }, | |
37 | }; | |
38 | </script> |