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/DarkMode.vue | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/DarkMode.vue

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

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>
-- 
cgit v1.2.3

