Merge pull request #5 from cpfarhood/fix/dark-mode-theme-support

fix: add dark mode support using MUI CSS variables

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',

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:

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',