Add theme selection, dark/light mode selection

app/layouts/default.vue

@@ -1,15 +1,17 @@
 <template>
-    <ClientOnly>
-        <Sonner />
-    </ClientOnly>
-    <div class="w-full">
-        <header ref="header">
-            <AppHeader />
-        </header>
-        <main class="h-screen">
-            <slot />
-        </main>
-    </div>
+    <ThemeProvider>
+        <ClientOnly>
+            <Sonner />
+        </ClientOnly>
+        <div class="w-full">
+            <header ref="header">
+                <AppHeader />
+            </header>
+            <main class="h-screen">
+                <slot />
+            </main>
+        </div>
+    </ThemeProvider>
 </template>
 
 <script setup>
@@ -17,7 +19,8 @@ import 'vue-sonner/style.css'
 import Sonner from '@/components/ui/sonner/Sonner.vue';
 import AppHeader from '@/components/ui/internal/AppHeader.vue';
 
-import Headroom from "headroom.js";
+import Headroom from "headroom.js"; import ThemeProvider from '~/components/ui/provider/ThemeProvider.vue';
+
 
 const header = ref(null);
 
@@ -36,6 +39,17 @@ onMounted(() => {
     });
     headroom.init();
 });
+
+const colorMode = useColorMode()
+useHead({
+    link: [
+        {
+            rel: 'icon',
+            type: 'image/x-icon',
+            href: computed(() => colorMode.value === 'dark' ? 'favicon-dark.ico' : 'favicon.ico')
+        }
+    ]
+})
 </script>
 
 <style>