From 71c9111905a11749bcc97891980514942bf2126b Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Wed, 20 Dec 2023 20:06:00 +0200
Subject: [PATCH] chore: enhance dark mode on articles

---
 components/project.vue       | 2 +-
 components/top-nav.vue       | 4 ++--
 pages/articles/[...slug].vue | 5 ++++-
 pages/articles/index.vue     | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/project.vue b/components/project.vue
index 15706d0..6b0dd56 100644
--- a/components/project.vue
+++ b/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
diff --git a/components/top-nav.vue b/components/top-nav.vue
index 5f28a42..d6feea2 100644
--- a/components/top-nav.vue
+++ b/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>
diff --git a/pages/articles/[...slug].vue b/pages/articles/[...slug].vue
index f2daf6d..b17b6b6 100644
--- a/pages/articles/[...slug].vue
+++ b/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>
diff --git a/pages/articles/index.vue b/pages/articles/index.vue
index e9c4662..47d0d6b 100644
--- a/pages/articles/index.vue
+++ b/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>