dark mode

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));
+}