Add theme selection, dark/light mode selection

app/components/ui/internal/AppHeader.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { Search } from 'lucide-vue-next';
+import ModeToggle from './ModeToggle.vue';
+import ThemeSelector from './ThemeSelector.vue';
+
+const colorMode = useColorMode()
+const logoPath = computed(() => {
+    return colorMode.value === 'dark' ? 'logo-dark.png' : 'logo.png'
+})
 </script>
 
 <template>
     <div class="flex items-center justify-center w-full p-4 gap-8 border-b">
         <div>
-            <NuxtImg src="logo.jpg" width="48" height="48" />
+            <ClientOnly>
+                <NuxtImg :src="logoPath" width="48" height="48" />
+            </ClientOnly>
         </div>
         <div>
             <Button variant="ghost">
@@ -18,13 +27,15 @@ import { Search } from 'lucide-vue-next';
                 Forum
             </Button>
         </div>
-        <div>
+        <div class="flex gap-4">
             <InputGroup>
                 <InputGroupInput placeholder="Search..." />
                 <InputGroupAddon>
                     <Search />
                 </InputGroupAddon>
             </InputGroup>
+            <ModeToggle />
+            <ThemeSelector />
         </div>
     </div>
 </template>