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

tests/EnergyPieVisualizationTest.cjs

@@ -12,6 +12,9 @@ function visualization(initialState) {
     if (!elements.has(id)) {
       elements.set(id, {
         innerHTML: '', textContent: '', value: '', hidden: false,
+        style: {
+          setProperty(name, value) { this[name] = value; }
+        },
         addEventListener() {}, classList: { toggle() {} }
       });
     }
@@ -30,7 +33,7 @@ function visualization(initialState) {
     window, document,
     getComputedStyle: () => ({ getPropertyValue: () => '' })
   });
-  return { element, window };
+  return { element, window, document };
 }
 
 function payload(overrides = {}) {
@@ -86,3 +89,58 @@ test('missing archive values do not hide the attribution limitation', () => {
   assert.equal(ui.element('message').textContent,
     'No archive data. Different measurement boundaries.');
 });
+
+test('old payloads retain the original Energy Pie background', () => {
+  const ui = visualization(payload());
+  const style = ui.element('energy-app').style;
+  assert.equal(style['--card-color'], '#121216');
+  assert.equal(style['--background-accent-1-rgb'], '99, 179, 255');
+  assert.equal(style['--background-accent-2-rgb'], '168, 85, 247');
+  assert.equal(style['--content-color'], '#f5f5f7');
+  assert.equal(style.colorScheme, 'dark');
+});
+
+test('configured backgrounds apply initially and on visualization updates', () => {
+  const ui = visualization(payload({ colors: {
+    background: '#FFFFFF', backgroundAccent1: '#DCE169', backgroundAccent2: '#4E8181',
+    selfConsumption: '#1259A7', autarky: '#178A55'
+  } }));
+  const style = ui.element('energy-app').style;
+  assert.equal(style['--card-color'], '#FFFFFF');
+  assert.equal(style['--background-accent-1-rgb'], '220, 225, 105');
+  assert.equal(style['--background-accent-2-rgb'], '78, 129, 129');
+  assert.equal(style['--content-color'], '#121216');
+  assert.equal(style.colorScheme, 'light');
+  assert.equal(ui.document.documentElement.style.colorScheme, undefined);
+
+  const state = payload({ colors: {
+    background: '#000000', backgroundAccent1: '#112233', backgroundAccent2: '#445566',
+    selfConsumption: '#1259A7', autarky: '#178A55'
+  } });
+  state.values.Eigenverbrauchsquote = 75;
+  state.values.Autarkiegrad = 50;
+  ui.window.handleMessage(JSON.stringify(state));
+  assert.equal(style['--card-color'], '#000000');
+  assert.equal(style['--background-accent-1-rgb'], '17, 34, 51');
+  assert.equal(style['--background-accent-2-rgb'], '68, 85, 102');
+  assert.equal(style['--content-color'], '#f5f5f7');
+  assert.equal(style.colorScheme, 'dark');
+  assert.match(ui.element('self-consumption-chart').innerHTML, /stroke="#1259A7"/);
+  assert.match(ui.element('autarky-chart').innerHTML, /stroke="#178A55"/);
+
+  ui.window.handleMessage(payload());
+  assert.equal(style['--card-color'], '#121216');
+  assert.equal(style['--background-accent-1-rgb'], '99, 179, 255');
+});
+
+test('invalid or incomplete background colors fall back independently', () => {
+  for (const invalid of [null, -1, 16777216, {}, '', '#123', '#123456; color:red', 'url(https://invalid.test/)']) {
+    const ui = visualization(payload({ hasData: false, colors: {
+      background: invalid, backgroundAccent1: '#aAbBcC', backgroundAccent2: invalid
+    } }));
+    const style = ui.element('energy-app').style;
+    assert.equal(style['--card-color'], '#121216');
+    assert.equal(style['--background-accent-1-rgb'], '170, 187, 204');
+    assert.equal(style['--background-accent-2-rgb'], '168, 85, 247');
+  }
+});