src/components/DarkMode.vue

   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>