fix(energiediagramm): Visualisierungsthema übernehmen

CHANGELOG.md

@@ -14,6 +14,8 @@ Alle wesentlichen Aenderungen an Enelix Utils werden in dieser Datei dokumentier
 
 ### Beta-Aenderungen
 
+- Energiediagramm uebernimmt Kachel- und Textfarbe der Visualisierung; Zeitraum-
+  und Datumsauswahl bleiben in hellen und dunklen Themen lesbar.
 - Dezimale IP-Symcon-Farbwerte werden im Energiediagramm korrekt verarbeitet.
 - Kachelabstand fuer den Symcon-Kopf und versionsabhaengiger Vollbildmodus.
 - Vollstaendige PHP-, Struktur- und Symcon-Modultests fuer alle Module.

Energiediagramm/README.md

@@ -31,9 +31,13 @@ dezimalen Farbwerte.
 ## Darstellung
 
 Der Inhalt beginnt unterhalb des von Symcon eingeblendeten Kachelkopfs, damit
-Zeitraum und Datum vollstaendig bedienbar bleiben. Beim Oeffnen und beim erneuten
+Zeitraum und Datum vollstaendig bedienbar bleiben. Hintergrund, Text und
-Sichtbarwerden wird die Darstellung aktualisiert. Das Diagrammraster wechselt
+Bedienelemente verwenden die von IP-Symcon bereitgestellten Kachel- und
-bei geringer Breite automatisch von zwei Spalten auf eine Spalte.
+Textfarben. Auch geoeffnete Auswahlfelder sowie native Datumselemente passen sich
+automatisch an ein helles oder dunkles Visualisierungsthema an. Beim Oeffnen und
+beim erneuten Sichtbarwerden wird die Darstellung aktualisiert. Das
+Diagrammraster wechselt bei geringer Breite automatisch von zwei Spalten auf
+eine Spalte.
 
 IP-Symcon 8.x unterstuetzt HTML-SDK-Darstellungen nur in der normalen Kachel.
 Der vom Client angebotene Vergroesserungsdialog kann deshalb leer bleiben.

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;
+    color: var(--content-color, inherit);
-    background: transparent;
+    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;
+    color: var(--content-color, inherit);
-    background: rgba(127, 127, 127, 0.08);
+    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 || '';

tests/EnergiediagrammModulstrukturTest.php

@@ -51,6 +51,9 @@ final class EnergiediagrammModulstrukturTest extends TestCase
         self::assertStringContainsString('grid-template-columns: minmax(0, 1fr)', $html);
         self::assertStringContainsString('padding: 58px 14px 14px', $html);
         self::assertStringContainsString('padding: 58px 10px 10px', $html);
+        self::assertStringContainsString('background-color: var(--card-color, transparent)', $html);
+        self::assertStringContainsString('color: var(--content-color, CanvasText)', $html);
+        self::assertStringContainsString('function syncColorScheme()', $html);
         self::assertStringContainsString('SetCustomRange', $html);
         self::assertStringNotContainsString("addEventListener('load'", $html);
     }