chore: enhance dark mode on articles

components/project.vue

@@ -11,7 +11,7 @@ const props = defineProps<Props>();
 
 <template>
   <div
-    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4 md:dark:border-slate-400"
+    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4 md:dark:border-slate-600"
   >
     <ULink :to="props.url" target="_blank">
       <NuxtImg

components/top-nav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-b">
+  <div class="border-b dark:border-b-slate-600">
     <UContainer class="grid grid-cols-2 items-center gap-3 !py-2" as="nav">
       <ULink to="/" class="flex gap-3 items-center">
         <nuxt-img
@@ -8,7 +8,7 @@
           src="mariosant.webp"
           class="w-10 h-10 rounded-full border dark:border-gray-800 dark:bg-slate-300 block"
         />
-        <div class="text-slate-800 font-bold">Marios Antonoudiou</div>
+        <div class="font-bold">Marios Antonoudiou</div>
       </ULink>
       <div class="flex gap-3 items-center justify-end"></div>
     </UContainer>

pages/articles/[...slug].vue

@@ -10,7 +10,10 @@ const { path } = useRoute();
 
 <template>
   <ContentDoc :path="path" v-slot="{ doc }">
-    <UContainer class="flex flex-col gap-3 prose" as="article">
+    <UContainer
+      class="flex flex-col gap-3 prose dark:prose-invert"
+      as="article"
+    >
       <div class="text-sm text-slate-500">
         Published at {{ formatDate(new Date(doc.date), "Do of MMMM YYYY") }}
       </div>

pages/articles/index.vue

@@ -5,7 +5,7 @@ definePageMeta({
 </script>
 
 <template>
-  <UContainer class="flex flex-col gap-3 prose">
+  <UContainer class="flex flex-col gap-3 prose dark:prose-invert">
     <h1>Articles</h1>
   </UContainer>