diff options
author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2020-05-25 15:07:03 -0700 |
---|---|---|
committer | Bastien Wirtz <bastien.wirtz@gmail.com> | 2020-05-25 15:07:03 -0700 |
commit | b9c5fcf085bed9c6100283133531b36bfbb06cf0 (patch) | |
tree | 7baa4d16c9d6c06745727c7c273065a29b8fc1d7 /src/components/DarkMode.vue | |
parent | ab7ac44c191e3b7dea696e76b74097e23f73b18c (diff) | |
download | homer-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.vue | 34 |
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> | ||
12 | export 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> | ||