From 10b38e392aac680dabb4c28cb8b5ae6be9702458 Mon Sep 17 00:00:00 2001
From: Yifei Hu <normalmoc@icloud.com>
Date: Wed, 10 Jul 2024 12:59:34 +0800
Subject: [PATCH] fix the color of dark mode

---
 ui/components/ContextItem.tsx |  8 ++++----
 ui/components/NewsDetail.tsx  | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/components/ContextItem.tsx b/ui/components/ContextItem.tsx
index 59e77be..55d622a 100644
--- a/ui/components/ContextItem.tsx
+++ b/ui/components/ContextItem.tsx
@@ -17,8 +17,8 @@ interface ContextItemProps {
 
 const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
   return (
-    <div className="border p-4 rounded-lg mb-4">
-      <h4 className="font-bold">{item.name}</h4>
+    <div className="border p-4 rounded-lg mb-4 dark:border-gray-700">
+      <h4 className="font-bold text-black dark:text-white">{item.name}</h4>
       {item.image && (
         <Image
           src={item.image.contentUrl}
@@ -28,8 +28,8 @@ const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
           className="my-2 rounded"
         />
       )}
-      <p>{item.description}</p>
-      <div className="text-sm text-gray-500 mt-2">
+      <p className="text-black dark:text-white">{item.description}</p>
+      <div className="text-sm text-gray-500 dark:text-gray-400 mt-2">
         {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
       </div>
       <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
diff --git a/ui/components/NewsDetail.tsx b/ui/components/NewsDetail.tsx
index f296df2..96c425d 100644
--- a/ui/components/NewsDetail.tsx
+++ b/ui/components/NewsDetail.tsx
@@ -39,14 +39,14 @@ interface NewsDetailProps {
 
 const NewsDetail: React.FC<NewsDetailProps> = ({ news }) => {
   return (
-    <article className="prose lg:prose-xl">
-      <h1>{news.title}</h1>
+    <article className="prose lg:prose-xl dark:prose-invert">
+      <h1 className="text-black dark:text-white">{news.title}</h1>
       {news.sections.map((section, index) => (
         <section key={index}>
-          <h2>{section.title}</h2>
-          <p>{section.content}</p>
+          <h2 className="text-black dark:text-white">{section.title}</h2>
+          <p className="text-black dark:text-white">{section.content}</p>
           <div className="mt-4">
-            <h3>Related Context:</h3>
+            <h3 className="text-black dark:text-white">Related Context:</h3>
             {section.context.map((item, i) => (
               <ContextItem key={i} item={item} />
             ))}