fix(energiediagramm): Visualisierungsthema übernehmen

Energiediagramm/module.html

@@ -65,6 +65,8 @@
     min-width: 0;
     min-height: 100%;
     margin: 0;
+    color: var(--content-color, inherit);
+    background-color: var(--card-color, transparent);
   }
 
   #energy-app {
@@ -74,8 +76,8 @@
     padding: 58px 14px 14px;
     overflow: auto;
     font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-    color: inherit;
-    background: transparent;
+    color: var(--content-color, inherit);
+    background-color: var(--card-color, transparent);
   }
 
   .toolbar,
@@ -104,11 +106,16 @@
     border: 1px solid rgba(127, 127, 127, 0.45);
     border-radius: 6px;
     padding: 7px 10px;
-    color: inherit;
-    background: rgba(127, 127, 127, 0.08);
+    color: var(--content-color, inherit);
+    background-color: var(--card-color, transparent);
     font: inherit;
   }
 
+  select option {
+    color: var(--content-color, CanvasText);
+    background-color: var(--card-color, Canvas);
+  }
+
   button {
     cursor: pointer;
     font-weight: 650;
@@ -277,6 +284,23 @@
   const selfConsumptionChart = document.getElementById('self-consumption-chart');
   const autarkyChart = document.getElementById('autarky-chart');
 
+  function syncColorScheme() {
+    const cardColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--card-color')
+      .trim();
+    const match = cardColor.match(/^#?([0-9a-f]{6})$/i);
+    if (!match) {
+      return;
+    }
+
+    const value = Number.parseInt(match[1], 16);
+    const red = (value >> 16) & 255;
+    const green = (value >> 8) & 255;
+    const blue = value & 255;
+    const luminance = ((0.2126 * red) + (0.7152 * green) + (0.0722 * blue)) / 255;
+    document.documentElement.style.colorScheme = luminance < 0.5 ? 'dark' : 'light';
+  }
+
   function send(action, value) {
     if (typeof requestAction !== 'function') {
       return;
@@ -372,6 +396,7 @@
       return;
     }
 
+    syncColorScheme();
     range.value = data.range || 'day';
     date.value = data.date || '';
     customStart.value = data.customStart || '';