Build system integration using vue-cli.

1 files changed, 34 insertions, 0 deletions

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
new file mode 100644
index 0000000..0bcde0f
--- /dev/null
+++ b/src/components/DarkMode.vue
@@ -0,0 +1,34 @@
+<template>
+  <a
+    v-on:click="toggleTheme()"
+    aria-label="Toggle dark mode"
+    class="navbar-item is-inline-block-mobile"
+  >
+    <i class="fas fa-adjust"></i>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "Darkmode",
+  data: function () {
+    return {
+      isDark: null,
+    };
+  },
+  created: function () {
+    this.isDark =
+      "overrideDark" in localStorage
+        ? JSON.parse(localStorage.overrideDark)
+        : matchMedia("(prefers-color-scheme: dark)").matches;
+    this.$emit("updated", this.isDark);
+  },
+  methods: {
+    toggleTheme: function () {
+      this.isDark = !this.isDark;
+      localStorage.overrideDark = this.isDark;
+      this.$emit("updated", this.isDark);
+    },
+  },
+};
+</script>