From c6e518e8edb4e5de0ae03d96b8c618849dec7a74 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 16 Jun 2026 14:06:08 +0200
Subject: [PATCH 01/12] remove user defined battery color

---
 .../source/src/components/BatteryCard.vue     |  7 -----
 .../charts/dailyTotals/DailyTotals.vue        |  6 ++--
 .../energyFlowChart/EnergyFlowChart.vue       |  3 +-
 .../charts/historyChart/HistoryChart.vue      |  4 +--
 .../koala/source/src/stores/mqtt-store.ts     | 28 -------------------
 5 files changed, 4 insertions(+), 44 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 55ebe91f5b..f82a62575c 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -5,7 +5,6 @@
     :class="{
       'battery-sum': props.batteryId === -1,
       'full-height': props.fullHeight,
-      'has-custom-color': batteryColor,
     }"
   >
     <q-card-section class="row no-wrap items-center justify-between">
@@ -164,8 +163,6 @@ const dailyExportedEnergy = computed(() => {
     '---'
   );
 });
-
-const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
 </script>
 
 <style scoped lang="scss">
@@ -175,10 +172,6 @@ const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
   border-radius: 15px;
 }
 
-.battery-card.has-custom-color {
-  border-left: 4px solid v-bind(batteryColor);
-}
-
 .q-card__section {
   padding-left: $space-base;
   padding-right: $space-base;
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index d667d45dc1..74a51fa1b0 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -322,7 +322,7 @@ const individualBatteryData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.batteryDailyImported(id, 'textValue') as string,
           exported: mqttStore.batteryDailyExported(id, 'textValue') as string,
         },
-        color: mqttStore.batteryColor(id) || undefined,
+        color: 'var(--q-battery-stroke)',
       });
     }
   });
@@ -348,10 +348,8 @@ const componentData = computed((): DailyTotalsItem[] => {
         imported: mqttStore.batteryDailyImportedTotal('textValue') as string,
         exported: mqttStore.batteryDailyExportedTotal('textValue') as string,
       },
+      color: 'var(--q-battery-stroke)',
     };
