feat: 博客页支持深色模式

apps/frontend/app/(with-header-footer)/blog/[id]/BlogContent.tsx

@@ -19,7 +19,7 @@ export function BlogContent({ content }: { content?: string }) {
                 h3: ({ ...props }) => <h4 className="text-xl font-bold py-0.5" {...props} />,
                 h4: ({ ...props }) => <h5 className="text-lg font-bold" {...props} />,
                 h5: ({ ...props }) => <h6 className="text-md font-bold" {...props} />,
-                p: ({ ...props }) => <p className="py-1 text-zinc-700" {...props} />,
+                p: ({ ...props }) => <p className="py-1 text-zinc-700 dark:text-zinc-300" {...props} />,
                 img: ({ src }) => (
                     <PhotoProvider className="w-full">
                         <PhotoView src={src as string}>
@@ -29,8 +29,8 @@ export function BlogContent({ content }: { content?: string }) {
                         </PhotoView>
                     </PhotoProvider>
                 ),
-                th: ({ ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
+                th: ({ ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 dark:border-zinc-500 p-2" {...props} />,
-                td: ({ ...props }) => <td className="border border-zinc-300 p-1" {...props} />,
+                td: ({ ...props }) => <td className="border border-zinc-300 dark:border-zinc-500 p-1" {...props} />,
                 table: ({ ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,
                 pre: ({ ...props }) => <pre className="rounded-sm overflow-hidden shadow" {...props} />,
                 blockquote: ({ ...props }) => <blockquote className="pl-3 border-l-5" {...props} />,

apps/frontend/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx

@@ -37,7 +37,7 @@ export function BlogComments({ blogId }: { blogId: string }) {
                 handleClearReplayTarget={() => setReplayTarget(null)}
             />
 
-            <div className="text-sm text-zinc-600">
+            <div className="text-sm text-zinc-600 dark:text-zinc-400">
                 {
                     user ? (<span>当前账户：{user.nickname}</span>) : (<span>当前未登录，留言名称为匿名，登录可前往控制台</span>)
                 }
@@ -47,21 +47,21 @@ export function BlogComments({ blogId }: { blogId: string }) {
                 {
                     data.filter(d => !d.parentId)
                         .map((d) => (
-                            <div key={d.id} className="border-b border-zinc-300 py-2 last:border-none">
+                            <div key={d.id} className="border-b border-zinc-300 dark:border-zinc-500 py-2 last:border-none">
-                                <h1 className="text-zinc-500">{d.user ? d.user.nickname : '匿名'}</h1>
+                                <h1 className="text-zinc-500 dark:text-zinc-200">{d.user ? d.user.nickname : '匿名'}</h1>
                                 <div className="whitespace-pre-wrap break-all">{d.content}</div>
                                 <div className="text-xs text-zinc-500 flex gap-2">
                                     <p>{new Date(d.createdAt).toLocaleString()}</p>
                                     <p>{d.address}</p>
-                                    <p className="text-zinc-900 cursor-pointer" onClick={() => setReplayTarget(d)}>回复</p>
+                                    <p className="text-zinc-900 dark:text-zinc-200 cursor-pointer" onClick={() => setReplayTarget(d)}>回复</p>
                                 </div>
                                 {
                                     data.filter(c => c.parentId === d.id).length > 0 && (
                                         <div className="flex flex-col ml-5 my-1">
                                             {
                                                 data.filter(c => c.parentId === d.id).map(c => (
-                                                    <div key={c.id} className="border-b border-zinc-300 py-1 last:border-none">
+                                                    <div key={c.id} className="border-b border-zinc-300 dark:border-zinc-500 py-1 last:border-none">
-                                                        <h1 className="text-zinc-500">{c.user ? c.user.nickname : '匿名'}</h1>
+                                                        <h1 className="text-zinc-500 dark:text-zinc-200">{c.user ? c.user.nickname : '匿名'}</h1>
                                                         <div className="whitespace-pre-wrap break-all">{c.content}</div>
                                                         <div className="text-xs text-zinc-500 flex gap-2">
                                                             <p>{new Date().toLocaleString()}</p>

apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx

@@ -78,12 +78,12 @@ export default async function Page({ params, searchParams }: PageRouteProps) {
     return (
         <div className="w-full overflow-x-hidden">
             <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
-                {errorMsg && <div className="my-20 text-center text-zinc-600">{errorMsg}</div>}
+                {errorMsg && <div className="my-20 text-center text-zinc-600 dark:text-zinc-400">{errorMsg}</div>}
                 {data && (
                     <article className="w-full">
                         <header className="flex flex-col items-center">
                             <h1 className="text-center text-2xl sm:text-3xl font-bold mt-10 transition-all duration-500">{data.title}</h1>
-                            <time className="text-sm text-zinc-500 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
+                            <time className="text-sm text-zinc-500 dark:text-zinc-300 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
                         </header>
                         <BlogContent content={data.content} />
                     </article>

apps/frontend/app/(with-header-footer)/blog/page.tsx

@@ -54,11 +54,11 @@ export default async function Blog() {
                                 className="hover:underline focus:outline-none focus:ring-2 focus:ring-zinc-400 rounded"
                                 href={getBlogDetailUrl(blog.slug)}
                                 rel="noopener noreferrer"
-                            >
+                            >   
                                 {blog.title}
                             </a>
                         </h2>
-                        <p className="text-sm font-medium text-zinc-600">{blog.description}</p>
+                        <p className="text-sm font-medium text-zinc-600 dark:text-zinc-300">{blog.description}</p>
                         <footer className="mt-3 text-sm text-zinc-500 flex items-center gap-2">
                             <time dateTime={blog.createdAt}>
                                 {new Date(blog.createdAt).toLocaleString('zh-CN')}