Theme select & Accessability :^)

src/components/ThemeToggle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+
+const theme = ref('macchiato');
+
+onMounted(() => {
+  const stored = localStorage.getItem('theme');
+  if (stored) {
+    theme.value = stored;
+    document.documentElement.setAttribute('data-theme', stored);
+  }
+});
+
+function toggleTheme() {
+  const newTheme = theme.value === 'macchiato' ? 'latte' : 'macchiato';
+  theme.value = newTheme;
+  document.documentElement.setAttribute('data-theme', newTheme);
+  localStorage.setItem('theme', newTheme);
+}
+</script>
+
+<template>
+  <button 
+    @click="toggleTheme" 
+    class="btn btn-ghost btn-circle"
+    aria-label="Toggle Theme"
+  >
+    <Icon 
+      :icon="theme === 'macchiato' ? 'heroicons:moon' : 'heroicons:sun'" 
+      class="w-5 h-5" 
+    />
+  </button>
+</template>