Merge pull request #66 from dikstub-rssa/fe-public-features-46

Feat(public): Implement Dark Mode + Adjustment Padding Frame

app/components/layout/Header.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ThemeToggle from "./ThemeToggle.vue"
+
 const route = useRoute()
 
 function setLinks() {
@@ -50,9 +52,10 @@ watch(
       <Separator orientation="vertical" class="h-4" />
       <PubBaseBreadcrumb :links="links" />
     </div>
-    <div class="ml-auto">
-      <slot />
-    </div>
+     <div class="ml-auto flex items-center gap-2">
+       <slot />
+       <ThemeToggle />
+     </div>
   </header>
 </template>
 

app/components/layout/ThemeToggle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useTheme } from '~/composables/useTheme'
+const { theme, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button
+    @click="toggleTheme"
+    class="ml-2 rounded border px-2 py-1 text-sm"
+    :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
+  >
+    <span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4 mt-1" /></span>
+    <span v-else><Icon name="i-lucide-sun" class="h-4 w-4 mt-1" /></span>
+  </button>
+</template>