From 2c9074538e56bc21cda94ecc6523ec3b8a8a3bab Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 17 Nov 2025 18:24:13 +0800
Subject: [PATCH] Fine-tune dark mode color layering for body, meta, and
 excerpts

---
 app/blog/[slug]/page.tsx      | 4 ++--
 components/post-list-item.tsx | 6 +++---
 tailwind.config.js            | 7 ++++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 114e119..beb1d9c 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -43,7 +43,7 @@ export default function BlogPostPage({ params }: Props) {
         <div className="flex-1">
           <header className="mb-6 space-y-2">
             {post.published_at && (
-              <p className="text-xs text-slate-500 dark:text-slate-400">
+              <p className="text-xs text-slate-500 dark:text-slate-500">
                 {new Date(post.published_at).toLocaleDateString(
                   siteConfig.defaultLocale
                 )}
@@ -57,7 +57,7 @@ export default function BlogPostPage({ params }: Props) {
                 {post.tags.map((t) => (
                   <span
                     key={t}
-                    className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-slate-800 dark:text-slate-200"
+                    className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-slate-800 dark:text-slate-300"
                   >
                     #{t}
                   </span>
diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index 0ef5a76..e3e7826 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -31,7 +31,7 @@ export function PostListItem({ post }: Props) {
           )}
           <div className="flex-1 space-y-1.5">
             {post.published_at && (
-              <p className="text-xs text-slate-500 dark:text-slate-400">
+              <p className="text-xs text-slate-500 dark:text-slate-500">
                 {new Date(post.published_at).toLocaleDateString(
                   siteConfig.defaultLocale
                 )}
@@ -45,7 +45,7 @@ export function PostListItem({ post }: Props) {
                 {post.tags.slice(0, 4).map((t) => (
                   <span
                     key={t}
-                    className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600 group-hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-slate-700"
+                    className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600 group-hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:group-hover:bg-slate-700"
                   >
                     #{t}
                   </span>
@@ -53,7 +53,7 @@ export function PostListItem({ post }: Props) {
               </div>
             )}
             {excerpt && (
-              <p className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-200 dark:group-hover:text-slate-100">
+              <p className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
                 {excerpt}
               </p>
             )}
diff --git a/tailwind.config.js b/tailwind.config.js
index 269167b..6af7553 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,7 +41,8 @@ module.exports = {
         },
         dark: {
           css: {
-            color: theme('colors.slate.50'),
+            // Slightly softer than pure white for body text
+            color: theme('colors.slate.200'),
             a: {
               color: theme('colors.blue.400'),
               '&:hover': {
@@ -57,9 +58,9 @@ module.exports = {
             blockquote: {
               borderLeftColor: theme('colors.blue.500'),
               backgroundColor: theme('colors.slate.800'),
-              color: theme('colors.slate.50'),
+              color: theme('colors.slate.200'),
               p: {
-                color: theme('colors.slate.50')
+                color: theme('colors.slate.200')
               }
             },
             code: {