feat(energy-pie): finish configurable colors and Symcon 8 migration

Energiediagramm/module.html

@@ -73,6 +73,8 @@
   #energy-app {
     --card-color: #121216;
     --content-color: #f5f5f7;
+    --background-accent-1-rgb: 99, 179, 255;
+    --background-accent-2-rgb: 168, 85, 247;
     position: relative;
     isolation: isolate;
     color-scheme: dark;
@@ -86,16 +88,16 @@
     background-color: var(--card-color, transparent);
   }
 
-  /* Keep the original Energy Pie colors behind the scrollable controls. */
+  /* Keep the configurable background behind the scrollable controls. */
   #energy-app::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background:
-      radial-gradient(520px 420px at 18% 18%, rgba(99, 179, 255, 0.42), transparent 60%),
-      radial-gradient(560px 460px at 82% 28%, rgba(168, 85, 247, 0.38), transparent 62%),
-      radial-gradient(620px 520px at 55% 85%, rgba(99, 179, 255, 0.26), transparent 64%);
+      radial-gradient(520px 420px at 18% 18%, rgba(var(--background-accent-1-rgb), 0.42), transparent 60%),
+      radial-gradient(560px 460px at 82% 28%, rgba(var(--background-accent-2-rgb), 0.38), transparent 62%),
+      radial-gradient(620px 520px at 55% 85%, rgba(var(--background-accent-1-rgb), 0.26), transparent 64%);
     filter: blur(18px);
     pointer-events: none;
   }
@@ -309,21 +311,29 @@
   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;
-    }
+  function colorRgb(color) {
+    const value = Number.parseInt(color.slice(1), 16);
+    return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+  }
 
-    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 syncBackground(colors) {
+    const safeColor = (value, fallback) => typeof value === 'string'
+      && /^#[0-9a-f]{6}$/i.test(value) ? value : fallback;
+    const background = safeColor(colors.background, '#121216');
+    const accent1 = safeColor(colors.backgroundAccent1, '#63B3FF');
+    const accent2 = safeColor(colors.backgroundAccent2, '#A855F7');
+    app.style.setProperty('--card-color', background);
+    app.style.setProperty('--background-accent-1-rgb', colorRgb(accent1).join(', '));
+    app.style.setProperty('--background-accent-2-rgb', colorRgb(accent2).join(', '));
+
+    const linear = colorRgb(background).map(channel => {
+      const value = channel / 255;
+      return value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+    });
+    const luminance = 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
+    const dark = luminance < 0.179;
+    app.style.setProperty('--content-color', dark ? '#f5f5f7' : '#121216');
+    app.style.colorScheme = dark ? 'dark' : 'light';
   }
 
   function send(action, value) {
@@ -425,7 +435,8 @@
       return;
     }
 
-    syncColorScheme();
+    const colors = data.colors || {};
+    syncBackground(colors);
     range.value = data.range || 'day';
     date.value = data.date || '';
     customStart.value = data.customStart || '';
@@ -447,7 +458,6 @@
       metric('Einspeisung', values.Einspeisung)
     ].join('');
 
-    const colors = data.colors || {};
     donut(
       selfConsumptionChart,
       data.sharesAvailable === false ? null : values.Eigenverbrauchsquote,