Add dark mode support

mythz · mythz · commit 16f1d2067d5e · 2025-11-15T19:38:47.000+08:00
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -45,20 +45,20 @@ export default function HomePage() {
         </div>
 
         {/* Quick Install */}
-        <div className="mt-12 mx-auto max-w-3xl rounded-lg bg-muted">
-          <h3 className="font-semibold mb-4">Quick Install</h3>
+        <div className="mt-8 mx-auto max-w-3xl rounded-lg bg-muted p-6">
+          <h3 className="font-semibold mb-4 text-slate-900 dark:text-slate-100">Quick Install</h3>
           <CopyBlock>pip install llms-py</CopyBlock>
         </div>
 
         {/* Console Carousel Section */}
-        <div className="mt-12 w-full px-4">
+        <div className="mt-8 w-full px-4">
           <div className="w-full max-w-4xl mx-auto">
             <ConsoleCarousel screens={consoleScreens} />
           </div>
         </div>
 
-        <div className="mt-12 mx-auto max-w-3xl rounded-lg bg-muted">
-          <h3 className="font-semibold my-4">Run Server</h3>
+        <div className="mt-8 mx-auto max-w-3xl rounded-lg bg-muted p-6">
+          <h3 className="font-semibold mb-4 text-slate-900 dark:text-slate-100">Run Server</h3>
           <CopyBlock>llms --serve 8000</CopyBlock>
         </div>
       </div>
@@ -71,7 +71,7 @@ export default function HomePage() {
       {/* Getting Started Call-out */}
       <div className="w-full my-12 px-4">
         <div className="max-w-3xl mx-auto">
-          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-8 text-center shadow-lg">
+          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-8 text-center shadow-lg dark:shadow-blue-900/20">
             <h3 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
               Ready to Get Started?
             </h3>
@@ -81,7 +81,7 @@ export default function HomePage() {
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
               <Link
                 href="/docs"
-                className="px-8 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition-colors shadow-md hover:shadow-lg"
+                className="px-8 py-3 rounded-lg bg-blue-600 dark:bg-blue-600 text-white font-semibold hover:bg-blue-700 dark:hover:bg-blue-700 transition-colors shadow-md hover:shadow-lg"
               >
                 📚 View Documentation
               </Link>
diff --git a/app/global.css b/app/global.css
@@ -10,6 +10,14 @@
   --color-fd-muted-foreground: rgb(100 116 139); /* slate-500 - one more tad lighter */
 }
 
+:root.dark {
+  --color-fd-background: rgb(15 23 42); /* slate-900 */
+  --color-fd-card: rgb(30 41 59); /* slate-800 for sidebar */
+  --color-fd-primary: rgb(248 250 252); /* slate-50 for better contrast */
+  --color-fd-muted: rgb(51 65 85); /* slate-700 */
+  --color-fd-muted-foreground: rgb(148 163 184); /* slate-400 */
+}
+
 /* Code block background color - target all elements */
 pre,
 pre *,
@@ -53,4 +61,25 @@ figure:has(> pre) {
 
 :is(.dark .hover\:bg-fd-accent\/50:hover) {
   background-color: rgba(148 163 184 / 0.1) !important; /* slate-400 at 10% for dark mode hover */
+}
+
+/* Improve shadow visibility in dark mode */
+:is(.dark .shadow-sm) {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+}
+
+:is(.dark .shadow-md) {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
+:is(.dark .shadow-lg) {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+:is(.dark .shadow-xl) {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+}
+
+:is(.dark .shadow-2xl) {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,7 +9,7 @@ const inter = Inter({
 export default function Layout({ children }: LayoutProps<'/'>) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body className="flex flex-col min-h-screen">
+      <body className="flex flex-col min-h-screen bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">
         <RootProvider>{children}</RootProvider>
       </body>
     </html>
