jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix the color of dark mode

Browse source
This commit is contained in:
Yifei Hu 2024-07-10 12:59:34 +08:00
parent e14bb334ba
commit 10b38e392a
2 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
ui/components/ContextItem.tsx
View file

@ -17,8 +17,8 @@ interface ContextItemProps {
const ContextItem: React.FC<ContextItemProps> = ({ item }) => { const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
return ( return (
<div className="border p-4 rounded-lg mb-4"> <div className="border p-4 rounded-lg mb-4 dark:border-gray-700">
<h4 className="font-bold">{item.name}</h4> <h4 className="font-bold text-black dark:text-white">{item.name}</h4>
{item.image && ( {item.image && (
<Image <Image
src={item.image.contentUrl} src={item.image.contentUrl}
@ -28,8 +28,8 @@ const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
className="my-2 rounded" className="my-2 rounded"
/> />
)} )}
<p>{item.description}</p> <p className="text-black dark:text-white">{item.description}</p>
<div className="text-sm text-gray-500 mt-2"> <div className="text-sm text-gray-500 dark:text-gray-400 mt-2">
{item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()} {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
</div> </div>
<a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline"> <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">

10
ui/components/NewsDetail.tsx
View file

@ -39,14 +39,14 @@ interface NewsDetailProps {
const NewsDetail: React.FC<NewsDetailProps> = ({ news }) => { const NewsDetail: React.FC<NewsDetailProps> = ({ news }) => {
return ( return (
<article className="prose lg:prose-xl"> <article className="prose lg:prose-xl dark:prose-invert">
<h1>{news.title}</h1> <h1 className="text-black dark:text-white">{news.title}</h1>
{news.sections.map((section, index) => ( {news.sections.map((section, index) => (
<section key={index}> <section key={index}>
<h2>{section.title}</h2> <h2 className="text-black dark:text-white">{section.title}</h2>
<p>{section.content}</p> <p className="text-black dark:text-white">{section.content}</p>
<div className="mt-4"> <div className="mt-4">
<h3>Related Context:</h3> <h3 className="text-black dark:text-white">Related Context:</h3>
{section.context.map((item, i) => ( {section.context.map((item, i) => (
<ContextItem key={i} item={item} /> <ContextItem key={i} item={item} />
))} ))}