refactor: split into component and use global app store

components/header/AppHeader.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
+  >
+    <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
+
+    <div class="flex gap-x-1">
+      <UButton
+        color="gray"
+        variant="ghost"
+        icon="i-uil-github"
+        aria-label="Github repo"
+        class="w-8 h-8"
+        target="_blank"
+        to="https://github.com/pihkaal/simple-qr"
+      />
+
+      <ThemeSwitcher />
+    </div>
+  </div>
+</template>

components/header/ThemeSwitcher.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set() {
+    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+  },
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      class="w-8 h-8"
+      @click="isDark = !isDark"
+    />
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>