Fix post detail readability and add light/dark theme toggle

src/app/globals.css

@@ -1,35 +1,48 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-  --background: #ffffff;
+  --background: #f8fafc;
-  --foreground: #171717;
+  --foreground: #0f172a;
+  --markdown-heading: #0f172a;
+  --markdown-body: #334155;
+  --markdown-link: #2563eb;
+  --markdown-link-hover: #1d4ed8;
+  --markdown-rule: #cbd5e1;
+  color-scheme: light;
+}
+
+:root.dark {
+  --background: #020617;
+  --foreground: #e2e8f0;
+  --markdown-heading: #f8fafc;
+  --markdown-body: #cbd5e1;
+  --markdown-link: #60a5fa;
+  --markdown-link-hover: #93c5fd;
+  --markdown-rule: #334155;
+  color-scheme: dark;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-inter);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Markdown content styles */
+.markdown-content {
+  color: var(--markdown-body);
+}
+
 .markdown-content h1 {
   font-size: 1.5rem;
   font-weight: 700;
-  color: #f4f4f5;
+  color: var(--markdown-heading);
   margin-bottom: 0.75rem;
   margin-top: 1rem;
 }
@@ -37,7 +50,7 @@ body {
 .markdown-content h2 {
   font-size: 1.25rem;
   font-weight: 600;
-  color: #e4e4e7;
+  color: var(--markdown-heading);
   margin-bottom: 0.5rem;
   margin-top: 0.75rem;
 }
@@ -45,13 +58,13 @@ body {
 .markdown-content h3 {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #d4d4d8;
+  color: var(--markdown-heading);
   margin-bottom: 0.5rem;
   margin-top: 0.75rem;
 }
 
 .markdown-content p {
-  color: #a1a1aa;
+  color: var(--markdown-body);
   margin-bottom: 0.75rem;
   line-height: 1.625;
 }
@@ -63,26 +76,26 @@ body {
 }
 
 .markdown-content li {
-  color: #a1a1aa;
+  color: var(--markdown-body);
   margin-bottom: 0.25rem;
 }
 
 .markdown-content a {
-  color: #60a5fa;
+  color: var(--markdown-link);
   text-decoration: none;
 }
 
 .markdown-content a:hover {
-  color: #93c5fd;
+  color: var(--markdown-link-hover);
   text-decoration: underline;
 }
 
 .markdown-content hr {
-  border-color: #3f3f46;
+  border-color: var(--markdown-rule);
   margin: 1rem 0;
 }
 
 .markdown-content strong {
-  color: #e4e4e7;
+  color: var(--markdown-heading);
   font-weight: 600;
 }

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { Suspense, useState, useEffect, useMemo } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { format } from "date-fns";
 import ReactMarkdown from "react-markdown";
@@ -16,19 +16,53 @@ interface Message {
   tags?: string[];
 }
 
+type Theme = "light" | "dark";
+
 export default function BlogPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-white dark:bg-slate-950 flex items-center justify-center">
+          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+        </div>
+      }
+    >
+      <BlogPageContent />
+    </Suspense>
+  );
+}
+
+function BlogPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const selectedTag = searchParams.get("tag");
+  const selectedPostId = searchParams.get("post");
   
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
+  const [theme, setTheme] = useState<Theme>("light");
 
   useEffect(() => {
     fetchMessages();
   }, []);
 
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("theme");
+    const initialTheme: Theme =
+      storedTheme === "light" || storedTheme === "dark"
+        ? storedTheme
+        : window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+    setTheme(initialTheme);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
   async function fetchMessages() {
     try {
       const res = await fetch("/api/messages");
@@ -71,6 +105,13 @@ export default function BlogPage() {
   // Get featured post (most recent)
   const featuredPost = filteredMessages[0];
   const regularPosts = filteredMessages.slice(1);
+  const selectedPost = useMemo(
+    () =>
+      selectedPostId
+        ? messages.find((message) => message.id === selectedPostId) ?? null
+        : null,
+    [messages, selectedPostId]
+  );
 
   // Parse title from content
   function getTitle(content: string): string {
@@ -92,7 +133,7 @@ export default function BlogPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-white dark:bg-slate-950 flex items-center justify-center">
         <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
       </div>
     );
@@ -105,25 +146,33 @@ export default function BlogPage() {
         <meta name="description" content="AI-powered daily digests on iOS, AI coding assistants, and indie hacking" />
       </Head>
 
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-white text-gray-900 dark:bg-slate-950 dark:text-slate-100">
         {/* Header */}
-        <header className="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur z-50">
+        <header className="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur z-50 dark:border-slate-800 dark:bg-slate-950/95">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="flex items-center justify-between h-16">
               <Link href="/" className="flex items-center gap-2">
                 <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
                   📓
                 </div>
-                <span className="font-bold text-xl text-gray-900">Daily Digest</span>
+                <span className="font-bold text-xl text-gray-900 dark:text-slate-100">Daily Digest</span>
               </Link>
               
-              <nav className="hidden md:flex items-center gap-6">
+              <nav className="flex items-center gap-4 md:gap-6">
-                <Link href="https://gantt-board.vercel.app" className="text-sm text-gray-600 hover:text-gray-900">
+                <Link href="https://gantt-board.vercel.app" className="hidden md:inline text-sm text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-slate-100">
                   Tasks
                 </Link>
-                <Link href="https://mission-control-rho-pink.vercel.app" className="text-sm text-gray-600 hover:text-gray-900">
+                <Link href="https://mission-control-rho-pink.vercel.app" className="hidden md:inline text-sm text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-slate-100">
                   Mission Control
                 </Link>
+                <button
+                  type="button"
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  className="px-3 py-1.5 rounded-lg border border-gray-300 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
+                  aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+                >
+                  {theme === "dark" ? "Light mode" : "Dark mode"}
+                </button>
               </nav>
             </div>
           </div>
@@ -133,17 +182,68 @@ export default function BlogPage() {
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
             {/* Main Content */}
             <div className="lg:col-span-8">
+              {selectedPostId ? (
+                selectedPost ? (
+                  <article>
+                    <button
+                      onClick={() => router.push("/")}
+                      className="mb-6 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                    >
+                      ← Back to all posts
+                    </button>
+
+                    <header className="mb-8">
+                      {selectedPost.tags && selectedPost.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-2 mb-4">
+                          {selectedPost.tags.map((tag) => (
+                            <button
+                              key={tag}
+                              onClick={() => router.push(`/?tag=${tag}`)}
+                              className="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium dark:bg-blue-900/40 dark:text-blue-200"
+                            >
+                              {tag}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                      <h1 className="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-3">
+                        {getTitle(selectedPost.content)}
+                      </h1>
+                      <p className="text-sm text-gray-500 dark:text-slate-400">
+                        {format(new Date(selectedPost.date), "MMMM d, yyyy")}
+                      </p>
+                    </header>
+
+                    <div className="markdown-content">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {selectedPost.content}
+                      </ReactMarkdown>
+                    </div>
+                  </article>
+                ) : (
+                  <div className="text-center py-16">
+                    <p className="text-gray-500 dark:text-slate-400">Post not found.</p>
+                    <button
+                      onClick={() => router.push("/")}
+                      className="mt-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                    >
+                      Back to all posts
+                    </button>
+                  </div>
+                )
+              ) : (
+                <>
               {/* Page Title */}
               <div className="mb-8">
-                <h1 className="text-3xl font-bold text-gray-900 mb-2">
+                <h1 className="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
                   {selectedTag ? `Posts tagged "${selectedTag}"` : "Latest Posts"}
                 </h1>
-                <p className="text-gray-600">
+                <p className="text-gray-600 dark:text-slate-300">
                   {filteredMessages.length} post{filteredMessages.length !== 1 ? "s" : ""}
                   {selectedTag && (
                     <button
                       onClick={() => router.push("/")}
-                      className="ml-4 text-blue-600 hover:text-blue-800 text-sm"
+                      className="ml-4 text-blue-600 hover:text-blue-800 text-sm dark:text-blue-400 dark:hover:text-blue-300"
                     >
                       Clear filter →
                     </button>
@@ -155,30 +255,30 @@ export default function BlogPage() {
               {featuredPost && !selectedTag && !searchQuery && (
                 <article className="mb-10">
                   <Link href={`/?post=${featuredPost.id}`} className="group block">
-                    <div className="relative bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-blue-300 transition-colors">
+                    <div className="relative bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-blue-300 transition-colors dark:bg-slate-900 dark:border-slate-800 dark:hover:border-blue-500">
                       <div className="p-6 md:p-8">
                         {featuredPost.tags && featuredPost.tags.length > 0 && (
                           <div className="flex flex-wrap gap-2 mb-4">
                             {featuredPost.tags.slice(0, 3).map((tag) => (
                               <span
                                 key={tag}
-                                className="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium"
+                                className="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium dark:bg-blue-900/40 dark:text-blue-200"
                               >
                                 {tag}
                               </span>
                             ))}
                           </div>
                         )}
-                        <span className="text-sm text-blue-600 font-medium mb-2 block">
+                        <span className="text-sm text-blue-600 font-medium mb-2 block dark:text-blue-400">
                           Featured Post
                         </span>
-                        <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
+                        <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                           {getTitle(featuredPost.content)}
                         </h2>
-                        <p className="text-gray-600 mb-4 line-clamp-3">
+                        <p className="text-gray-600 dark:text-slate-300 mb-4 line-clamp-3">
                           {getExcerpt(featuredPost.content, 200)}
                         </p>
-                        <div className="flex items-center gap-4 text-sm text-gray-500">
+                        <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-slate-400">
                           <span>{format(new Date(featuredPost.date), "MMMM d, yyyy")}</span>
                           <span>·</span>
                           <span>5 min read</span>
@@ -194,14 +294,14 @@ export default function BlogPage() {
                 {regularPosts.map((post) => (
                   <article
                     key={post.id}
-                    className="flex gap-4 md:gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200"
+                    className="flex gap-4 md:gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200 dark:hover:bg-slate-900 dark:hover:border-slate-700"
                   >
                     {/* Date Column */}
                     <div className="hidden sm:block text-center min-w-[60px]">
-                      <div className="text-2xl font-bold text-gray-900">
+                      <div className="text-2xl font-bold text-gray-900 dark:text-slate-100">
                         {format(new Date(post.date), "d")}
                       </div>
-                      <div className="text-xs text-gray-500 uppercase">
+                      <div className="text-xs text-gray-500 dark:text-slate-400 uppercase">
                         {format(new Date(post.date), "MMM")}
                       </div>
                     </div>
@@ -214,7 +314,7 @@ export default function BlogPage() {
                             <button
                               key={tag}
                               onClick={() => router.push(`/?tag=${tag}`)}
-                              className="text-xs text-blue-600 hover:text-blue-800 font-medium"
+                              className="text-xs text-blue-600 hover:text-blue-800 font-medium dark:text-blue-400 dark:hover:text-blue-300"
                             >
                               #{tag}
                             </button>
@@ -222,15 +322,17 @@ export default function BlogPage() {
                         </div>
                       )}
                       
-                      <h3 className="text-lg md:text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 cursor-pointer">
+                      <h3 className="text-lg md:text-xl font-semibold text-gray-900 dark:text-slate-100 mb-2 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer">
+                        <Link href={`/?post=${post.id}`}>
                           {getTitle(post.content)}
+                        </Link>
                       </h3>
                       
-                      <p className="text-gray-600 text-sm line-clamp-2 mb-3">
+                      <p className="text-gray-600 dark:text-slate-300 text-sm line-clamp-2 mb-3">
                         {getExcerpt(post.content)}
                       </p>
                       
-                      <div className="flex items-center gap-3 text-xs text-gray-500">
+                      <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-slate-400">
                         <span>{format(new Date(post.date), "MMMM d, yyyy")}</span>
                         <span>·</span>
                         <span>3 min read</span>
@@ -242,27 +344,29 @@ export default function BlogPage() {
 
               {filteredMessages.length === 0 && (
                 <div className="text-center py-16">
-                  <p className="text-gray-500">No posts found.</p>
+                  <p className="text-gray-500 dark:text-slate-400">No posts found.</p>
                   {(selectedTag || searchQuery) && (
                     <button
                       onClick={() => {
                         router.push("/");
                         setSearchQuery("");
                       }}
-                      className="mt-2 text-blue-600 hover:text-blue-800"
+                      className="mt-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                     >
                       Clear filters
                     </button>
                   )}
                 </div>
               )}
+                </>
+              )}
             </div>
 
             {/* Sidebar */}
             <div className="lg:col-span-4 space-y-6">
               {/* Search */}
-              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
+              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-slate-200 mb-2">
                   Search
                 </label>
                 <input
@@ -270,13 +374,13 @@ export default function BlogPage() {
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   placeholder="Search posts..."
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-950 dark:border-slate-700 dark:text-slate-100 dark:placeholder:text-slate-500"
                 />
               </div>
 
               {/* Tags */}
-              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
+              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
-                <h3 className="font-semibold text-gray-900 mb-3">Tags</h3>
+                <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-3">Tags</h3>
                 <div className="flex flex-wrap gap-2">
                   {allTags.map((tag) => (
                     <button
@@ -287,7 +391,7 @@ export default function BlogPage() {
                       className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
                         selectedTag === tag
                           ? "bg-blue-600 text-white"
-                          : "bg-white text-gray-700 border border-gray-300 hover:border-blue-400"
+                          : "bg-white text-gray-700 border border-gray-300 hover:border-blue-400 dark:bg-slate-950 dark:text-slate-200 dark:border-slate-700 dark:hover:border-blue-500"
                       }`}
                     >
                       {tag}
@@ -297,25 +401,25 @@ export default function BlogPage() {
               </div>
 
               {/* About */}
-              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
+              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
-                <h3 className="font-semibold text-gray-900 mb-2">About</h3>
+                <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2">About</h3>
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-gray-600 dark:text-slate-300">
                   Daily curated digests covering AI coding assistants, iOS development, 
                   OpenClaw updates, and digital entrepreneurship.
                 </p>
               </div>
 
               {/* Stats */}
-              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
+              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
-                <h3 className="font-semibold text-gray-900 mb-3">Stats</h3>
+                <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-3">Stats</h3>
                 <div className="space-y-2 text-sm">
                   <div className="flex justify-between">
-                    <span className="text-gray-600">Total posts</span>
+                    <span className="text-gray-600 dark:text-slate-300">Total posts</span>
-                    <span className="font-medium">{messages.length}</span>
+                    <span className="font-medium dark:text-slate-100">{messages.length}</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-gray-600">Tags</span>
+                    <span className="text-gray-600 dark:text-slate-300">Tags</span>
-                    <span className="font-medium">{allTags.length}</span>
+                    <span className="font-medium dark:text-slate-100">{allTags.length}</span>
                   </div>
                 </div>
               </div>
@@ -324,9 +428,9 @@ export default function BlogPage() {
         </div>
 
         {/* Footer */}
-        <footer className="border-t border-gray-200 mt-16">
+        <footer className="border-t border-gray-200 dark:border-slate-800 mt-16">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <p className="text-center text-gray-500 text-sm">
+            <p className="text-center text-gray-500 dark:text-slate-400 text-sm">
               © {new Date().getFullYear()} OpenClaw Daily Digest
             </p>
           </div>