aboutsummaryrefslogblamecommitdiffhomepage
path: root/src/components/DynamicTheme.vue
blob: fc2fd55034c1c37c6c5ad1171df0156e8851bf00 (plain) (tree)
1
2
3
4
5
6
7
8
9

                
                               

                                                                  
                                       
                               
                           
                              


                                                              












                                      






                                                     





                            
<template>
  <DynamicStyle>
    :root, body #app.is-light {
    {{ getVars(themes.light) }}
    } @media (prefers-color-scheme: light), (prefers-color-scheme:
    no-preference) { :root, body #app {
    {{ getVars(themes.light) }}
    } } body #app.is-dark {
    {{ getVars(themes.dark) }}
    } @media (prefers-color-scheme: dark) { :root, body #app {
    {{ getVars(themes.dark) }}
    } }
  </DynamicStyle>
</template>

<script>
export default {
  name: "DynamicTheme",
  props: {
    themes: Object,
  },
  methods: {
    getVars: function (theme) {
      let vars = [];
      for (const themeVars in theme) {
        let value = `${theme[themeVars]}`;
        if (!value) {
          value = "inital";
        } else if (themeVars == "background-image") {
          value = `url(${theme[themeVars]})`;
        }
        vars.push(`--${themeVars}: ${value}`);
      }
      return vars.join(";");
    },
  },
};
</script>