-    if (mqttStore.batteryIds.length === 1) {
-      item.color = mqttStore.batteryColor(mqttStore.batteryIds[0]) || undefined;
-    }
     components.push(item);
   }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 1dbbde11cf..9a2581438a 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -261,7 +261,6 @@ const chargePointSumCharging = computed(
 
 const gridId = computed(() => mqttStore.gridId);
 const pvColor = computed(() => mqttStore.pvAggregateColor);
-const batteryColor = computed(() => mqttStore.batteryAggregateColor);
 
 ///////////////////// Set animation speed //////////////////////////
 
@@ -394,7 +393,7 @@ const svgComponents = computed((): FlowComponent[] => {
       powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
       iconComponent: BatteryIcon,
-      iconColor: batteryColor.value || 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-battery-stroke)',
     });
   }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index aa0396df90..17f1885706 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -103,7 +103,6 @@ const selectedData = computed((): GraphDataPoint[] => {
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const gridId = computed(() => mqttStore.gridId);
 const pvColor = computed(() => mqttStore.pvAggregateColor);
-const batteryColor = computed(() => mqttStore.batteryAggregateColor);
 
 const chargePointNames = computed(() => mqttStore.chargePointName);
 
@@ -336,8 +335,7 @@ const lineChartData = computed(() => {
     });
   }
   if (mqttStore.batteryConfigured) {
-    const baseColor =
-      batteryColor.value || getGlobalColor('--q-battery-stroke');
+    const baseColor = getGlobalColor('--q-battery-stroke');
     datasets.push(
       {
         label: 'Speicher ges.',
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 92e927fac2..f88c91b01a 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -2907,32 +2907,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
-  /**
-   * Get the battery color if exactly one battery is configured
-   * @param batteryId battery id
-   * @returns string | null
-   */
-  const batteryAggregateColor = computed(() => {
-    const ids = batteryIds.value;
-    if (ids.length === 1) {
-      return batteryColor.value(ids[0]);
-    }
-    return null;
-  });
-
-  /**
-   * Get the battery color identified by the battery id
-   * @param batteryId battery id
-   * @returns string | null
-   */
-  const batteryColor = computed(() => {
-    return (batteryId: number): string | null => {
-      const DEFAULT_COLOR = '#ffc107';
-      const config = getComponentConfiguration.value(batteryId);
-      return resolveComponentColor(config?.color, DEFAULT_COLOR);
-    };
-  });
-
   ////////////////////////////// vehicle data ////////////////////////////////
 
   /**
@@ -4229,8 +4203,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryTotalPower,
     batteryChargePriorityRange,
     batteryMode,
-    batteryAggregateColor,
-    batteryColor,
     // Grid data
     gridId,
     secondaryCounterIds,

From 738f1ca37f221f9ef3fdcd1b834f60c8586b166c Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 16 Jun 2026 14:34:45 +0200
Subject: [PATCH 02/12] Always use Standard colors for PV, EVU, no  user
 defined colors

---
 .../charts/dailyTotals/DailyTotals.vue        | 11 +++-----
 .../energyFlowChart/EnergyFlowChart.vue       | 10 ++-----
 .../charts/historyChart/HistoryChart.vue      |  9 ++-----
 .../koala/source/src/stores/mqtt-store.ts     | 27 -------------------
 4 files changed, 7 insertions(+), 50 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index 74a51fa1b0..b87b02d181 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -223,8 +223,6 @@ const secondaryCountersConfigured = computed(
   () => secondaryCounterData.value.length > 0,
 );
 
-const gridID = computed(() => mqttStore.gridId);
-
 const gridData = computed((): DailyTotalsItem => {
   let data: DailyTotalsItem = {
     id: 'grid',
@@ -243,10 +241,7 @@ const gridData = computed((): DailyTotalsItem => {
         imported: mqttStore.counterDailyImported('textValue') as string,
         exported: mqttStore.counterDailyExported('textValue') as string,
       },
-      color:
-        gridID.value !== undefined
-          ? mqttStore.gridComponentColor(gridID.value) || undefined
-          : undefined,
+      color: 'var(--q-grid-stroke)',
     };
   }
   return data;
@@ -268,7 +263,7 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.counterDailyImported('textValue', id) as string,
           exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
-        color: mqttStore.gridComponentColor(id) || undefined,
+        color: 'var(--q-grid-stroke)',
       });
     }
   });
@@ -362,7 +357,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       power: mqttStore.getPvPower('textValue') as string,
       powerValue: mqttStore.getPvPower('value') as number,
       today: { exported: mqttStore.pvDailyExported('textValue') as string },
-      color: mqttStore.pvAggregateColor || 'var(--q-diagram-icon)',
+      color: 'var(--q-pv-stroke)',
     });
   }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 9a2581438a..b1df45e9f5 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -259,8 +259,6 @@ const chargePointSumCharging = computed(
   () => Number(chargePointSumPower.value.value) > 0,
 );
 
-const gridId = computed(() => mqttStore.gridId);
-const pvColor = computed(() => mqttStore.pvAggregateColor);
 
 ///////////////////// Set animation speed //////////////////////////
 
@@ -337,11 +335,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['EVU', absoluteValueObject(gridPower.value).textValue],
       powerValue: Number(gridPower.value.value),
       iconComponent: GridIcon,
-      iconColor:
-        gridId.value !== undefined
-          ? mqttStore.gridComponentColor(gridId.value) ||
-            'var(--q-diagram-icon)'
-          : 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-grid-stroke)',
     });
   }
 
@@ -375,7 +369,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
       iconComponent: PvIcon,
-      iconColor: pvColor.value || 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-pv-stroke)',
     });
   }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 17f1885706..1fdfc4f33e 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -101,8 +101,6 @@ const selectedData = computed((): GraphDataPoint[] => {
 });
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
-const gridId = computed(() => mqttStore.gridId);
-const pvColor = computed(() => mqttStore.pvAggregateColor);
 
 const chargePointNames = computed(() => mqttStore.chargePointName);
 
@@ -263,10 +261,7 @@ const chartLabels = computed(() => {
 const lineChartData = computed(() => {
   let datasets = [];
   if (gridMeterName.value !== undefined) {
-    const baseColor = gridId.value
-      ? mqttStore.gridComponentColor(gridId.value) ||
-        getGlobalColor('--q-grid-stroke')
-      : getGlobalColor('--q-grid-stroke');
+    const baseColor = getGlobalColor('--q-grid-stroke');
     datasets.push({
       label: gridMeterName.value,
       category: 'component',
@@ -312,7 +307,7 @@ const lineChartData = computed(() => {
   }
   datasets.push(...secondaryCounterDatasets.value);
   if (mqttStore.pvConfigured) {
-    const baseColor = pvColor.value || getGlobalColor('--q-pv-stroke');
+    const baseColor = getGlobalColor('--q-pv-stroke');
     datasets.push({
       label: 'PV ges.',
       category: 'component',
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index f88c91b01a..4138cd2e34 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3938,31 +3938,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     );
   });
 
-  /**
-   * Get the pv color identified by the inverter id
-   * @param inverterId inverter id
-   * @returns string | null
-   */
-  const pvColor = computed(() => {
-    return (inverterId: number): string | null => {
-      const DEFAULT_COLOR = '#28a745';
-      const config = getComponentConfiguration.value(inverterId);
-      return resolveComponentColor(config?.color, DEFAULT_COLOR);
-    };
-  });
-
-  /**
-   * Get the pv color for the pv if exactly one inverter is configured
-   * @returns string | null
-   */
-  const pvAggregateColor = computed((): string | null => {
-    const ids = getObjectIds.value('inverter');
-    if (ids.length === 1) {
-      return pvColor.value(ids[0]);
-    }
-    return null;
-  });
-
   /**
    * Get pv power
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -4217,8 +4192,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     homeDailyYield,
     // PV data
     pvConfigured,
-    pvAggregateColor,
-    pvColor,
     getPvPower,
     pvDailyExported,
     // Chart data

From e006287a50a16e3ca9d42fe1821f2f33ca09f52d Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 16 Jun 2026 15:03:05 +0200
Subject: [PATCH 03/12] Charge points revert back to standard color when no
 user defined color

---
 .../src/components/charts/dailyTotals/DailyTotals.vue | 11 ++++++-----
 .../charts/energyFlowChart/EnergyFlowChart.vue        |  6 +++---
 .../components/charts/historyChart/HistoryChart.vue   |  3 +--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index b87b02d181..5263b00682 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -292,7 +292,7 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
             id,
           ) as string,
         },
-        color: mqttStore.chargePointColor(id) || undefined,
+        color: mqttStore.chargePointColor(id) || 'var(--q-primary)',
       });
     }
   });
@@ -379,6 +379,11 @@ const componentData = computed((): DailyTotalsItem[] => {
       title: mqttStore.chargePointIds.length > 1 ? 'Ladepunkte' : 'Ladepunkt',
       level: 'primary',
       icon: 'chargepoint',
+      color:
+        mqttStore.chargePointIds.length === 1
+          ? mqttStore.chargePointColor(mqttStore.chargePointIds[0]) ||
+            'var(--q-primary)'
+          : 'var(--q-primary)',
     };
     if (chargePointSumPowerAvailable.value) {
       item = {
@@ -390,10 +395,6 @@ const componentData = computed((): DailyTotalsItem[] => {
           exported: mqttStore.chargePointDailyExported('textValue') as string,
         },
       };
-      if (mqttStore.chargePointIds.length === 1) {
-        item.color =
-          mqttStore.chargePointColor(mqttStore.chargePointIds[0]) || undefined;
-      }
     }
     components.push(item);
   }
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index b1df45e9f5..3ee1092b91 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -415,7 +415,7 @@ const svgComponents = computed((): FlowComponent[] => {
         iconComponent: ChargePointIcon,
         iconColor:
           mqttStore.chargePointColor(connectedChargePoints.value[0]) ||
-          'var(--q-diagram-icon)',
+          'var(--q-primary)',
       });
 
       if (chargePoint1VehicleConnected.value) {
@@ -471,7 +471,7 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointColor(connectedChargePoints.value[1]) ||
-            'var(--q-diagram-icon)',
+            'var(--q-primary)',
         });
       }
 
@@ -525,7 +525,7 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointColor(connectedChargePoints.value[2]) ||
-            'var(--q-diagram-icon)',
+            'var(--q-primary)',
         });
       }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 1fdfc4f33e..44f1cf0811 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -169,8 +169,7 @@ const secondaryCounterDatasets = computed(() =>
 const chargePointDatasets = computed(() =>
   chargePointIds.value.map((cpId) => {
     const baseColor =
-      mqttStore.chargePointColor(cpId) ||
-      getGlobalColor('--q-charge-point-stroke');
+      mqttStore.chargePointColor(cpId) || getGlobalColor('--q-primary');
 
     return {
       label: `${chargePointNames.value(cpId)}`,

From ec0f2c769c3e99b2d9b95e4664c1531002cf5236 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 16 Jun 2026 15:18:08 +0200
Subject: [PATCH 04/12] update charge point default color

---
 .../src/components/charts/dailyTotals/DailyTotals.vue       | 6 +++---
 .../components/charts/energyFlowChart/EnergyFlowChart.vue   | 6 +++---
 .../src/components/charts/historyChart/HistoryChart.vue     | 3 ++-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index 5263b00682..3ddd6afc7d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -292,7 +292,7 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
             id,
           ) as string,
         },
-        color: mqttStore.chargePointColor(id) || 'var(--q-primary)',
+        color: mqttStore.chargePointColor(id) || 'var(--q-charge-point-stroke)',
       });
     }
   });
@@ -382,8 +382,8 @@ const componentData = computed((): DailyTotalsItem[] => {
       color:
         mqttStore.chargePointIds.length === 1
           ? mqttStore.chargePointColor(mqttStore.chargePointIds[0]) ||
-            'var(--q-primary)'
-          : 'var(--q-primary)',
+            'var(--q-charge-point-stroke)'
+          : 'var(--q-charge-point-stroke)',
     };
     if (chargePointSumPowerAvailable.value) {
       item = {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 3ee1092b91..7b2ab3884a 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -415,7 +415,7 @@ const svgComponents = computed((): FlowComponent[] => {
         iconComponent: ChargePointIcon,
         iconColor:
           mqttStore.chargePointColor(connectedChargePoints.value[0]) ||
-          'var(--q-primary)',
+          'var(--q-charge-point-stroke)',
       });
 
       if (chargePoint1VehicleConnected.value) {
@@ -471,7 +471,7 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointColor(connectedChargePoints.value[1]) ||
-            'var(--q-primary)',
+            'var(--q-charge-point-stroke)',
         });
       }
 
@@ -525,7 +525,7 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointColor(connectedChargePoints.value[2]) ||
-            'var(--q-primary)',
+            'var(--q-charge-point-stroke)',
         });
       }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 44f1cf0811..1fdfc4f33e 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -169,7 +169,8 @@ const secondaryCounterDatasets = computed(() =>
 const chargePointDatasets = computed(() =>
   chargePointIds.value.map((cpId) => {
     const baseColor =
-      mqttStore.chargePointColor(cpId) || getGlobalColor('--q-primary');
+      mqttStore.chargePointColor(cpId) ||
+      getGlobalColor('--q-charge-point-stroke');
 
     return {
       label: `${chargePointNames.value(cpId)}`,

From a4daf0923eda1bb3ac216f2b93ebe2f81337ee42 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 16 Jun 2026 16:13:42 +0200
Subject: [PATCH 05/12] Update global CSS colors - new design

---
 .../koala/source/src/css/quasar.variables.scss  | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 464e29231b..7addd3cfc4 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -22,7 +22,7 @@
 // $warning: #F2C037;
 /////////////////////////////////////////////////////////////////////
 // Default Light Theme Base Colors
-$primary: #5c93d1;
+$primary: #153357;
 $secondary: #d2d2d7;
 $accent: #546e7a;
 $positive: #66bd7a;
@@ -36,20 +36,21 @@ $brown-text: #524f57;
 $white: #ffffff;
 $grey: #9e9e9e; // Quasar's default grey
 $toggle-off: #e0e0e0;
-$grid-stroke: #a33c42;
+$grid-stroke: #DC1629;
 $grid-fill: #efb6bc33;
 $secondary-counter-stroke: #ffa9a8;
 $secondary-counter-fill: #ffa9a833;
-$home-stroke: #949aa1;
+$home-stroke: #717171;
 $home-fill: #949aa133;
 $pv-stroke: #66bd7a;
 $pv-fill: #90ee9033;
 $battery: #ba7128;
-$battery-stroke: #ba7128;
+$battery-stroke: #FF9740;
 $battery-fill: #ba712833;
-$charge-point-stroke: #5c93d1;
+$charge-point-stroke: #153357;
 $charge-point-fill: #5c93d14d;
-$vehicle-stroke: #4f99af;
+$vehicle-stroke: #38bbb4;
+$vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
@@ -86,6 +87,7 @@ $table-hover: #f9f8f8;
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
   --q-vehicle-stroke: #{$vehicle-stroke};
+  --q-vehicle-fill: #{$vehicle-fill};
   --q-charge-plan-link-button: #{$charge-plan-link-button};
   --q-diagram-icon: #{$diagram-icon};
   --q-table-hover: #{$table-hover};
@@ -268,6 +270,7 @@ $dark-table-hover: #ffffff12;
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
   --q-vehicle-stroke: #{$vehicle-stroke};
+  --q-vehicle-fill: #{$vehicle-fill};
   --q-charge-plan-link-button: #{$dark-charge-plan-link-button};
   --q-diagram-icon: #{$white};
   --q-table-hover: #{$dark-table-hover};
@@ -351,7 +354,7 @@ $dark-table-hover: #ffffff12;
 .tinted-box {
   background-color: color-mix(
     in srgb,
-    var(--tint-accent, var(--q-primary)) var(--tint-amount, 12%),
+    var(--tint-accent, var(--q-primary)) var(--tint-amount, 5%),
     transparent
   );
   border: 1px solid color-mix(in srgb, var(--q-text) 35%, transparent);

From 40b4368c27e542789159f077e58c23b3d6641f49 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 16 Jun 2026 16:21:04 +0200
Subject: [PATCH 06/12] Update home icon color - remove q-diagram-color where
 not required

---
 .../charts/dailyTotals/DailyTotals.vue         |  1 +
 .../charts/dailyTotals/DailyTotalsRow.vue      |  1 -
 .../charts/energyFlowChart/EnergyFlowChart.vue | 18 +++++++++---------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index 3ddd6afc7d..d5619713dd 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -370,6 +370,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       power: mqttStore.homePower('textValue') as string,
       powerValue: mqttStore.homePower('value') as number,
       today: { imported: mqttStore.homeDailyYield('textValue') as string },
+      color: 'var(--q-home-stroke)',
     });
   }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index 4857b8416c..1689c229be 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -181,7 +181,6 @@ const iconMap = {
 .base-icon {
   width: 1.75rem;
   height: 1.75rem;
-  color: var(--q-diagram-icon);
 }
 .col-title {
   flex: 0 0 5.5rem;
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 7b2ab3884a..95c7b06616 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -352,7 +352,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['Haus', absoluteValueObject(homePower.value).textValue],
       powerValue: Number(homePower.value.value),
       iconComponent: HouseIcon,
-      iconColor: 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-home-stroke)',
     });
   }
 
@@ -442,8 +442,8 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: VehicleIcon,
           iconColor: chargePoint1ConnectedVehicle.value?.id
             ? mqttStore.vehicleColor(chargePoint1ConnectedVehicle.value?.id) ||
-              'var(--q-diagram-icon)'
-            : 'var(--q-diagram-icon)',
+              'var(--q-vehicle-stroke)'
+            : 'var(--q-vehicle-stroke)',
           powerValue: Number(chargePoint1Power.value.value),
         });
       }
@@ -499,8 +499,8 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: VehicleIcon,
           iconColor: chargePoint2ConnectedVehicle.value?.id
             ? mqttStore.vehicleColor(chargePoint2ConnectedVehicle.value?.id) ||
-              'var(--q-diagram-icon)'
-            : 'var(--q-diagram-icon)',
+              'var(--q-vehicle-stroke)'
+            : 'var(--q-vehicle-stroke)',
           powerValue: Number(chargePoint2Power.value.value),
         });
       }
@@ -553,8 +553,8 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: VehicleIcon,
           iconColor: chargePoint3ConnectedVehicle.value?.id
             ? mqttStore.vehicleColor(chargePoint3ConnectedVehicle.value?.id) ||
-              'var(--q-diagram-icon)'
-            : 'var(--q-diagram-icon)',
+              'var(--q-vehicle-stroke)'
+            : 'var(--q-vehicle-stroke)',
           powerValue: Number(chargePoint3Power.value.value),
         });
       }
@@ -576,7 +576,7 @@ const svgComponents = computed((): FlowComponent[] => {
         ],
         powerValue: Number(chargePointSumPower.value.value),
         iconComponent: ChargePointIcon,
-        iconColor: 'var(--q-diagram-icon)',
+        iconColor: 'var(--q-charge-point-stroke)',
       });
     }
   }
@@ -1040,7 +1040,7 @@ text .fill-danger {
 }
 
 .vehicle {
-  --soc-color: var(--q-vehicle-stroke);
+  --soc-color: var(--q-vehicle-fill);
 }
 
 use {

From 7b38edc502b7f87576c0b10168096481d7307215 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 17 Jun 2026 08:39:21 +0200
Subject: [PATCH 07/12] Make power and charge mode text same color as icons

---
 .../energyFlowChart/EnergyFlowChart.vue       | 47 ++++++-------------
 .../energy-flow-chart-models.ts               |  2 +-
 2 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 95c7b06616..9537fdbd10 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -164,19 +164,19 @@ const chargePoint3Discharging = computed(
 const translateChargeMode = (mode: string) => {
   switch (mode) {
     case 'instant_charging':
-      return { label: 'Sofort', class: 'danger' };
+      return { label: 'Sofort' };
     case 'pv_charging':
-      return { label: 'PV', class: 'success' };
+      return { label: 'PV' };
     case 'scheduled_charging':
-      return { label: 'Zielladen', class: 'primary' };
+      return { label: 'Zielladen' };
     case 'time_charging':
-      return { label: 'Zeitladen', class: 'warning' };
+      return { label: 'Zeitladen' };
     case 'eco_charging':
-      return { label: 'Eco', class: 'secondary' };
+      return { label: 'Eco' };
     case 'stop':
-      return { label: 'Stop', class: 'dark' };
+      return { label: 'Stop' };
     default:
-      return { label: 'Stop', class: 'dark' };
+      return { label: 'Stop' };
   }
 };
 
@@ -323,11 +323,11 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'grid',
       class: {
         base: 'grid',
-        valueLabel: gridFeedIn.value
-          ? 'fill-success'
+        valueLabelColor: gridFeedIn.value
+          ? 'var(--q-positive)'
           : gridConsumption.value
-            ? 'fill-danger'
-            : '',
+            ? 'var(--q-grid-stroke)'
+            : 'var(--q-text)',
         animated: gridConsumption.value,
         animatedReverse: gridFeedIn.value,
       },
@@ -344,7 +344,6 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'home',
       class: {
         base: 'home',
-        valueLabel: '',
         animated: homeProduction.value,
         animatedReverse: homeConsumption.value,
       },
@@ -361,7 +360,6 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'pv',
       class: {
         base: 'pv',
-        valueLabel: 'fill-success',
         animated: pvProduction.value,
         animatedReverse: pvConsumption.value,
       },
@@ -378,7 +376,6 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'battery',
       class: {
         base: 'battery',
-        valueLabel: '',
         animated: batteryDischarging.value,
         animatedReverse: batteryCharging.value,
       },
@@ -399,7 +396,6 @@ const svgComponents = computed((): FlowComponent[] => {
         class: {
           base: 'charge-point',
           animationId: 'charge-point-1',
-          valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
         },
@@ -425,8 +421,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'vehicle',
             animationId: 'vehicle-1',
-            valueLabel:
-              'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
             animatedReverse: chargePoint1Charging.value,
           },
@@ -455,7 +449,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'charge-point',
             animationId: 'charge-point-2',
-            valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
           },
@@ -482,8 +475,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'vehicle',
             animationId: 'vehicle-2',
-            valueLabel:
-              'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
           },
@@ -512,7 +503,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'charge-point',
             animationId: 'charge-point-3',
-            valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
           },
@@ -536,8 +526,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'vehicle',
             animationId: 'vehicle-3',
-            valueLabel:
-              'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
           },
@@ -565,7 +553,6 @@ const svgComponents = computed((): FlowComponent[] => {
         class: {
           base: 'charge-point',
           animationId: 'charge-point-sum',
-          valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
         },
@@ -818,7 +805,9 @@ const svgRectWidth = computed(
             </tspan>
             <tspan
               :id="`value-${component.id}`"
-              :class="component.class.valueLabel"
+              :style="{
+                fill: component.class.valueLabelColor ?? component.iconColor,
+              }"
               text-anchor="end"
               :x="2 * svgSize.circleRadius + svgSize.strokeWidth"
               :y="svgSize.textSize"
@@ -1027,14 +1016,6 @@ text {
   fill-opacity: 1;
 }
 
-text .fill-success {
-  fill: var(--q-positive);
-}
-
-text .fill-danger {
-  fill: var(--q-grid-stroke);
-}
-
 .battery {
   --soc-color: var(--q-battery-stroke);
 }
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index 0ec7f704d7..9db5e13293 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -15,7 +15,7 @@ export interface SvgSize {
 export interface ComponentClass {
   base: string;
   animationId?: string;
-  valueLabel: string;
+  valueLabelColor?: string;
   animated?: boolean;
   animatedReverse?: boolean;
   powerCategory?: string;

From 73675e674f298076a993163008a792800d853334 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 17 Jun 2026 10:31:59 +0200
Subject: [PATCH 08/12] Energy flow chart -  responsive column spacing

---
 .../energyFlowChart/EnergyFlowChart.vue       | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 9537fdbd10..4a239336c3 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useQuasar } from 'quasar';
 import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
@@ -11,6 +12,7 @@ import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 
 const mqttStore = useMqttStore();
+const $q = useQuasar();
 
 const svgSize = ref<SvgSize>({
   xMin: 0,
@@ -24,6 +26,21 @@ const svgSize = ref<SvgSize>({
   numColumns: 3,
 });
 
+const BASE_CHART_WIDTH = 150;
+const chartWidth = computed(() => {
+  if ($q.screen.gt.md) return 170;
+  if ($q.screen.gt.sm) return 160;
+  return BASE_CHART_WIDTH;
+});
+
+watch(
+  chartWidth,
+  (newValue) => {
+    svgSize.value.xMax = newValue;
+  },
+  { immediate: true },
+);
+
 const svgViewBox = computed(
   () =>
     `${svgSize.value.xMin} ${svgSize.value.yMin} ${svgSize.value.xMax} ${svgSize.value.yMax}`,
@@ -645,7 +662,7 @@ const beginAnimation = (elementId: string) => {
 
 const svgRectWidth = computed(
   () =>
-    (svgSize.value.xMax -
+    (BASE_CHART_WIDTH -
       svgSize.value.xMin -
       svgSize.value.strokeWidth -
       svgSize.value.numColumns) /

From 806f1cfa9e3d0f427b852f5c2b3c419c601ed5f9 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 17 Jun 2026 10:49:01 +0200
Subject: [PATCH 09/12] Energy flow chart - Set font - Roboto

---
 .../src/components/charts/energyFlowChart/EnergyFlowChart.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 4a239336c3..5e235f1df2 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1028,7 +1028,7 @@ feDropShadow {
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;
-  font-family: Arial;
+  font-family: 'Roboto', sans-serif;
   fill: var(--q-text);
   fill-opacity: 1;
 }

From 3d0b605ea5134a61ac8d472d7df7b6eeb08040cc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 17 Jun 2026 13:19:30 +0200
Subject: [PATCH 10/12] Energy flow chart - Change clip path for label
 animation

---
 .../energyFlowChart/EnergyFlowChart.vue       | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 5e235f1df2..8ff7ddeb45 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -668,6 +668,22 @@ const svgRectWidth = computed(
       svgSize.value.numColumns) /
     svgSize.value.numColumns,
 );
+
+const labelClipPath = computed(() => {
+  const cr = svgSize.value.circleRadius;
+  const iconCenter = cr - svgRectWidth.value / 2; // icon circle center x
+  const curveStart = svgRectWidth.value / 2 - cr; // where the right curve begins
+  const top = -cr;
+  const bottom = cr;
+  return (
+    `M ${iconCenter} ${top} ` +
+    `L ${curveStart} ${top} ` +
+    `A ${cr} ${cr} 0 0 1 ${curveStart} ${bottom} ` +
+    `L ${iconCenter} ${bottom} ` +
+    `A ${cr} ${cr} 0 0 0 ${iconCenter} ${top} ` +
+    'Z'
+  );
+});
 </script>
 
 <template>
@@ -748,14 +764,7 @@ const svgRectWidth = computed(
               />
             </clipPath>
             <clipPath :id="`clip-label-${component.id}`">
-              <rect
-                :x="-svgRectWidth / 2"
-                :y="-svgSize.circleRadius"
-                :width="svgRectWidth"
-                :height="svgSize.circleRadius * 2"
-                :rx="svgSize.circleRadius"
-                :ry="svgSize.circleRadius"
-              />
+              <path :d="labelClipPath" />
             </clipPath>
             <linearGradient
               :id="`gradient-soc-${component.id}`"

From e22b3229e8bd359b14aa64a59906d50d4b5a1474 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 17 Jun 2026 13:24:07 +0200
Subject: [PATCH 11/12] Daily totals - update secondary counter color

---
 .../source/src/components/charts/dailyTotals/DailyTotals.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index d5619713dd..d1009d13fe 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -263,7 +263,7 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.counterDailyImported('textValue', id) as string,
           exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
-        color: 'var(--q-grid-stroke)',
+        color: 'var(--q-secondary-counter-stroke)',
       });
     }
   });

From ae49da125617da89561856e220797d37c05d9847 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 18 Jun 2026 10:13:27 +0200
Subject: [PATCH 12/12] DailyTotals - Secondary counter custom color

---
 .../source/src/components/charts/dailyTotals/DailyTotals.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index d1009d13fe..226067dbd9 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -263,7 +263,7 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.counterDailyImported('textValue', id) as string,
           exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
-        color: 'var(--q-secondary-counter-stroke)',
+        color: mqttStore.gridComponentColor(id) || 'var(--q-secondary-counter-stroke)',
       });
     }
   });