Add dark mode

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

components/main/footer.vue

@@ -5,7 +5,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
 </script>
 
 <template>
-  <div class="py-5 border-t mt-5 text-zinc-700">
+  <div class="py-5 border-t dark:border-gray-800  mt-5 text-zinc-700 dark:text-zinc-300  ">
     <div class="px-6 container max-w-5xl mx-auto">
       <div class="grid grid-cols-1 md:grid-cols-3">
         <FooterSite v-if="path === 'about'" />
@@ -15,7 +15,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
         <FooterConnect />
       </div>
 
-      <div class="border-t mt-5 text-center p-2">
+      <div class="border-t dark:border-gray-800 mt-5 text-center p-2">
         © 2020-2023 No Right is reserved. Who cares 🤷‍♂️? It's
         <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
         anyway.

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>

components/main/hero.vue

@@ -2,10 +2,10 @@
   <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
-        <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
+        <h1 class="text-black dark:text-zinc-300   font-semibold leading-tight text-4xl md:text-5xl my-5">
           Welcome To My Blog Site
         </h1>
-        <p>
+        <p class="dark:text-zinc-300  ">
           Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles,
           Tips, Learning resources and more.
         </p>

components/main/recent.vue

@@ -37,8 +37,8 @@ useHead({
   <div class="pb-10">
     <div class="px-6">
       <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
-        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
-        <h2 class="text-4xl font-semibold text-black ">
+        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300  " />
+        <h2 class="text-4xl font-semibold text-black dark:text-zinc-300   ">
           Recent Post
         </h2>
       </div>

components/main/trending.vue

@@ -37,8 +37,8 @@ useHead({
   <div>
     <div class="px-6">
       <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
-        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
-        <h2 class="text-4xl font-semibold text-black ">
+        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300  " />
+        <h2 class="text-4xl font-semibold text-black dark:text-zinc-300  ">
           Trending Post
         </h2>
       </div>