Merge pull request #9 from aidmax/claude/add-dark-mode-support-z9Csc

aidmax · web-flow · commit 0e6c95029981 · 2026-04-01T07:00:01.000+03:00
Add dark mode support with system preference detection
diff --git a/client/index.html b/client/index.html
@@ -14,6 +14,18 @@
     <link rel="shortcut icon" href="/favicon.ico?v=2" />
     <!-- Apple touch icon -->
     <link rel="apple-touch-icon" sizes="180x180" href="/favicon-32x32.png?v=2" />
+    <script>
+      (function () {
+        try {
+          var stored = localStorage.getItem("theme");
+          if (stored === "dark") {
+            document.documentElement.classList.add("dark");
+          } else if (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            document.documentElement.classList.add("dark");
+          }
+        } catch (_) {}
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/client/src/hooks/use-theme.ts b/client/src/hooks/use-theme.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+
+type Theme = "light" | "dark";
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    try {
+      const stored = localStorage.getItem("theme") as Theme | null;
+      if (stored === "light" || stored === "dark") return stored;
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } catch {
+      return "light";
+    }
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    try {
+      localStorage.setItem("theme", theme);
+    } catch (_) {}
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+
+  return { theme, toggleTheme };
+}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
@@ -11,6 +11,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Card, CardContent } from "@/components/ui/card";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/hooks/use-toast";
+import { useTheme } from "@/hooks/use-theme";
 import {
   Zap,
   Copy,
@@ -26,7 +27,9 @@ import {
   Smile,
   Calendar,
   Info,
-  Utensils
+  Utensils,
+  Sun,
+  Moon
 } from "lucide-react";
 
 const rpeOptions = [
@@ -170,6 +173,7 @@ function generateMarkdown(data: InsertWorkout): string {
 
 export default function Home() {
   const { toast } = useToast();
+  const { theme, toggleTheme } = useTheme();
   const [markdownOutput, setMarkdownOutput] = useState("");
   
   const form = useForm<InsertWorkout>({
@@ -276,6 +280,13 @@ export default function Home() {
             <div className="text-sm text-gray-500 dark:text-gray-400 text-center sm:text-right">
               Privacy-first training journal for cyclists
             </div>
+            <button
+              onClick={toggleTheme}
+              aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+              className="p-2 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 transition-colors"
+            >
+              {theme === "dark" ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
           </div>
         </div>
       </header>
@@ -296,14 +307,14 @@ export default function Home() {
                 <Form {...form}>
                   <form className="space-y-6">
                     {/* Date Section */}
-                    <div className="bg-gray-50 rounded-lg p-4">
+                    <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                       <FormField
                         control={form.control}
                         name="workoutDate"
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel className="flex items-center gap-2">
-                              <Calendar className="w-4 h-4 text-blue-600" />
+                              <Calendar className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                               Workout Date
                             </FormLabel>
                             <FormControl>
