From 57f0bf6b4b432d154a9ee743c63681e74c405aab Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Wed, 11 Feb 2026 22:43:52 -0500
Subject: [PATCH] fix: add dark mode support using MUI CSS variables

Replace all hardcoded colors with Headlamp's MUI CSS variables to ensure
proper theme support in both light and dark modes. This fixes the issue
where plugin UI elements had white backgrounds when the site switched to
dark mode.

Changes:
- PolarisSettings: Use theme variables for input, button, text colors
- ExemptionManager: Use theme variables for all buttons and UI elements
- DashboardView: Use theme variables for refresh button
- AppBarScoreBadge: Keep semantic colors (green/orange/red) for status

CSS Variables Used:
- --mui-palette-primary-main: Primary action color
- --mui-palette-primary-contrastText: Text on primary bg
- --mui-palette-background-paper: Card/paper backgrounds
- --mui-palette-text-primary: Primary text color
- --mui-palette-text-secondary: Secondary text color
- --mui-palette-divider: Border/divider colors
- --mui-palette-action-disabled: Disabled text color
- --mui-palette-action-disabledBackground: Disabled bg color
- --mui-palette-error-main: Error/danger actions

All tests passing (50/50), build successful.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
---
 src/components/DashboardView.tsx    |  4 ++--
 src/components/ExemptionManager.tsx | 30 +++++++++++++++++++++--------
 src/components/PolarisSettings.tsx  | 20 +++++++++++++++----
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/DashboardView.tsx b/src/components/DashboardView.tsx
index 5f358d4..857f288 100644
--- a/src/components/DashboardView.tsx
+++ b/src/components/DashboardView.tsx
@@ -117,8 +117,8 @@ export default function DashboardView() {
               style={{
                 padding: '6px 16px',
                 backgroundColor: 'transparent',
-                color: '#1976d2',
-                border: '1px solid #1976d2',
+                color: 'var(--mui-palette-primary-main, #1976d2)',
+                border: '1px solid var(--mui-palette-primary-main, #1976d2)',
                 borderRadius: '4px',
                 cursor: 'pointer',
                 fontSize: '13px',
diff --git a/src/components/ExemptionManager.tsx b/src/components/ExemptionManager.tsx
index 20bb4c9..46c8b49 100644
--- a/src/components/ExemptionManager.tsx
+++ b/src/components/ExemptionManager.tsx
@@ -149,8 +149,8 @@ export default function ExemptionManager({
                 <button
                   style={{
                     padding: '4px 12px',
-                    backgroundColor: '#f44336',
-                    color: 'white',
+                    backgroundColor: 'var(--mui-palette-error-main, #f44336)',
+                    color: 'var(--mui-palette-error-contrastText, #fff)',
                     border: 'none',
                     borderRadius: '4px',
                     cursor: 'pointer',
@@ -176,10 +176,19 @@ export default function ExemptionManager({
           style={{
             marginTop: '8px',
             padding: '6px 16px',
-            backgroundColor: failingChecks.length === 0 ? '#ccc' : 'transparent',
-            color: failingChecks.length === 0 ? '#999' : '#1976d2',
+            backgroundColor:
+              failingChecks.length === 0
+                ? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+                : 'transparent',
+            color:
+              failingChecks.length === 0
+                ? 'var(--mui-palette-action-disabled, #9e9e9e)'
+                : 'var(--mui-palette-primary-main, #1976d2)',
             border: '1px solid',
-            borderColor: failingChecks.length === 0 ? '#ccc' : '#1976d2',
+            borderColor:
+              failingChecks.length === 0
+                ? 'var(--mui-palette-divider, #e0e0e0)'
+                : 'var(--mui-palette-primary-main, #1976d2)',
             borderRadius: '4px',
             cursor: failingChecks.length === 0 ? 'not-allowed' : 'pointer',
             fontSize: '13px',
@@ -237,7 +246,7 @@ export default function ExemptionManager({
               style={{
                 padding: '6px 16px',
                 backgroundColor: 'transparent',
-                color: '#1976d2',
+                color: 'var(--mui-palette-primary-main, #1976d2)',
                 border: 'none',
                 borderRadius: '4px',
                 cursor: 'pointer',
@@ -252,8 +261,13 @@ export default function ExemptionManager({
               style={{
                 padding: '6px 16px',
                 backgroundColor:
-                  applying || (!exemptAll && selectedChecks.size === 0) ? '#ccc' : '#1976d2',
-                color: 'white',
+                  applying || (!exemptAll && selectedChecks.size === 0)
+                    ? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+                    : 'var(--mui-palette-primary-main, #1976d2)',
+                color:
+                  applying || (!exemptAll && selectedChecks.size === 0)
+                    ? 'var(--mui-palette-action-disabled, #9e9e9e)'
+                    : 'var(--mui-palette-primary-contrastText, #fff)',
                 border: 'none',
                 borderRadius: '4px',
                 cursor:
diff --git a/src/components/PolarisSettings.tsx b/src/components/PolarisSettings.tsx
index 533eaae..c774a5c 100644
--- a/src/components/PolarisSettings.tsx
+++ b/src/components/PolarisSettings.tsx
@@ -105,12 +105,20 @@ export default function PolarisSettings(props: PluginSettingsProps) {
                   style={{
                     width: '100%',
                     padding: '4px 8px',
-                    border: '1px solid #ccc',
+                    border: '1px solid var(--mui-palette-divider, #e0e0e0)',
                     borderRadius: '4px',
                     fontSize: '14px',
+                    backgroundColor: 'var(--mui-palette-background-paper, #fff)',
+                    color: 'var(--mui-palette-text-primary, #000)',
                   }}
                 />
-                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+                <div
+                  style={{
+                    fontSize: '12px',
+                    color: 'var(--mui-palette-text-secondary, #666)',
+                    marginTop: '4px',
+                  }}
+                >
                   Examples:
                   <br />• K8s proxy:{' '}
                   <code>/api/v1/namespaces/polaris/services/polaris-dashboard:80/proxy/</code>
@@ -128,8 +136,12 @@ export default function PolarisSettings(props: PluginSettingsProps) {
                   disabled={testing}
                   style={{
                     padding: '6px 16px',
-                    backgroundColor: testing ? '#ccc' : '#1976d2',
-                    color: 'white',
+                    backgroundColor: testing
+                      ? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+                      : 'var(--mui-palette-primary-main, #1976d2)',
+                    color: testing
+                      ? 'var(--mui-palette-action-disabled, #9e9e9e)'
+                      : 'var(--mui-palette-primary-contrastText, #fff)',
                     border: 'none',
                     borderRadius: '4px',
                     cursor: testing ? 'not-allowed' : 'pointer',