src/components/DynamicTheme.vue

   1 <template>
   2   <DynamicStyle>
   3     :root, body #app.is-light {
   4     {{ getVars(themes.light) }}
   5     } @media (prefers-color-scheme: light), (prefers-color-scheme:
   6     no-preference) { :root, body #app {
   7     {{ getVars(themes.light) }}
   8     } } body #app.is-dark {
   9     {{ getVars(themes.dark) }}
  10     } @media (prefers-color-scheme: dark) { :root, body #app {
  11     {{ getVars(themes.dark) }}
  12     } }
  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) {
  26         let value = `${theme[themeVars]}`;
  27         if (!value) {
  28           value = "inital";
  29         } else if (themeVars == "background-image") {
  30           value = `url(${theme[themeVars]})`;
  31         }
  32         vars.push(`--${themeVars}: ${value}`);
  33       }
  34       return vars.join(";");
  35     },
  36   },
  37 };
  38 </script>