Add dark mode

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

components/category/card.vue

@@ -33,7 +33,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <template>
   <div
-    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
+    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
   >
     <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
       <h1>#{{ title }}</h1>

components/category/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">
           Categories
         </h1>
-        <p>
+        <p class="dark:text-zinc-300">
           Blow All the topics are listed on which either I have written a blog or will write a blog
           in near future.
         </p>