From bbad5b79a6aa0479052d3dc494ab206e7af2c743 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Tue, 21 Oct 2025 16:32:40 +0200
Subject: [PATCH] feat: add light theme support for graph components

---
 ui/components/graphs/shared/constants.ts |  6 ++--
 ui/styles/globals.css                    | 40 +++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/ui/components/graphs/shared/constants.ts b/ui/components/graphs/shared/constants.ts
index 44e2d50414..93fbb8d1fe 100644
--- a/ui/components/graphs/shared/constants.ts
+++ b/ui/components/graphs/shared/constants.ts
@@ -21,13 +21,13 @@ export const STATUS_COLORS = {
 export const CHART_COLORS = {
   tooltipBorder: "var(--chart-border-emphasis)",
   tooltipBackground: "var(--chart-background)",
-  textPrimary: "#ffffff",
+  textPrimary: "var(--chart-text-primary)",
   textSecondary: "var(--chart-text-secondary)",
   gridLine: "var(--chart-border-emphasis)",
-  backgroundTrack: "rgba(51, 65, 85, 0.5)", // slate-700 with 50% opacity
+  backgroundTrack: "var(--chart-background-track)",
   alertPillBg: "var(--chart-alert-bg)",
   alertPillText: "var(--chart-alert-text)",
-  defaultColor: "#64748b", // slate-500
+  defaultColor: "var(--chart-text-secondary)",
 } as const;
 
 export const CHART_DIMENSIONS = {
diff --git a/ui/styles/globals.css b/ui/styles/globals.css
index f87555e889..7c817afb60 100644
--- a/ui/styles/globals.css
+++ b/ui/styles/globals.css
@@ -2,7 +2,7 @@
 @config "../tailwind.config.js";
 
 @theme {
-  /* Chart Severity Colors */
+  /* Chart Severity Colors - Dark Theme */
   --chart-info: #2e51b2;
   --chart-warning: #fdd34f;
   --chart-warning-emphasis: #ff7d19;
@@ -35,6 +35,25 @@
 
 @layer base {
   :root {
+    /* Light Theme Chart Colors */
+    --chart-info: #1e40af;
+    --chart-warning: #d97706;
+    --chart-warning-emphasis: #dc2626;
+    --chart-danger: #dc2626;
+    --chart-danger-emphasis: #991b1b;
+    --chart-success-color: #16a34a;
+    --chart-fail: #dc2626;
+    --chart-radar-primary: #9d174d;
+    --chart-text-primary: #1f2937;
+    --chart-text-secondary: #6b7280;
+    --chart-border: #d1d5db;
+    --chart-border-emphasis: #9ca3af;
+    --chart-background: #f9fafb;
+    --chart-background-track: rgba(229, 231, 235, 0.5);
+    --chart-alert-bg: #fecdd3;
+    --chart-alert-text: #be123c;
+
+    /* Chart HSL values */
     --chart-success: 146 80% 35%;
     --chart-fail: 339 90% 51%;
     --chart-muted: 45 93% 47%;
@@ -49,6 +68,25 @@
   }
 
   .dark {
+    /* Dark Theme Chart Colors */
+    --chart-info: #2e51b2;
+    --chart-warning: #fdd34f;
+    --chart-warning-emphasis: #ff7d19;
+    --chart-danger: #ff3077;
+    --chart-danger-emphasis: #971348;
+    --chart-success-color: #86da26;
+    --chart-fail: #db2b49;
+    --chart-radar-primary: #b51c80;
+    --chart-text-primary: #ffffff;
+    --chart-text-secondary: #94a3b8;
+    --chart-border: #475569;
+    --chart-border-emphasis: #334155;
+    --chart-background: #1e293b;
+    --chart-background-track: rgba(51, 65, 85, 0.5);
+    --chart-alert-bg: #432232;
+    --chart-alert-text: #f54280;
+
+    /* Chart HSL values */
     --chart-success: 146 80% 35%;
     --chart-fail: 339 90% 51%;
     --chart-muted: 45 93% 47%;