fix: darkmode

Author: Lasserich

src/components/Hints/Hints.module.css

@@ -15,15 +15,90 @@
   pointer-events: none;
 }
 
+/* Chart and Legend Styles */
+.chartBackground {
+  background-color: var(--sapBackgroundColor, #fafafa);
+}
+
+.chartLabel {
+  color: var(--sapTextColor, #374151);
+}
+
+.legendSection {
+  background-color: var(--sapTile_Background, #ffffff);
+  border: 1px solid var(--sapList_BorderColor, #e1e5e9);
+  color: var(--sapTextColor, #374151);
+  box-shadow: var(--sapContent_Shadow1, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+
+.legendTitle {
+  color: var(--sapTitleColor, var(--sapTextColor, #374151));
+}
+
+.legendItem {
+  color: var(--sapContent_LabelColor, #6b7280);
+}
+
 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
   .disabledOverlay {
     background: rgba(0, 0, 0, 0.4);
   }
+  
+  .chartBackground {
+    background-color: #2a2a2a;
+  }
+  
+  .chartLabel {
+    color: #ffffff;
+  }
+  
+  .legendSection {
+    background-color: #2a2a2a;
+    border-color: #404040;
+    color: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  
+  .legendTitle {
+    color: #ffffff;
+  }
+  
+  .legendItem {
+    color: #cccccc;
+  }
 }
 
 /* Also check for UI5 theme variables for dark themes */
 [data-ui5-theme-root*="dark"] .disabledOverlay,
 [data-ui5-theme*="dark"] .disabledOverlay {
   background: rgba(0, 0, 0, 0.4);
+}
+
+[data-ui5-theme-root*="dark"] .chartBackground,
+[data-ui5-theme*="dark"] .chartBackground {
+  background-color: #2a2a2a;
+}
+
+[data-ui5-theme-root*="dark"] .chartLabel,
+[data-ui5-theme*="dark"] .chartLabel {
+  color: #ffffff;
+}
+
+[data-ui5-theme-root*="dark"] .legendSection,
+[data-ui5-theme*="dark"] .legendSection {
+  background-color: #2a2a2a;
+  border-color: #404040;
+  color: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+[data-ui5-theme-root*="dark"] .legendTitle,
+[data-ui5-theme*="dark"] .legendTitle {
+  color: #ffffff;
+}
+
+[data-ui5-theme-root*="dark"] .legendItem,
+[data-ui5-theme*="dark"] .legendItem {
+  color: #cccccc;
 }

src/components/Hints/LegendSection.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styles from './Hints.module.css';
 
 interface LegendItem {
   label: string;
@@ -18,22 +19,18 @@ export const LegendSection: React.FC<LegendSectionProps> = ({
   style 
 }) => {
   return (
-    <div style={{ 
+    <div className={styles.legendSection} style={{ 
       marginBottom: '1rem',
       padding: '0.75rem',
       borderRadius: '6px',
-      backgroundColor: 'white',
-      border: '1px solid #e1e5e9',
-      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
       width: 'fit-content',
       margin: '0 auto 1rem auto',
       ...style
     }}>
-      <div style={{ 
+      <div className={styles.legendTitle} style={{ 
         fontSize: '0.95rem', 
         fontWeight: '600', 
         marginBottom: '0.5rem',
-        color: '#374151',
         textAlign: 'center'
       }}>
         {title}
@@ -56,7 +53,7 @@ export const LegendSection: React.FC<LegendSectionProps> = ({
               backgroundColor: item.color, 
               borderRadius: '50%' 
             }} />
-            <span style={{ fontSize: '0.85rem', color: '#6b7280' }}>
+            <span className={styles.legendItem} style={{ fontSize: '0.85rem' }}>
               {item.count} {item.label}
             </span>
           </div>

src/components/Hints/MultiPercentageBar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState, useMemo } from 'react';
+import styles from './Hints.module.css';
 
 interface PercentageSegment {
   percentage: number;
@@ -40,7 +41,7 @@ export const MultiPercentageBar: React.FC<MultiPercentageBarProps> = ({
   labelFontSize = '0.875rem',
   gap = '2px',
   borderRadius = '6px',
-  backgroundColor = '#e9e9e9ff',
+  backgroundColor, // Remove default value to use CSS class
   className,
   style,
   animationDuration = 600, // Default 600ms animation
@@ -216,17 +217,17 @@ export const MultiPercentageBar: React.FC<MultiPercentageBarProps> = ({
         }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
             {showPercentage && (
-              <span style={{ 
+              <span className={`${styles.chartLabel} ${allHealthy ? '' : ''}`} style={{ 
                 fontSize: labelFontSize, 
-                color: allHealthy ? 'green' : 'black', 
+                color: allHealthy ? 'green' : undefined, 
                 fontWeight: allHealthy ? '700' : '400'
               }}>
                 {displayPrimaryPercentage}%
               </span>
             )}
-            <span style={{ 
+            <span className={`${styles.chartLabel} ${allHealthy ? '' : ''}`} style={{ 
               fontSize: labelFontSize, 
-              color: allHealthy ? 'green' : 'black', 
+              color: allHealthy ? 'green' : undefined, 
               fontWeight: allHealthy ? '700' : '400'
             }}>
               {displayLabel}
@@ -236,12 +237,12 @@ export const MultiPercentageBar: React.FC<MultiPercentageBarProps> = ({
       )}
 
       {/* Colored bars */}
-      <div style={{ 
+      <div className={styles.chartBackground} style={{ 
         display: 'flex', 
         gap, 
         width: barWidth, 
         maxWidth: barMaxWidth,
-        backgroundColor,
+        ...(backgroundColor && { backgroundColor }), // Only override if explicitly provided
         borderRadius,
         padding: '2px',
         opacity: isVisible ? 1 : 0,