From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 25 May 2020 15:07:03 -0700
Subject: Build system integration using vue-cli.

---
 src/components/DynamicTheme.vue | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/DynamicTheme.vue

(limited to 'src/components/DynamicTheme.vue')

diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
new file mode 100644
index 0000000..cf9963b
--- /dev/null
+++ b/src/components/DynamicTheme.vue
@@ -0,0 +1,34 @@
+<template>
+  <DynamicStyle>
+    /* light / dark theme switch based on system pref if available */ body #app
+    {
+    {{ getVars(themes.light) }}
+    } @media (prefers-color-scheme: light), (prefers-color-scheme:
+    no-preference) { body #app {
+    {{ getVars(themes.light) }}
+    } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
+    theme override base on user choice. */ body #app.is-dark {
+    {{ getVars(themes.dark) }}
+    } body #app.is-light {
+    {{ getVars(themes.light) }}
+    }
+  </DynamicStyle>
+</template>
+
+<script>
+export default {
+  name: "DynamicTheme",
+  props: {
+    themes: Object,
+  },
+  methods: {
+    getVars: function (theme) {
+      let vars = [];
+      for (const themeVars in theme) {
+        vars.push(`--${themeVars}: ${theme[themeVars]}`);
+      }
+      return vars.join(";");
+    },
+  },
+};
+</script>
-- 
cgit v1.2.3