aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/DarkMode.vue
blob: a5aae41cfa15911334d5ce94d0272babc25bf90a (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <a
    v-on:click="toggleTheme()"
    aria-label="Toggle dark mode"
    class="navbar-item is-inline-block-mobile"
  >
    <i class="fas fa-fw 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>