src/components/DynamicTheme.vue

   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) {
  28         vars.push(`--${themeVars}: ${theme[themeVars]}`);
  29       }
  30       return vars.join(";");
  31     },
  32   },
  33 };
  34 </script>