init

src/components/ThemeSwitcher.vue

@@ -0,0 +1,44 @@
+<template>
+  <a role="button" @click.prevent="toggleTheme()"  
+      :aria-label="'Toggle ' + nextTheme" 
+      :title="'Toggle ' + nextTheme"
+      class="toggle-theme"
+    >
+    
+    <font-awesome :icon="['fas', 'sun']" class="mr-3" v-if="theme === 'dark'"></font-awesome>
+    <font-awesome :icon="['fas', 'moon']" class="mr-3" v-if="theme === 'light'"></font-awesome>
+  </a>
+</template>
+
+<script>
+let themes = ['light', 'dark']
+
+export default {
+  props: {
+    theme: {
+      type: String,
+    },
+  },
+
+  computed: {
+    nextTheme() {
+      const currentIndex = themes.indexOf(this.theme)
+      const nextIndex = (currentIndex + 1) % themes.length
+      return themes[nextIndex]
+    }
+  },
+  methods: {
+    toggleTheme() {
+      const currentIndex = themes.indexOf(this.theme);
+      const nextIndex = (currentIndex + 1) % themes.length;
+      window.__setPreferredTheme(themes[nextIndex])
+
+      this.$emit('setTheme', themes[nextIndex])
+    }
+  },
+  async mounted() {
+    // set default
+    if (typeof window.__theme !== 'undefined') this.$emit('setTheme', window.__theme)
+  }
+}
+</script>