aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/DarkMode.vue
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
commitb9c5fcf085bed9c6100283133531b36bfbb06cf0 (patch)
tree7baa4d16c9d6c06745727c7c273065a29b8fc1d7 /src/components/DarkMode.vue
parentab7ac44c191e3b7dea696e76b74097e23f73b18c (diff)
downloadhomer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.gz
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.zst
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.zip
Build system integration using vue-cli.
Diffstat (limited to 'src/components/DarkMode.vue')
-rw-r--r--src/components/DarkMode.vue34
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 @@
1<template>
2 <a
3 v-on:click="toggleTheme()"
4 aria-label="Toggle dark mode"
5 class="navbar-item is-inline-block-mobile"
6 >
7 <i class="fas fa-adjust"></i>
8 </a>
9</template>
10
11<script>
12export default {
13 name: "Darkmode",
14 data: function () {
15 return {
16 isDark: null,
17 };
18 },
19 created: function () {
20 this.isDark =
21 "overrideDark" in localStorage
22 ? JSON.parse(localStorage.overrideDark)
23 : matchMedia("(prefers-color-scheme: dark)").matches;
24 this.$emit("updated", this.isDark);
25 },
26 methods: {
27 toggleTheme: function () {
28 this.isDark = !this.isDark;
29 localStorage.overrideDark = this.isDark;
30 this.$emit("updated", this.isDark);
31 },
32 },
33};
34</script>