Add dark mode

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/main/header.vue

@@ -2,13 +2,18 @@
 const route = useRoute()
 
 const path = computed(() => route.fullPath.replace('/', ''))
+
+const colorMode = useColorMode()
+function onClick(val: string) {
+  colorMode.preference = val
+}
 </script>
 
 <template>
-  <div class="py-5 border-b font-semibold">
+  <div class="py-5 border-b dark:border-gray-800  font-semibold">
     <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline ">
       <ul class="flex items-baseline space-x-5">
-        <li class="text-lg sm:text-2xl font-bold">
+        <li class="text-base sm:text-2xl font-bold">
           <NuxtLink to="/" :class="{ underline: path === '' }">
             Riyad's Blog
           </NuxtLink>
@@ -30,6 +35,31 @@ const path = computed(() => route.fullPath.replace('/', ''))
             About
           </NuxtLink>
         </li>
+        <li>
+          <ClientOnly>
+            <button
+              v-if="colorMode.value === 'dark'"
+              name="dark-mode" title="Dark"
+              class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
+              @click="onClick('light')"
+            >
+              <Icon name="icon-park:moon" size="20" />
+            </button>
+            <button
+              v-if="colorMode.value === 'light'"
+              name="light-mode"
+              title="Light"
+              class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
+              @click="onClick('dark')"
+            >
+              <Icon name="noto:sun" size="20" />
+            </button>
+            <template #fallback>
+              <!-- this will be rendered on server side -->
+              <Icon name="svg-spinners:180-ring" size="20" />
+            </template>
+          </ClientOnly>
+        </li>
       </ul>
     </div>
   </div>