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>
This commit is contained in:
@@ -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',
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user