From 84bd9627442f33739610d6eee44d179075875649 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 14 Mar 2026 15:47:29 -0500
Subject: [PATCH] dark mode

---
 client/src/index.css                   | 54 ++++++++++++++++++++++++++
 client/src/modules/gantt/GanttPage.tsx |  8 +++-
 client/src/modules/login/LoginPage.tsx |  3 +-
 client/src/theme/ThemeProvider.tsx     |  2 +-
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 4da6e62..7219984 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -5,6 +5,7 @@
 @tailwind utilities;
 
 :root {
+  color-scheme: light;
   --font-family: "Manrope";
   --color-brand: 24 90 219;
   --color-accent: 0 166 166;
@@ -16,6 +17,7 @@
 }
 
 .dark {
+  color-scheme: dark;
   --color-brand: 63 140 255;
   --color-accent: 34 211 238;
   --color-surface: 30 41 59;
@@ -40,8 +42,60 @@ body {
   font-family: var(--font-family), sans-serif;
 }
 
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+input:not([type="color"]),
+textarea,
+select {
+  color: rgb(var(--color-text));
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: rgb(var(--color-muted));
+}
+
 .gantt-theme .wx-bar,
 .gantt-theme .wx-task {
   fill: rgb(var(--color-brand));
 }
 
+.gantt-theme {
+  --wx-font-family: var(--font-family), sans-serif;
+  --wx-background: rgb(var(--color-page));
+  --wx-background-alt: rgb(var(--color-surface));
+  --wx-color-font: rgb(var(--color-text));
+  --wx-color-secondary-font: rgb(var(--color-muted));
+  --wx-color-font-disabled: rgb(var(--color-muted));
+  --wx-color-link: rgb(var(--color-brand));
+  --wx-color-primary: rgb(var(--color-brand));
+  --wx-icon-color: rgb(var(--color-muted));
+  --wx-border: 1px solid rgb(var(--color-line));
+  --wx-box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
+}
+
+.gantt-theme .wx-layout,
+.gantt-theme .wx-scale,
+.gantt-theme .wx-gantt,
+.gantt-theme .wx-table-container {
+  background-color: rgb(var(--color-page));
+  color: rgb(var(--color-text));
+}
+
+.gantt-theme .wx-grid,
+.gantt-theme .wx-cell,
+.gantt-theme .wx-row,
+.gantt-theme .wx-text,
+.gantt-theme .wx-task-name {
+  color: rgb(var(--color-text));
+}
+
+.gantt-theme .wx-cell,
+.gantt-theme .wx-row {
+  border-color: rgb(var(--color-line));
+}
diff --git a/client/src/modules/gantt/GanttPage.tsx b/client/src/modules/gantt/GanttPage.tsx
index 37a82cf..b87a353 100644
--- a/client/src/modules/gantt/GanttPage.tsx
+++ b/client/src/modules/gantt/GanttPage.tsx
@@ -6,9 +6,11 @@ import type { GanttLinkDto, GanttTaskDto } from "@mrp/shared";
 
 import { useAuth } from "../../auth/AuthProvider";
 import { api } from "../../lib/api";
+import { useTheme } from "../../theme/ThemeProvider";
 
 export function GanttPage() {
   const { token } = useAuth();
+  const { mode } = useTheme();
   const [tasks, setTasks] = useState<GanttTaskDto[]>([]);
   const [links, setLinks] = useState<GanttLinkDto[]>([]);
 
@@ -28,7 +30,11 @@ export function GanttPage() {
       <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Planning</p>
       <h3 className="mt-3 text-2xl font-bold text-text">SVAR Gantt Preview</h3>
       <p className="mt-2 text-sm text-muted">Theme-aware integration wrapper prepared for future manufacturing schedules and task dependencies.</p>
-      <div className="gantt-theme mt-6 overflow-hidden rounded-2xl border border-line/70 bg-page/70 p-4">
+      <div
+        className={`gantt-theme mt-6 overflow-hidden rounded-2xl border border-line/70 bg-page/70 p-4 ${
+          mode === "dark" ? "wx-willow-dark-theme" : "wx-willow-theme"
+        }`}
+      >
         <Gantt
           tasks={tasks.map((task) => ({
             ...task,
diff --git a/client/src/modules/login/LoginPage.tsx b/client/src/modules/login/LoginPage.tsx
index a03d225..cb8499e 100644
--- a/client/src/modules/login/LoginPage.tsx
+++ b/client/src/modules/login/LoginPage.tsx
@@ -59,7 +59,7 @@ export function LoginPage() {
                 className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand"
               />
             </label>
-            {error ? <div className="rounded-2xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div> : null}
+            {error ? <div className="rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200 dark:text-red-200">{error}</div> : null}
             <button
               type="submit"
               disabled={isSubmitting}
@@ -73,4 +73,3 @@ export function LoginPage() {
     </div>
   );
 }
-
diff --git a/client/src/theme/ThemeProvider.tsx b/client/src/theme/ThemeProvider.tsx
index 6e209d4..661a6bf 100644
--- a/client/src/theme/ThemeProvider.tsx
+++ b/client/src/theme/ThemeProvider.tsx
@@ -22,6 +22,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     document.documentElement.classList.toggle("dark", mode === "dark");
+    document.documentElement.style.colorScheme = mode;
     window.localStorage.setItem(storageKey, mode);
   }, [mode]);
 
@@ -55,4 +56,3 @@ export function useTheme() {
   }
   return context;
 }
-