fix: add dark mode support using MUI CSS variables #5

2026-02-12T03:44:05Z

cpfarhood commented

2026-02-12 03:44:05 +00:00

(Migrated from github.com)

Summary

Replace all hardcoded colors with MUI CSS variables
Fixes white backgrounds in dark mode
Ensures proper theme support across all plugin UI elements

Root Cause

The plugin was using hardcoded hex colors (#ccc, #666, #1976d2, etc.) in inline styles, which don't adapt to Headlamp's theme changes. When users switch to dark mode (via system preference), the plugin UI remained light-themed.

Changes

Components Updated

PolarisSettings.tsx: Input fields, buttons, help text now use theme variables
ExemptionManager.tsx: All buttons (Add, Remove, Cancel, Apply) use theme variables
DashboardView.tsx: Refresh button uses theme variables
AppBarScoreBadge.tsx: No changes (semantic colors preserved for status indication)

CSS Variables Used

--mui-palette-primary-main           /* Primary action color */
--mui-palette-primary-contrastText   /* Text on primary backgrounds */
--mui-palette-background-paper       /* Card/paper backgrounds */
--mui-palette-text-primary           /* Primary text color */
--mui-palette-text-secondary         /* Secondary/muted text */
--mui-palette-divider                /* Borders and dividers */
--mui-palette-action-disabled        /* Disabled text */
--mui-palette-action-disabledBackground  /* Disabled backgrounds */
--mui-palette-error-main             /* Error/danger actions */

Test Plan

✅ All tests passing (50/50)
✅ TypeScript compilation clean
✅ Build successful
🎯 Test with system dark mode enabled
🎯 Verify all UI elements adapt to theme

Visual Examples

Before: Plugin UI has white backgrounds in dark mode
After: Plugin UI adapts to dark theme automatically

🤖 Generated with Claude Code

## Summary - Replace all hardcoded colors with MUI CSS variables - Fixes white backgrounds in dark mode - Ensures proper theme support across all plugin UI elements ## Root Cause The plugin was using hardcoded hex colors (`#ccc`, `#666`, `#1976d2`, etc.) in inline styles, which don't adapt to Headlamp's theme changes. When users switch to dark mode (via system preference), the plugin UI remained light-themed. ## Changes ### Components Updated - **PolarisSettings.tsx**: Input fields, buttons, help text now use theme variables - **ExemptionManager.tsx**: All buttons (Add, Remove, Cancel, Apply) use theme variables - **DashboardView.tsx**: Refresh button uses theme variables - **AppBarScoreBadge.tsx**: No changes (semantic colors preserved for status indication) ### CSS Variables Used ```css --mui-palette-primary-main /* Primary action color */ --mui-palette-primary-contrastText /* Text on primary backgrounds */ --mui-palette-background-paper /* Card/paper backgrounds */ --mui-palette-text-primary /* Primary text color */ --mui-palette-text-secondary /* Secondary/muted text */ --mui-palette-divider /* Borders and dividers */ --mui-palette-action-disabled /* Disabled text */ --mui-palette-action-disabledBackground /* Disabled backgrounds */ --mui-palette-error-main /* Error/danger actions */ ``` ## Test Plan - ✅ All tests passing (50/50) - ✅ TypeScript compilation clean - ✅ Build successful - 🎯 Test with system dark mode enabled - 🎯 Verify all UI elements adapt to theme ## Visual Examples **Before:** Plugin UI has white backgrounds in dark mode **After:** Plugin UI adapts to dark theme automatically 🤖 Generated with [Claude Code](https://claude.com/claude-code)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: privilegedescalation/headlamp-polaris-plugin#5