From 34d5040c6b59ea3dfd2ddf74e8abe1f616d9db39 Mon Sep 17 00:00:00 2001
From: LKuemmel <lena.kuemmel@openwb.de>
Date: Thu, 31 Jul 2025 09:20:23 +0200
Subject: [PATCH 01/22] update logfiles

---
 packages/helpermodules/update_config.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/helpermodules/update_config.py b/packages/helpermodules/update_config.py
index 191d676931..8a3656e822 100644
--- a/packages/helpermodules/update_config.py
+++ b/packages/helpermodules/update_config.py
@@ -2503,6 +2503,13 @@ def upgrade(topic: str, payload) -> None:
         self._loop_all_received_topics(upgrade)
         self._append_datastore_version(90)
 
+    BLACK = "#000000"
+    BLUE = "#007bff"
+    CYAN = "#17a2b8"
+    GREEN = "#28a745"
+    RED = "#dc3545"
+    YELLOW = "#ffc107"
+
     def upgrade_datastore_91(self) -> None:
         def upgrade(topic: str, payload) -> Optional[dict]:
             if re.search("openWB/vehicle/template/ev_template/[0-9]+$", topic) is not None:

From 7a70435c6f860d5e86c04a4b02bbfa16a016b26b Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 8 Apr 2026 09:49:06 +0200
Subject: [PATCH 02/22] Koala - Add custom colors - charge points

---
 .../source/src/components/ChargePointCard.vue | 23 ++++++++++++++++---
 .../koala/source/src/stores/mqtt-store.ts     | 22 ++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index b89293897c..c7430ab0cf 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,8 +1,16 @@
 <template>
   <q-card
     ref="cardRef"
-    class="card-width"
-    :class="{ 'full-height': props.fullHeight }"
+    class="charge-point-card"
+    :class="[
+      { 'full-height': props.fullHeight },
+      chargePointUserDefinedColor && 'has-custom-color',
+    ]"
+    :style="
+      chargePointUserDefinedColor && {
+        '--cp-color': chargePointUserDefinedColor,
+      }
+    "
   >
     <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="name">
@@ -312,10 +320,19 @@ const refreshSoc = () => {
     message: 'SoC Update angefordert.',
   });
 };
+
+const chargePointUserDefinedColor = computed(() =>
+  mqttStore.chargePointUserDefinedColor(props.chargePointId),
+);
 </script>
 <style lang="scss" scoped>
-.card-width {
+.charge-point-card {
   width: 22em;
+  border: none;
+}
+
+.charge-point-card.has-custom-color {
+  border: 2px solid var(--cp-color);
 }
 
 .q-card__section {
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 d405a29ebb..4728222714 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
@@ -647,6 +647,12 @@ export const useMqttStore = defineStore('mqtt', () => {
       const path = objectPath.split('.');
       for (let i = 0; i < path.length; i++) {
         if (!Object.hasOwn(topicObject, path[i])) {
+          if (defaultValue !== undefined) {
+            // expected missing optional value - no error
+            console.debug('optional path not found', topicObject, path[i]);
+            return defaultValue;
+          }
+          // real error case
           console.error('path not found', topicObject, path[i]);
           return defaultValue;
         }
@@ -1215,6 +1221,21 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the charge point user defined color identified by the charge point id
+   * @param chargePointId charge point id
+   * @returns string | undefined
+   */
+  const chargePointUserDefinedColor = computed(() => {
+    return (chargePointId: number) => {
+      return getValue.value(
+        `openWB/chargepoint/${chargePointId}/config`,
+        'color',
+        null,
+      ) as string | undefined;
+    };
+  });
+
   /**
    * trigger a force SOC update for the connected vehicle
    * @param chargePointId charge point id
@@ -3986,6 +4007,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointChargingCurrent,
     chargePointStateMessage,
     chargePointFaultState,
+    chargePointUserDefinedColor,
     chargePointFaultMessage,
     temporaryChargeModeActive,
     chargePointChargeType,

From 52bbdba63a932e0e2a5e9769e8cceb9c38518e95 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 8 Apr 2026 14:18:52 +0200
Subject: [PATCH 03/22] Koala - Add custom colors - battery

---
 .../source/src/components/BatteryCard.vue      | 18 ++++++++++++++----
 .../source/src/components/ChargePointCard.vue  |  4 ++--
 .../source/src/stores/mqtt-store-model.ts      |  1 +
 .../koala/source/src/stores/mqtt-store.ts      | 12 ++++++++++++
 4 files changed, 29 insertions(+), 6 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 53ded2c413..0d23fe1f09 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -1,11 +1,12 @@
 <template>
   <q-card
     ref="cardRef"
-    class="card-width"
-    :class="{
+    class="battery-card"
+    :class="[{
       'battery-sum': props.batteryId === -1,
       'full-height': props.fullHeight,
-    }"
+    }, batteryUserDefinedColor && 'has-custom-color']"
+    :style="batteryUserDefinedColor && { '--component-color': batteryUserDefinedColor }"
   >
     <q-card-section class="row no-wrap items-center justify-between">
       <div class="text-h6 text-bold ellipsis" :title="cardTitle">
@@ -163,11 +164,20 @@ const dailyExportedEnergy = computed(() => {
     '---'
   );
 });
+
+const batteryUserDefinedColor = computed(() =>
+  mqttStore.batteryUserDefinedColor(props.batteryId)
+);
 </script>
 
 <style scoped lang="scss">
-.card-width {
+.battery-card {
   width: 22em;
+  border: none;
+}
+
+.battery-card.has-custom-color {
+  border-left: 4px solid var(--component-color);
 }
 
 .q-card__section {
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index c7430ab0cf..b7a2627ffb 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -8,7 +8,7 @@
     ]"
     :style="
       chargePointUserDefinedColor && {
-        '--cp-color': chargePointUserDefinedColor,
+        '--component-color': chargePointUserDefinedColor,
       }
     "
   >
@@ -332,7 +332,7 @@ const chargePointUserDefinedColor = computed(() =>
 }
 
 .charge-point-card.has-custom-color {
-  border: 2px solid var(--cp-color);
+  border-left: 4px solid var(--component-color);
 }
 
 .q-card__section {
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 015d773507..bfc2ef70aa 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -212,6 +212,7 @@ export interface BatteryConfiguration {
   type: string;
   id: number;
   configuration: object;
+  color: string;
 }
 
 export interface CounterConfiguration {
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 4728222714..21275e7a77 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
@@ -2890,6 +2890,17 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+  const batteryUserDefinedColor = computed(() => {
+  return (batteryId: number): string | null => {
+    if (batteryId === -1) return null;
+    const configurations = getWildcardValues.value(
+      `openWB/system/device/+/component/${batteryId}/config`,
+    ) as Record<string, BatteryConfiguration>;
+    const config = Object.values(configurations)[0];
+    return config?.color ?? null;
+  };
+});
+
   ////////////////////////////// vehicle data ////////////////////////////////
 
   /**
@@ -4108,6 +4119,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryTotalPower,
     batteryChargePriorityRange,
     batteryMode,
+    batteryUserDefinedColor,
     // Grid data
     getGridId,
     getAllCounterIds,

From 41e0c4a6c18c1396eb20d1706eb317663ab2e09a Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 10 Apr 2026 14:36:27 +0200
Subject: [PATCH 04/22] Daily totals - multiple batteries dropdown - icons:
 user defined colors

---
 .../charts/dailyTotals/DailyTotals.vue        | 113 +++++++++++++++---
 .../charts/dailyTotals/DailyTotalsRow.vue     |  14 ++-
 .../components/models/daily-totals-model.ts   |   2 +
 .../source/src/css/quasar.variables.scss      |   3 +
 .../source/src/stores/mqtt-store-model.ts     |  13 +-
 .../koala/source/src/stores/mqtt-store.ts     | 111 ++++++++++++++---
 6 files changed, 203 insertions(+), 53 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 0c310e39a9..99f05cc084 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
@@ -55,7 +55,11 @@
           v-model="expanded[item.id]"
           :class="[item.id, 'card']"
           :header-class="
-            item.id === 'chargepoint' ? 'cursor-pointer' : 'no-pointer'
+            item.id === 'chargepoint' && individualChargePointData.length > 1
+              ? 'cursor-pointer'
+              : item.id === 'battery' && individualBatteryData.length > 1
+                ? 'cursor-pointer'
+                : 'no-pointer'
           "
         >
           <template #header>
@@ -65,8 +69,10 @@
               :rowExpanded="expanded[item.id]"
               :secondaryComponentsConfigured="
                 item.id === 'chargepoint'
-                  ? individualChargePointData.length > 0
-                  : false
+                  ? individualChargePointData.length > 1
+                  : item.id === 'battery'
+                    ? individualBatteryData.length > 1
+                    : false
               "
               :componentNameVisible="componentNameVisible"
               :currentPowerVisible="currentPowerVisible"
@@ -137,6 +143,26 @@
               </template>
             </DailyTotalsRow>
           </div>
+          <div v-if="item.id === 'battery'">
+            <DailyTotalsRow
+              v-for="batteryData in individualBatteryData"
+              :key="batteryData.id"
+              :item="batteryData"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+            >
+              <template #right-label>
+                <div>Geladen:</div>
+                <div>Entladen:</div>
+              </template>
+              <template #right-value>
+                <div>{{ batteryData.today?.imported }}</div>
+                <div>{{ batteryData.today?.exported }}</div>
+              </template>
+            </DailyTotalsRow>
+          </div>
         </q-expansion-item>
       </div>
     </div>
@@ -170,7 +196,7 @@ const expanded = ref({
   pv: false,
 });
 
-const componentNameVisible = computed(() => $q.screen.width >= 375);
+const componentNameVisible = computed(() => $q.screen.width >= 300);
 const currentPowerVisible = computed(() => $q.screen.width >= 500);
 const socValueVisible = computed(() => $q.screen.width >= 700);
 
@@ -189,23 +215,28 @@ const secondaryCountersConfigured = computed(
   () => secondaryCounterData.value.length > 0,
 );
 
+const gridID = computed(() => mqttStore.getGridId).value;
+const pvID = computed(() => mqttStore.getPvId).value;
+
 const gridData = computed((): DailyTotalsItem => {
   let data: DailyTotalsItem = {
     id: 'grid',
     title: 'Zähler',
-    icon: 'icons/owbCounter.svg',
+    level: 'primary',
+    icon: 'speed',
   };
   if (gridPower.value !== undefined) {
     data = {
       ...data,
       title: 'Netz',
-      icon: 'icons/owbGrid.svg',
+      icon: 'factory',
       power: mqttStore.getCounterPower('textValue') as string,
       powerValue: mqttStore.getCounterPower('value') as number,
       today: {
         imported: mqttStore.counterDailyImported('textValue') as string,
         exported: mqttStore.counterDailyExported('textValue') as string,
       },
+      color: mqttStore.getGridComponentColor(gridID)
     };
   }
   return data;
@@ -219,13 +250,15 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
       counters.push({
         id: `counter-${id}`,
         title: name,
-        icon: 'icons/owbCounter.svg',
+        level: 'secondary',
+        icon: 'speed',
         power: mqttStore.getCounterPower('textValue', id) as string,
         powerValue: mqttStore.getCounterPower('value', id) as number,
         today: {
           imported: mqttStore.counterDailyImported('textValue', id) as string,
           exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
+        color: mqttStore.getGridComponentColor(id),
       });
     }
   });
@@ -240,7 +273,8 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
       chargePoints.push({
         id: `chargepoint-${id}`,
         title: name,
-        icon: 'icons/owbChargePoint.svg',
+        level: 'secondary',
+        icon: 'ev_station',
         power: mqttStore.chargePointPower(id, 'textValue') as string,
         powerValue: mqttStore.chargePointPower(id, 'value') as number,
         today: {
@@ -253,38 +287,74 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
             id,
           ) as string,
         },
+        color: mqttStore.chargePointUserDefinedColor(id),
       });
     }
   });
   return chargePoints;
 });
 
+const individualBatteryData = computed((): DailyTotalsItem[] => {
+  const batteries: DailyTotalsItem[] = [];
+
+  mqttStore.batteryIds.forEach((id) => {
+    const name = mqttStore.batteryName(id);
+    if (name !== undefined) {
+      batteries.push({
+        id: `battery-${id}`,
+        title: name,
+        level: 'secondary',
+        icon: 'battery_full',
+        soc: mqttStore.batterySoc(id),
+        power: mqttStore.batteryPower(id, 'textValue') as string,
+        powerValue: mqttStore.batteryPower(id, 'value') as number,
+        today: {
+          imported: mqttStore.batteryDailyImported(id, 'textValue') as string,
+          exported: mqttStore.batteryDailyExported(id, 'textValue') as string,
+        },
+        color: mqttStore.batteryUserDefinedColor(id),
+      });
+    }
+  });
+  return batteries;
+});
+
 const componentData = computed((): DailyTotalsItem[] => {
   const components: DailyTotalsItem[] = [];
 
   if (batteryConfigured.value) {
-    components.push({
+    let item: DailyTotalsItem = {
       id: 'battery',
       title: 'Speicher',
-      icon: 'icons/owbBattery.svg',
-      soc: mqttStore.batterySocTotal as number,
+      level: 'primary',
+      icon: 'battery_full',
+    };
+    item = {
+      ...item,
+      soc: mqttStore.batterySocTotal,
       power: mqttStore.batteryTotalPower('textValue') as string,
       powerValue: mqttStore.batteryTotalPower('value') as number,
       today: {
         imported: mqttStore.batteryDailyImportedTotal('textValue') as string,
         exported: mqttStore.batteryDailyExportedTotal('textValue') as string,
       },
-    });
+    };
+    if (mqttStore.batteryIds.length === 1) {
+      item.color = mqttStore.batteryUserDefinedColor(mqttStore.batteryIds[0]);
+    }
+    components.push(item);
   }
 
   if (pvConfigured.value) {
     components.push({
       id: 'pv',
       title: 'PV',
-      icon: 'icons/owbPV.svg',
+      level: 'primary',
+      icon: 'solar_power',
       power: mqttStore.getPvPower('textValue') as string,
       powerValue: mqttStore.getPvPower('value') as number,
       today: { exported: mqttStore.pvDailyExported('textValue') as string },
+      color: mqttStore.getPvComponentColor(pvID),
     });
   }
 
@@ -292,7 +362,8 @@ const componentData = computed((): DailyTotalsItem[] => {
     components.push({
       id: 'house',
       title: 'Haus',
-      icon: 'icons/owbHouse.svg',
+      level: 'primary',
+      icon: 'home',
       power: mqttStore.getHomePower('textValue') as string,
       powerValue: mqttStore.getHomePower('value') as number,
       today: { imported: mqttStore.homeDailyYield('textValue') as string },
@@ -302,8 +373,9 @@ const componentData = computed((): DailyTotalsItem[] => {
   if (chargePointConfigured.value || chargePointSumPowerAvailable.value) {
     let item: DailyTotalsItem = {
       id: 'chargepoint',
-      title: 'Ladepunkte',
-      icon: 'icons/owbChargePoint.svg',
+      title: mqttStore.chargePointIds.length > 1  ? 'Ladepunkte' : 'Ladepunkt',
+      level: 'primary',
+      icon: 'ev_station',
     };
     if (chargePointSumPowerAvailable.value) {
       item = {
@@ -315,6 +387,11 @@ const componentData = computed((): DailyTotalsItem[] => {
           exported: mqttStore.chargePointDailyExported('textValue') as string,
         },
       };
+      if (mqttStore.chargePointIds.length === 1) {
+        item.color = mqttStore.chargePointUserDefinedColor(
+          mqttStore.chargePointIds[0],
+        );
+      }
     }
     components.push(item);
   }
@@ -381,11 +458,11 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', calculateRowHeight);
 });
 
-// Recompute when rows or grid expansion change
+// Recompute when rows or grid / chargepoint / battery expansion change
 watch(
   () => ({
     rows: componentData.value.length + secondaryCounterData.value.length,
-    expanded: expanded.value.grid,
+    expanded: expanded.value,
   }),
   () => calculateRowHeight(),
 );
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 6fb4e9347a..3b90399878 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
@@ -2,12 +2,17 @@
   <div class="component-container">
     <!-- Icon -->
     <div class="col-icon">
-      <img :src="props.item.icon" class="icon" />
+      <q-icon
+        :name="props.item.icon"
+        class="icon"
+        size="2rem"
+        :style="props.item.color && { color: props.item.color }"
+      />
     </div>
     <!-- Title -->
     <div class="col-title text-weight-bold">
       <div v-if="componentNameVisible" class="title-wrapper">
-        <template v-if="props.item.id.startsWith('counter-')">
+        <template v-if="props.item.level === 'secondary'">
           <div class="ellipsis-wrapper">
             {{ props.item.title }}
             <q-tooltip>{{ props.item.title }}</q-tooltip>
@@ -159,10 +164,7 @@ const arrowDirection = (id: string) => {
 }
 .icon {
   width: 1.75rem;
-  filter: brightness(0.4);
-}
-.body--dark .icon {
-  filter: brightness(1);
+  color: var(--q-diagram-icon);
 }
 .col-title {
   flex: 0 0 5.5rem;
diff --git a/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts b/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts
index a2d4738319..453ab96cb3 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts
@@ -2,6 +2,7 @@ export interface DailyTotalsItem {
   id: string;
   title: string;
   icon: string;
+  level: 'primary' | 'secondary';
   soc?: number;
   power?: string;
   powerValue?: number;
@@ -14,4 +15,5 @@ export interface DailyTotalsItem {
   rightLabel?: string;
   rightValue?: string;
   arrow?: string;
+  color?: string;
 }
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 7dda260791..a8ef8ab5ce 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
@@ -50,6 +50,7 @@ $battery-fill-flow-diagram: #c6a583;
 $charge-point-stroke: #5c93d1;
 $charge-point-fill: #5c93d14d;
 $charge-plan-link-button: #6b757d;
+$diagram-icon: #717171;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -80,6 +81,7 @@ $charge-plan-link-button: #6b757d;
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
   --q-charge-plan-link-button: #{$charge-plan-link-button};
+  --q-diagram-icon: #{$diagram-icon};
 
   // Main background
   background-color: var(--q-background-1);
@@ -308,6 +310,7 @@ $dark-charge-plan-link-button: #75787a;
   --q-dark-daily-totals-house-fill: #{$dark-daily-totals-house-fill};
   --q-dark-daily-totals-chargepoint-fill: #{$dark-daily-totals-chargepoint-fill};
   --q-charge-plan-link-button: #{$dark-charge-plan-link-button};
+  --q-diagram-icon: #{$white};
 
   // Main background
   background-color: $dark-page;
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index bfc2ef70aa..3810f16ccb 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -203,7 +203,7 @@ export interface GraphDataPoint {
   [key: `ev${number}-soc`]: number | null;
 }
 
-export interface BatteryConfiguration {
+export interface ComponentConfiguration {
   name: string;
   info: {
     manufacturer: string;
@@ -215,17 +215,6 @@ export interface BatteryConfiguration {
   color: string;
 }
 
-export interface CounterConfiguration {
-  name: string;
-  info: {
-    manufacturer: string;
-    model: string;
-  };
-  type: string;
-  id: number;
-  configuration: object;
-}
-
 export interface RangeValue {
   min: number;
   max: number;
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 21275e7a77..76d93796c5 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
@@ -19,8 +19,7 @@ import type {
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
-  BatteryConfiguration,
-  CounterConfiguration,
+  ComponentConfiguration,
   ThemeConfiguration,
   VehicleActivePlan,
   TimeChargingPlan,
@@ -763,6 +762,20 @@ export const useMqttStore = defineStore('mqtt', () => {
     );
   });
 
+  /**
+   * Get component attributes
+   * @param componentId component ID
+   * @returns ComponentConfiguration | undefined
+   */
+  const getComponentAttributes = computed(() => {
+    return (componentId: number): ComponentConfiguration | undefined => {
+      const configurations = getWildcardValues.value(
+        `openWB/system/device/+/component/${componentId}/config`,
+      ) as Record<string, ComponentConfiguration>;
+      return Object.values(configurations)[0];
+    };
+  });
+
   /**
    * Check if user management is active
    * Defaults to true if the value is not set as this may be due to insufficient permissions
@@ -1224,15 +1237,20 @@ export const useMqttStore = defineStore('mqtt', () => {
   /**
    * Get the charge point user defined color identified by the charge point id
    * @param chargePointId charge point id
-   * @returns string | undefined
+   * @returns string | null
    */
   const chargePointUserDefinedColor = computed(() => {
-    return (chargePointId: number) => {
-      return getValue.value(
+    return (chargePointId: number): string | null => {
+      const DEFAULT_COLOR = '#007bff';
+      const color = getValue.value(
         `openWB/chargepoint/${chargePointId}/config`,
         'color',
         null,
-      ) as string | undefined;
+      ) as string | null;
+      if (!color || color === DEFAULT_COLOR) {
+        return null;
+      }
+      return color;
     };
   });
 
@@ -2665,7 +2683,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     return (batteryId: number): string => {
       const configurations = getWildcardValues.value(
         `openWB/system/device/+/component/${batteryId}/config`,
-      ) as { [key: string]: BatteryConfiguration };
+      ) as { [key: string]: ComponentConfiguration };
       if (Object.keys(configurations).length === 0) {
         return undefined;
       }
@@ -2890,16 +2908,22 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+  /**
+   * Get the battery user defined color identified by the battery id
+   * @param batteryId battery id
+   * @returns string | null
+   */
   const batteryUserDefinedColor = computed(() => {
-  return (batteryId: number): string | null => {
-    if (batteryId === -1) return null;
-    const configurations = getWildcardValues.value(
-      `openWB/system/device/+/component/${batteryId}/config`,
-    ) as Record<string, BatteryConfiguration>;
-    const config = Object.values(configurations)[0];
-    return config?.color ?? null;
-  };
-});
+    return (batteryId: number): string | null => {
+      const DEFAULT_COLOR = '#ffc107';
+      if (batteryId === -1) return null;
+      const configurations = getWildcardValues.value(
+        `openWB/system/device/+/component/${batteryId}/config`,
+      ) as Record<string, ComponentConfiguration>;
+      const config = Object.values(configurations)[0];
+      return config?.color === DEFAULT_COLOR ? null : (config?.color ?? null);
+    };
+  });
 
   ////////////////////////////// vehicle data ////////////////////////////////
 
@@ -3740,11 +3764,25 @@ export const useMqttStore = defineStore('mqtt', () => {
     return (componentId: number): string => {
       const configurations = getWildcardValues.value(
         `openWB/system/device/+/component/${componentId}/config`,
-      ) as { [key: string]: CounterConfiguration };
+      ) as { [key: string]: ComponentConfiguration };
       return Object.values(configurations)[0]?.name || undefined;
     };
   });
 
+  /**
+   * Get pv component color
+   * @param componentId component ID
+   * @returns GridConfiguration | null
+   */
+  const getGridComponentColor = computed(() => {
+    return (componentId: number) => {
+      const DEFAULT_COLOR = '#dc3545';
+      return getComponentAttributes.value(componentId)?.color === DEFAULT_COLOR
+        ? null
+        : (getComponentAttributes.value(componentId)?.color ?? null);
+    };
+  });
+
   /**
    * Get counter power identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -3889,6 +3927,41 @@ export const useMqttStore = defineStore('mqtt', () => {
     );
   });
 
+  /**
+   * Get PV id from root of component hierarchy
+   * @returns number | undefined
+   */
+  const getPvId = computed(() => {
+    const hierarchy = getValue.value(
+      'openWB/counter/get/hierarchy',
+    ) as Hierarchy[];
+    if (hierarchy && hierarchy.length > 0) {
+      const firstElement = hierarchy[0];
+      // Filtere alle Kinder mit type === 'inverter'
+      const inverterChild = firstElement.children.find(
+        (child) => child.type === 'inverter',
+      );
+      if (inverterChild) {
+        return inverterChild.id;
+      }
+    }
+    return undefined;
+  });
+
+  /**
+   * Get pv component color
+   * @param componentId component ID
+   * @returns string | null
+   */
+  const getPvComponentColor = computed(() => {
+    return (componentId: number) => {
+      const DEFAULT_COLOR = '#28a745';
+      return getComponentAttributes.value(componentId)?.color === DEFAULT_COLOR
+        ? null
+        : (getComponentAttributes.value(componentId)?.color ?? null);
+    };
+  });
+
   /**
    * Get pv power
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -3994,6 +4067,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     themeConfiguration,
     systemDateTime,
     dataProtectionAcknowledged,
+    getComponentAttributes,
     // security settings
     userManagementActive,
     accessAllowed,
@@ -4125,6 +4199,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     getAllCounterIds,
     getSecondaryCounterIds,
     getComponentName,
+    getGridComponentColor,
     getCounterPower,
     counterDailyImported,
     counterDailyExported,
@@ -4133,6 +4208,8 @@ export const useMqttStore = defineStore('mqtt', () => {
     homeDailyYield,
     // PV data
     getPvConfigured,
+    getPvId,
+    getPvComponentColor,
     getPvPower,
     pvDailyExported,
     // Chart data

From f8c3499ddd2a2b686242288346626b9c5f25d53a Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 13 Apr 2026 08:13:31 +0200
Subject: [PATCH 05/22] Add SVG icons as vue components

---
 .../source/public/icons/owbBattery_2.svg      |  1 +
 .../source/public/icons/owbChargePoint_2.svg  |  1 +
 .../charts/dailyTotals/DailyTotals.vue        |  2 +-
 .../charts/dailyTotals/DailyTotalsRow.vue     | 19 ++++++----
 .../source/src/components/icons/BaseIcon.vue  | 38 +++++++++++++++++++
 .../src/components/icons/BatteryIcon.vue      | 12 ++++++
 .../src/components/icons/ChargePointIcon.vue  | 13 +++++++
 .../src/components/icons/CounterIcon.vue      | 15 ++++++++
 .../source/src/components/icons/GridIcon.vue  | 15 ++++++++
 .../source/src/components/icons/HouseIcon.vue | 17 +++++++++
 .../source/src/components/icons/PvIcon.vue    | 12 ++++++
 .../src/components/icons/VehicleIcon.vue      | 21 ++++++++++
 12 files changed, 158 insertions(+), 8 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg
 create mode 100644 packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/BatteryIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/ChargePointIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/CounterIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/GridIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/HouseIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/PvIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/icons/VehicleIcon.vue

diff --git a/packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg b/packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg
new file mode 100644
index 0000000000..709627ebb9
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"  /></svg>
\ No newline at end of file
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg b/packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg
new file mode 100644
index 0000000000..4b56f6fb09
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z" fill="" /></svg>
\ No newline at end of file
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 99f05cc084..dde6b51bd8 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
@@ -229,7 +229,7 @@ const gridData = computed((): DailyTotalsItem => {
     data = {
       ...data,
       title: 'Netz',
-      icon: 'factory',
+      icon: 'grid',
       power: mqttStore.getCounterPower('textValue') as string,
       powerValue: mqttStore.getCounterPower('value') as number,
       today: {
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 3b90399878..cb46003277 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
@@ -2,12 +2,7 @@
   <div class="component-container">
     <!-- Icon -->
     <div class="col-icon">
-      <q-icon
-        :name="props.item.icon"
-        class="icon"
-        size="2rem"
-        :style="props.item.color && { color: props.item.color }"
-      />
+      <BaseIcon :type="props.item.id" :color="props.item.color" class="base-icon" />
     </div>
     <!-- Title -->
     <div class="col-title text-weight-bold">
@@ -92,6 +87,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import BaseIcon from 'src/components/icons/BaseIcon.vue';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
 const mqttStore = useMqttStore();
@@ -162,10 +158,19 @@ const arrowDirection = (id: string) => {
   display: flex;
   justify-content: center;
 }
-.icon {
+.base-icon {
   width: 1.75rem;
+  height: 1.75rem;
   color: var(--q-diagram-icon);
 }
+
+:deep(.base-icon svg)  {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  vertical-align: middle;
+  overflow: hidden;
+}
 .col-title {
   flex: 0 0 5.5rem;
 }
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue
new file mode 100644
index 0000000000..94e1dd3723
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import GridIcon from 'src/components/icons/GridIcon.vue';
+import CounterIcon from 'src/components/icons/CounterIcon.vue';
+import BatteryIcon from 'src/components/icons/BatteryIcon.vue';
+import ChargePointIcon from 'src/components/icons/ChargePointIcon.vue';
+import VehicleIcon from 'src/components/icons/VehicleIcon.vue';
+import PvIcon from 'src/components/icons/PvIcon.vue';
+import HouseIcon from 'src/components/icons/HouseIcon.vue';
+
+const props = defineProps<{
+  type: string;
+  color?: string | null;
+}>();
+
+const iconMap = {
+  grid: GridIcon,
+  counter: CounterIcon,
+  battery: BatteryIcon,
+  chargepoint: ChargePointIcon,
+  pv: PvIcon,
+  house: HouseIcon,
+  vehicle: VehicleIcon,
+};
+
+const iconComponent = computed(() => {
+  // handle secondary IDs like "battery-1"
+  const baseType = props.type.split('-')[0];
+  return iconMap[baseType as keyof typeof iconMap] || null;
+});
+</script>
+
+<template>
+  <div :style="color ? { color } : undefined">
+    <component :is="iconComponent" v-if="iconComponent" />
+  </div>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/BatteryIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/BatteryIcon.vue
new file mode 100644
index 0000000000..da32ade45b
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/BatteryIcon.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"
+    />
+  </svg>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/ChargePointIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/ChargePointIcon.vue
new file mode 100644
index 0000000000..93e9685ee4
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/ChargePointIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z"
+      fill=""
+    />
+  </svg>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/CounterIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/CounterIcon.vue
new file mode 100644
index 0000000000..f6d4e67e16
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/CounterIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"
+    />
+    <path
+      d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"
+    />
+  </svg>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/GridIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/GridIcon.vue
new file mode 100644
index 0000000000..e0d5c010b3
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/GridIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g transform="scale(1.1)">
+    <path
+      d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"
+    />
+    </g>
+  </svg>
+</template>
+
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/HouseIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/HouseIcon.vue
new file mode 100644
index 0000000000..8a7b9cc7c5
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/HouseIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g transform="scale(0.9)">
+    <path
+      d="M848 539.648a32.128 32.128 0 0 1 24.874667 31.189333v412.885334a32.085333 32.085333 0 0 1-32 32h-253.824a32.085333 32.085333 0 0 1-32-32v-217.557334H470.613333v217.557334a32.085333 32.085333 0 0 1-32 32H183.125333a32.085333 32.085333 0 0 1-32-32v-412.885334a31.957333 31.957333 0 0 1 63.488-5.717333c0.426667 2.517333 0.384 3.157333 0.512 5.717333v380.885334H406.613333v-217.557334a32.085333 32.085333 0 0 1 32-32h148.437334a32.170667 32.170667 0 0 1 32 32v217.557334h189.824v-380.885334a32.256 32.256 0 0 1 33.450666-31.957333c2.858667 0.256 2.858667 0.256 5.674667 0.768z"
+    />
+    <path
+      d="M774.698667 267.989333l228.224 226.730667c0.768 0.853333 1.578667 1.664 2.304 2.56a31.786667 31.786667 0 0 1 7.04 22.613333 32.341333 32.341333 0 0 1-32.682667 29.482667 32.170667 32.170667 0 0 1-16.384-4.949333c-2.602667-1.664-3.114667-2.261333-5.418667-4.309334L507.690667 92.842667 57.386667 540.117333l-2.56 2.304c-0.938667 0.64-1.834667 1.365333-2.816 2.005334a32.170667 32.170667 0 0 1-23.296 4.394666 32.341333 32.341333 0 0 1-25.856-32.384 32.170667 32.170667 0 0 1 5.077333-16.341333c1.664-2.602667 2.304-3.114667 4.352-5.418667L485.12 25.045333c0.853333-0.725333 1.621333-1.536 2.517333-2.218666a31.701333 31.701333 0 0 1 11.818667-6.016c2.858667-0.768 3.626667-0.725333 6.570667-1.024h3.328c1.109333 0.128 2.218667 0.170667 3.328 0.341333a31.744 31.744 0 0 1 12.373333 4.736c2.474667 1.621333 2.986667 2.218667 5.205333 4.181333l179.541334 178.432c-0.042667-28.928 0.213333-57.856 0.853333-86.741333a32 32 0 0 1 62.037333-9.557333c1.152 3.072 1.92 9.557333 1.92 9.557333l0.085334 151.253333z"
+    />
+    </g>
+  </svg>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/PvIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/PvIcon.vue
new file mode 100644
index 0000000000..26ffadb1e7
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/PvIcon.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"
+    />
+  </svg>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/VehicleIcon.vue b/packages/modules/web_themes/koala/source/src/components/icons/VehicleIcon.vue
new file mode 100644
index 0000000000..cbd35ecf4a
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/icons/VehicleIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    id="svg4"
+    sodipodi:docname="owbCar.svg"
+    inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+  >
+    <defs id="defs8" />
+    <path
+      d="M213.333333 469.333333l64-192h469.333334L810.666667 469.333333m-64 213.333334a64 64 0 0 1-64-64 64 64 0 0 1 64-64 64 64 0 0 1 64 64 64 64 0 0 1-64 64m-469.333334 0A64 64 0 0 1 213.333333 618.666667 64 64 0 0 1 277.333333 554.666667 64 64 0 0 1 341.333333 618.666667 64 64 0 0 1 277.333333 682.666667M807.253333 256c-8.533333-24.746667-32.426667-42.666667-60.586666-42.666667h-469.333334c-28.16 0-52.053333 17.92-60.586666 42.666667L128 512v341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666666h512v42.666666a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-341.333333l-88.746667-256z"
+      fill=""
+      id="path2"
+    />
+  </svg>
+</template>

From 513fec7589cd2aebb7def0ed62f78b136c0d1e45 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 13 Apr 2026 09:41:57 +0200
Subject: [PATCH 06/22] formatting

---
 .../charts/dailyTotals/DailyTotalsRow.vue     | 10 +++++--
 .../{icons => svgIcons}/BaseIcon.vue          | 30 +++++++++----------
 .../{icons => svgIcons}/BatteryIcon.vue       |  0
 .../{icons => svgIcons}/ChargePointIcon.vue   |  0
 .../{icons => svgIcons}/CounterIcon.vue       |  0
 .../{icons => svgIcons}/GridIcon.vue          |  0
 .../{icons => svgIcons}/HouseIcon.vue         |  0
 .../components/{icons => svgIcons}/PvIcon.vue |  0
 .../{icons => svgIcons}/VehicleIcon.vue       |  0
 9 files changed, 22 insertions(+), 18 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/BaseIcon.vue (50%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/BatteryIcon.vue (100%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/ChargePointIcon.vue (100%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/CounterIcon.vue (100%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/GridIcon.vue (100%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/HouseIcon.vue (100%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/PvIcon.vue (100%)
 rename packages/modules/web_themes/koala/source/src/components/{icons => svgIcons}/VehicleIcon.vue (100%)

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 cb46003277..bcc9ac437b 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
@@ -2,7 +2,11 @@
   <div class="component-container">
     <!-- Icon -->
     <div class="col-icon">
-      <BaseIcon :type="props.item.id" :color="props.item.color" class="base-icon" />
+      <BaseIcon
+        :type="props.item.id"
+        :color="props.item.color"
+        class="base-icon"
+      />
     </div>
     <!-- Title -->
     <div class="col-title text-weight-bold">
@@ -87,7 +91,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import BaseIcon from 'src/components/icons/BaseIcon.vue';
+import BaseIcon from 'src/components/svgIcons/BaseIcon.vue';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
 const mqttStore = useMqttStore();
@@ -164,7 +168,7 @@ const arrowDirection = (id: string) => {
   color: var(--q-diagram-icon);
 }
 
-:deep(.base-icon svg)  {
+:deep(.base-icon svg) {
   width: 100%;
   height: 100%;
   fill: currentColor;
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
similarity index 50%
rename from packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
index 94e1dd3723..2b26360ab1 100644
--- a/packages/modules/web_themes/koala/source/src/components/icons/BaseIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
@@ -1,13 +1,19 @@
+<template>
+  <div :style="color ? { color } : undefined">
+    <component :is="iconComponent" v-if="iconComponent" />
+  </div>
+</template>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import GridIcon from 'src/components/icons/GridIcon.vue';
-import CounterIcon from 'src/components/icons/CounterIcon.vue';
-import BatteryIcon from 'src/components/icons/BatteryIcon.vue';
-import ChargePointIcon from 'src/components/icons/ChargePointIcon.vue';
-import VehicleIcon from 'src/components/icons/VehicleIcon.vue';
-import PvIcon from 'src/components/icons/PvIcon.vue';
-import HouseIcon from 'src/components/icons/HouseIcon.vue';
+import GridIcon from 'src/components/svgIcons/GridIcon.vue';
+import CounterIcon from 'src/components/svgIcons/CounterIcon.vue';
+import BatteryIcon from 'src/components/svgIcons/BatteryIcon.vue';
+import ChargePointIcon from 'src/components/svgIcons/ChargePointIcon.vue';
+import VehicleIcon from 'src/components/svgIcons/VehicleIcon.vue';
+import PvIcon from 'src/components/svgIcons/PvIcon.vue';
+import HouseIcon from 'src/components/svgIcons/HouseIcon.vue';
 
 const props = defineProps<{
   type: string;
@@ -26,13 +32,7 @@ const iconMap = {
 
 const iconComponent = computed(() => {
   // handle secondary IDs like "battery-1"
-  const baseType = props.type.split('-')[0];
-  return iconMap[baseType as keyof typeof iconMap] || null;
+  const iconName = props.type.split('-')[0];
+  return iconMap[iconName] || null;
 });
 </script>
-
-<template>
-  <div :style="color ? { color } : undefined">
-    <component :is="iconComponent" v-if="iconComponent" />
-  </div>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/BatteryIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/BatteryIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/ChargePointIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/ChargePointIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/CounterIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/CounterIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/CounterIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/CounterIcon.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/GridIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/GridIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/HouseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/HouseIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/PvIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/PvIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/icons/VehicleIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/icons/VehicleIcon.vue
rename to packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue

From 80cbe983d2d42156b4b61b2aae9591be2264fd31 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 13 Apr 2026 10:04:37 +0200
Subject: [PATCH 07/22] formatting icon

---
 .../charts/dailyTotals/DailyTotals.vue        | 20 +++++++++----------
 .../charts/dailyTotals/DailyTotalsRow.vue     |  2 +-
 .../src/components/svgIcons/BaseIcon.vue      |  6 ++----
 3 files changed, 13 insertions(+), 15 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 dde6b51bd8..1b5e05a3c9 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,7 +223,7 @@ const gridData = computed((): DailyTotalsItem => {
     id: 'grid',
     title: 'Zähler',
     level: 'primary',
-    icon: 'speed',
+    icon: 'grid',
   };
   if (gridPower.value !== undefined) {
     data = {
@@ -236,7 +236,7 @@ const gridData = computed((): DailyTotalsItem => {
         imported: mqttStore.counterDailyImported('textValue') as string,
         exported: mqttStore.counterDailyExported('textValue') as string,
       },
-      color: mqttStore.getGridComponentColor(gridID)
+      color: mqttStore.getGridComponentColor(gridID),
     };
   }
   return data;
@@ -251,7 +251,7 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
         id: `counter-${id}`,
         title: name,
         level: 'secondary',
-        icon: 'speed',
+        icon: 'counter',
         power: mqttStore.getCounterPower('textValue', id) as string,
         powerValue: mqttStore.getCounterPower('value', id) as number,
         today: {
@@ -274,7 +274,7 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
         id: `chargepoint-${id}`,
         title: name,
         level: 'secondary',
-        icon: 'ev_station',
+        icon: 'chargepoint',
         power: mqttStore.chargePointPower(id, 'textValue') as string,
         powerValue: mqttStore.chargePointPower(id, 'value') as number,
         today: {
@@ -304,7 +304,7 @@ const individualBatteryData = computed((): DailyTotalsItem[] => {
         id: `battery-${id}`,
         title: name,
         level: 'secondary',
-        icon: 'battery_full',
+        icon: 'battery',
         soc: mqttStore.batterySoc(id),
         power: mqttStore.batteryPower(id, 'textValue') as string,
         powerValue: mqttStore.batteryPower(id, 'value') as number,
@@ -327,7 +327,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       id: 'battery',
       title: 'Speicher',
       level: 'primary',
-      icon: 'battery_full',
+      icon: 'battery',
     };
     item = {
       ...item,
@@ -350,7 +350,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       id: 'pv',
       title: 'PV',
       level: 'primary',
-      icon: 'solar_power',
+      icon: 'pv',
       power: mqttStore.getPvPower('textValue') as string,
       powerValue: mqttStore.getPvPower('value') as number,
       today: { exported: mqttStore.pvDailyExported('textValue') as string },
@@ -363,7 +363,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       id: 'house',
       title: 'Haus',
       level: 'primary',
-      icon: 'home',
+      icon: 'house',
       power: mqttStore.getHomePower('textValue') as string,
       powerValue: mqttStore.getHomePower('value') as number,
       today: { imported: mqttStore.homeDailyYield('textValue') as string },
@@ -373,9 +373,9 @@ const componentData = computed((): DailyTotalsItem[] => {
   if (chargePointConfigured.value || chargePointSumPowerAvailable.value) {
     let item: DailyTotalsItem = {
       id: 'chargepoint',
-      title: mqttStore.chargePointIds.length > 1  ? 'Ladepunkte' : 'Ladepunkt',
+      title: mqttStore.chargePointIds.length > 1 ? 'Ladepunkte' : 'Ladepunkt',
       level: 'primary',
-      icon: 'ev_station',
+      icon: 'chargepoint',
     };
     if (chargePointSumPowerAvailable.value) {
       item = {
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 bcc9ac437b..e818faccc4 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
@@ -3,7 +3,7 @@
     <!-- Icon -->
     <div class="col-icon">
       <BaseIcon
-        :type="props.item.id"
+        :iconName="props.item.icon"
         :color="props.item.color"
         class="base-icon"
       />
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
index 2b26360ab1..23afb4f323 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
@@ -16,7 +16,7 @@ import PvIcon from 'src/components/svgIcons/PvIcon.vue';
 import HouseIcon from 'src/components/svgIcons/HouseIcon.vue';
 
 const props = defineProps<{
-  type: string;
+  iconName: string;
   color?: string | null;
 }>();
 
@@ -31,8 +31,6 @@ const iconMap = {
 };
 
 const iconComponent = computed(() => {
-  // handle secondary IDs like "battery-1"
-  const iconName = props.type.split('-')[0];
-  return iconMap[iconName] || null;
+  return iconMap[props.iconName] || null;
 });
 </script>

From 67023a2be529ed237992d45e429739026eb02f48 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 14 Apr 2026 14:35:28 +0200
Subject: [PATCH 08/22] Add user defined colors to history chart

---
 .../charts/historyChart/HistoryChart.vue      | 77 +++++++++++++------
 .../source/src/css/quasar.variables.scss      |  3 +
 .../koala/source/src/stores/mqtt-store.ts     | 62 ++++++++++++---
 3 files changed, 106 insertions(+), 36 deletions(-)

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 d9b668af12..69412063fd 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,6 +101,8 @@ const selectedData = computed((): GraphDataPoint[] => {
 });
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
+const gridId = computed(() => mqttStore.getGridId);
+const pvId = computed(() => mqttStore.getPvId);
 const chargePointNames = computed(() => mqttStore.chargePointName);
 
 const gridMeterName = computed(() => {
@@ -126,15 +128,27 @@ const getGlobalColor = (name: string, fallback?: string) => {
   return fromRoot || fallback;
 };
 
+const hexColorToRgba = (hex: string, opacity = 1) => {
+  hex = hex.replace('#', '');
+  const num = parseInt(hex, 16);
+  const r = (num >> 16) & 255;
+  const g = (num >> 8) & 255;
+  const b = num & 255;
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
 const secondaryCounterDatasets = computed(() =>
   mqttStore.getSecondaryCounterIds
     .map((id) => {
+      const baseColor =
+        mqttStore.getSecondaryCounterColor(id) ||
+        getGlobalColor('--q-secondary-counter-stroke');
       return {
         label: mqttStore.getComponentName(id),
         category: 'component',
         unit: 'kW',
-        borderColor: getGlobalColor('--q-secondary-counter-stroke'),
-        backgroundColor: getGlobalColor('--q-secondary-counter-fill'),
+        borderColor: baseColor,
+        backgroundColor: hexColorToRgba(baseColor, 0.1),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item[`counter${id}-power`] ?? 0,
@@ -151,23 +165,29 @@ const secondaryCounterDatasets = computed(() =>
 );
 
 const chargePointDatasets = computed(() =>
-  chargePointIds.value.map((cpId) => ({
-    label: `${chargePointNames.value(cpId)}`,
-    category: 'chargepoint',
-    unit: 'kW',
-    borderColor: getGlobalColor('--q-charge-point-stroke'),
-    backgroundColor: getGlobalColor('--q-charge-point-fill'),
-    data: selectedData.value.map((item) => ({
-      x: item.timestamp * 1000,
-      y: item[`cp${cpId}-power`] || 0,
-    })),
-    borderWidth: 2,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointHitRadius: 5,
-    fill: true,
-    yAxisID: 'y',
-  })),
+  chargePointIds.value.map((cpId) => {
+    const baseColor =
+      mqttStore.chargePointUserDefinedColor(cpId) ||
+      getGlobalColor('--q-charge-point-stroke');
+
+    return {
+      label: `${chargePointNames.value(cpId)}`,
+      category: 'chargepoint',
+      unit: 'kW',
+      borderColor: baseColor,
+      backgroundColor: hexColorToRgba(baseColor, 0.1),
+      data: selectedData.value.map((item) => ({
+        x: item.timestamp * 1000,
+        y: item[`cp${cpId}-power`] || 0,
+      })),
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHitRadius: 5,
+      fill: true,
+      yAxisID: 'y',
+    };
+  }),
 );
 
 const vehicleDatasets = computed(() =>
@@ -175,11 +195,14 @@ const vehicleDatasets = computed(() =>
     .map((vehicle) => {
       const socKey = `ev${vehicle.id}-soc` as keyof GraphDataPoint;
       if (selectedData.value.some((item) => socKey in item)) {
+        const baseColor =
+          mqttStore.vehicleUserDefinedColor(vehicle.id) ||
+          getGlobalColor('--q-vehicle-stroke');
         return {
           label: `${vehicle.name} SoC`,
           category: 'vehicle',
           unit: '%',
-          borderColor: '#9F8AFF',
+          borderColor: baseColor,
           borderWidth: 2,
           borderDash: [10, 5],
           pointRadius: 0,
@@ -230,12 +253,15 @@ const chartLabels = computed(() => {
 const lineChartData = computed(() => {
   let datasets = [];
   if (gridMeterName.value !== undefined) {
+    const baseColor =
+      mqttStore.getGridComponentColor(gridId.value) ||
+      getGlobalColor('--q-grid-stroke');
     datasets.push({
       label: gridMeterName.value,
       category: 'component',
       unit: 'kW',
-      borderColor: getGlobalColor('--q-grid-stroke'),
-      backgroundColor: getGlobalColor('--q-grid-fill'),
+      borderColor: baseColor,
+      backgroundColor: hexColorToRgba(baseColor, 0.1),
       data: selectedData.value.map((item) => ({
         x: item.timestamp * 1000,
         y: item.grid,
@@ -269,12 +295,15 @@ const lineChartData = computed(() => {
   }
   datasets.push(...secondaryCounterDatasets.value);
   if (mqttStore.getPvConfigured) {
+    const baseColor =
+      mqttStore.getPvComponentColor(pvId.value) ||
+      getGlobalColor('--q-pv-stroke');
     datasets.push({
       label: 'PV ges.',
       category: 'component',
       unit: 'kW',
-      borderColor: getGlobalColor('--q-pv-stroke'),
-      backgroundColor: getGlobalColor('--q-pv-fill'),
+      borderColor: baseColor,
+      backgroundColor: hexColorToRgba(baseColor, 0.1),
       data: selectedData.value.map((item) => ({
         x: item.timestamp * 1000,
         y: item['pv-all'],
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 a8ef8ab5ce..644611bb98 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
@@ -49,6 +49,7 @@ $battery-fill: #ba712833;
 $battery-fill-flow-diagram: #c6a583;
 $charge-point-stroke: #5c93d1;
 $charge-point-fill: #5c93d14d;
+$vehicle-stroke: #9F8AFF;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 // Light theme (default)
@@ -80,6 +81,7 @@ $diagram-icon: #717171;
   --q-battery-fill-flow-diagram: #{$battery-fill-flow-diagram};
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
+  --q-vehicle-stroke: #{$vehicle-stroke};
   --q-charge-plan-link-button: #{$charge-plan-link-button};
   --q-diagram-icon: #{$diagram-icon};
 
@@ -301,6 +303,7 @@ $dark-charge-plan-link-button: #75787a;
   --q-battery-fill: #{$battery-fill};
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
+  --q-vehicle-stroke: #{$vehicle-stroke};
   --q-battery-fill-flow-diagram: #{$battery-fill-flow-diagram};
   --q-dark-daily-totals-grid-fill: #{$dark-daily-totals-grid-fill};
   --q-dark-daily-totals-grid-stroke: #{$dark-daily-totals-grid-stroke};
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 76d93796c5..c0d76b98bc 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
@@ -1247,10 +1247,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         'color',
         null,
       ) as string | null;
-      if (!color || color === DEFAULT_COLOR) {
-        return null;
-      }
-      return color;
+      return resolveComponentColor(color, DEFAULT_COLOR);
     };
   });
 
@@ -2921,7 +2918,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         `openWB/system/device/+/component/${batteryId}/config`,
       ) as Record<string, ComponentConfiguration>;
       const config = Object.values(configurations)[0];
-      return config?.color === DEFAULT_COLOR ? null : (config?.color ?? null);
+      return resolveComponentColor(config?.color, DEFAULT_COLOR);
     };
   });
 
@@ -2981,6 +2978,23 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the vehicle user defined color identified by the vehicle id
+   * @param vehicleId vehicle id
+   * @returns string | null
+   */
+  const vehicleUserDefinedColor = computed(() => {
+    return (vehicleId: number): string | null => {
+      const DEFAULT_COLOR = '#007bff';
+      const color = getValue.value(
+        `openWB/vehicle/${vehicleId}/color`,
+        undefined,
+        null,
+      ) as string | null;
+      return resolveComponentColor(color, DEFAULT_COLOR);
+    };
+  });
+
   /**
    * Get vehicle SoC value identified by the vehicle id
    * @param vehicleId vehicle id
@@ -3755,6 +3769,19 @@ export const useMqttStore = defineStore('mqtt', () => {
     return getAllCounterIds.value.filter((id) => id !== rootCounter);
   });
 
+  /**
+   * Get the secondary counter color identified by the component ID
+   * @param componentId component ID
+   * @returns string | null
+   */
+  const getSecondaryCounterColor = computed(() => {
+    return (componentId: number) => {
+      const DEFAULT_COLOR = '#dc3545';
+      const color = getComponentAttributes.value(componentId)?.color;
+      return resolveComponentColor(color, DEFAULT_COLOR);
+    };
+  });
+
   /**
    * Get the power meter(counter) name identified by the Grid ID
    * @param counterId counter ID
@@ -3770,16 +3797,15 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get pv component color
+   * Get grid component color
    * @param componentId component ID
    * @returns GridConfiguration | null
    */
   const getGridComponentColor = computed(() => {
     return (componentId: number) => {
       const DEFAULT_COLOR = '#dc3545';
-      return getComponentAttributes.value(componentId)?.color === DEFAULT_COLOR
-        ? null
-        : (getComponentAttributes.value(componentId)?.color ?? null);
+      const color = getComponentAttributes.value(componentId)?.color;
+      return resolveComponentColor(color, DEFAULT_COLOR);
     };
   });
 
@@ -3956,9 +3982,8 @@ export const useMqttStore = defineStore('mqtt', () => {
   const getPvComponentColor = computed(() => {
     return (componentId: number) => {
       const DEFAULT_COLOR = '#28a745';
-      return getComponentAttributes.value(componentId)?.color === DEFAULT_COLOR
-        ? null
-        : (getComponentAttributes.value(componentId)?.color ?? null);
+      const color = getComponentAttributes.value(componentId)?.color;
+    return resolveComponentColor(color, DEFAULT_COLOR);
     };
   });
 
@@ -4047,6 +4072,15 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /* helpers */
+  const resolveComponentColor = (
+    color: string | null | undefined,
+    defaultColor: string,
+  ) => {
+    if (!color || color === defaultColor) return null;
+    return color;
+  };
+
   // exports
   return {
     topics,
@@ -4134,6 +4168,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     vehicleInfo,
     vehicleConnectionState,
     vehicleSocType,
+    vehicleUserDefinedColor,
     vehicleSocValue,
     vehicleSocManualValue,
     vehicleForceSocUpdate,
@@ -4198,6 +4233,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     getGridId,
     getAllCounterIds,
     getSecondaryCounterIds,
+    getSecondaryCounterColor,
     getComponentName,
     getGridComponentColor,
     getCounterPower,
@@ -4217,5 +4253,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     // electricity tariff provider
     etProviderConfigured,
     etPrices,
+    // helpers
+    resolveComponentColor,
   };
 });

From bc6d4cd54013fa32132393dbbe34fc1bda1c8693 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 15 Apr 2026 08:55:49 +0200
Subject: [PATCH 09/22] Add user defined colors to energy flow chart

---
 .../energyFlowChart/EnergyFlowChart.vue       | 107 +++++++++++++-----
 .../energy-flow-chart-models.ts               |   5 +-
 .../src/components/svgIcons/BatteryIcon.vue   |   1 +
 .../components/svgIcons/ChargePointIcon.vue   |   2 +-
 .../src/components/svgIcons/GridIcon.vue      |   8 +-
 .../src/components/svgIcons/HouseIcon.vue     |   1 +
 .../source/src/components/svgIcons/PvIcon.vue |   1 +
 .../src/components/svgIcons/VehicleIcon.vue   |   1 +
 8 files changed, 93 insertions(+), 33 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 9325581cc5..4e70b1dc25 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
@@ -3,6 +3,13 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
+//SVG Icons
+import GridIcon from 'src/components/svgIcons/GridIcon.vue';
+import HouseIcon from 'src/components/svgIcons/HouseIcon.vue';
+import PvIcon from 'src/components/svgIcons/PvIcon.vue';
+import BatteryIcon from 'src/components/svgIcons/BatteryIcon.vue';
+import ChargePointIcon from 'src/components/svgIcons/ChargePointIcon.vue';
+import VehicleIcon from 'src/components/svgIcons/VehicleIcon.vue';
 
 const mqttStore = useMqttStore();
 
@@ -189,11 +196,10 @@ const chargePoint1ConnectedVehicleChargeMode = computed(() => {
   return translateChargeMode(mode.value || '');
 });
 
-const chargePoint1ConnectedVehicleName = computed(
-  () =>
-    mqttStore.chargePointConnectedVehicleInfo(connectedChargePoints.value[0])
-      .value?.name || '---',
-);
+const chargePoint1ConnectedVehicle = computed(() => {
+  const cpId = connectedChargePoints.value[0];
+  return mqttStore.chargePointConnectedVehicleInfo(cpId).value || null;
+});
 
 const chargePoint1ConnectedVehicleSoc = computed(() =>
   mqttStore.chargePointConnectedVehicleSoc(connectedChargePoints.value[0]),
@@ -213,10 +219,10 @@ const chargePoint2ConnectedVehicleChargeMode = computed(() => {
   return translateChargeMode(mode.value || '');
 });
 
-const chargePoint2ConnectedVehicleName = computed(
+const chargePoint2ConnectedVehicle = computed(
   () =>
     mqttStore.chargePointConnectedVehicleInfo(connectedChargePoints.value[1])
-      .value?.name || '---',
+      .value || null,
 );
 
 const chargePoint2ConnectedVehicleSoc = computed(() =>
@@ -237,10 +243,10 @@ const chargePoint3ConnectedVehicleChargeMode = computed(() => {
   return translateChargeMode(mode.value || '');
 });
 
-const chargePoint3ConnectedVehicleName = computed(
+const chargePoint3ConnectedVehicle = computed(
   () =>
     mqttStore.chargePointConnectedVehicleInfo(connectedChargePoints.value[2])
-      .value?.name || '---',
+      .value || null,
 );
 
 const chargePoint3ConnectedVehicleSoc = computed(() =>
@@ -258,6 +264,9 @@ const chargePointSumCharging = computed(
   () => Number(chargePointSumPower.value.value) > 0,
 );
 
+const gridID = computed(() => mqttStore.getGridId);
+const pvId = computed(() => mqttStore.getPvId);
+
 ///////////////////// Set animation speed //////////////////////////
 
 const maxSystemPower = computed(() => {
@@ -332,7 +341,8 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 0, column: 0 },
       label: ['EVU', absoluteValueObject(gridPower.value).textValue],
       powerValue: Number(gridPower.value.value),
-      icon: 'icons/owbGrid.svg',
+      iconComponent: GridIcon,
+      iconColor: mqttStore.getGridComponentColor(gridID.value) || 'var(--q-diagram-icon)',
     });
   }
 
@@ -348,7 +358,8 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 0, column: 2 },
       label: ['Haus', absoluteValueObject(homePower.value).textValue],
       powerValue: Number(homePower.value.value),
-      icon: 'icons/owbHouse.svg',
+      iconComponent: HouseIcon,
+      iconColor: 'var(--q-diagram-icon)',
     });
   }
 
@@ -364,7 +375,8 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
-      icon: 'icons/owbPV.svg',
+      iconComponent: PvIcon,
+      iconColor: mqttStore.getPvComponentColor(pvId.value) || 'var(--q-diagram-icon)',
     });
   }
 
@@ -381,7 +393,8 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
       powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
-      icon: 'icons/owbBattery.svg',
+      iconComponent: BatteryIcon,
+      iconColor: 'var(--q-diagram-icon)',
     });
   }
 
@@ -406,7 +419,11 @@ const svgComponents = computed((): FlowComponent[] => {
           absoluteValueObject(chargePoint1Power.value).textValue,
         ],
         powerValue: Number(chargePoint1Power.value.value),
-        icon: 'icons/owbChargePoint.svg',
+        iconComponent: ChargePointIcon,
+        iconColor:
+          mqttStore.chargePointUserDefinedColor(
+            connectedChargePoints.value[0],
+          ) || 'var(--q-diagram-icon)',
       });
 
       if (chargePoint1VehicleConnected.value) {
@@ -426,11 +443,15 @@ const svgComponents = computed((): FlowComponent[] => {
             column: connectedChargePoints.value.length > 1 ? 0 : 1,
           },
           label: [
-            chargePoint1ConnectedVehicleName.value || '---',
+            chargePoint1ConnectedVehicle.value?.name || '---',
             chargePoint1ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint1ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          icon: 'icons/owbVehicle.svg',
+          iconComponent: VehicleIcon,
+          iconColor:
+            mqttStore.vehicleUserDefinedColor(
+              chargePoint1ConnectedVehicle.value?.id,
+            ) || 'var(--q-diagram-icon)',
           powerValue: Number(chargePoint1Power.value.value),
         });
       }
@@ -455,7 +476,11 @@ const svgComponents = computed((): FlowComponent[] => {
             absoluteValueObject(chargePoint2Power.value).textValue,
           ],
           powerValue: Number(chargePoint2Power.value.value),
-          icon: 'icons/owbChargePoint.svg',
+          iconComponent: ChargePointIcon,
+          iconColor:
+            mqttStore.chargePointUserDefinedColor(
+              connectedChargePoints.value[1],
+            ) || 'var(--q-diagram-icon)',
         });
       }
 
@@ -476,11 +501,15 @@ const svgComponents = computed((): FlowComponent[] => {
             column: connectedChargePoints.value.length > 2 ? 1 : 2,
           },
           label: [
-            chargePoint2ConnectedVehicleName.value || '---',
+            chargePoint2ConnectedVehicle.value?.name || '---',
             chargePoint2ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint2ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          icon: 'icons/owbVehicle.svg',
+          iconComponent: VehicleIcon,
+          iconColor:
+            mqttStore.vehicleUserDefinedColor(
+              chargePoint2ConnectedVehicle.value?.id,
+            ) || 'var(--q-diagram-icon)',
           powerValue: Number(chargePoint2Power.value.value),
         });
       }
@@ -502,7 +531,11 @@ const svgComponents = computed((): FlowComponent[] => {
             absoluteValueObject(chargePoint3Power.value).textValue,
           ],
           powerValue: Number(chargePoint3Power.value.value),
-          icon: 'icons/owbChargePoint.svg',
+          iconComponent: ChargePointIcon,
+          iconColor:
+            mqttStore.chargePointUserDefinedColor(
+              connectedChargePoints.value[2],
+            ) || 'var(--q-diagram-icon)',
         });
       }
 
@@ -523,11 +556,15 @@ const svgComponents = computed((): FlowComponent[] => {
             column: 2,
           },
           label: [
-            chargePoint3ConnectedVehicleName.value || '---',
+            chargePoint3ConnectedVehicle.value?.name || '---',
             chargePoint3ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint3ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          icon: 'icons/owbVehicle.svg',
+          iconComponent: VehicleIcon,
+          iconColor:
+            mqttStore.vehicleUserDefinedColor(
+              chargePoint3ConnectedVehicle.value?.id,
+            ) || 'var(--q-diagram-icon)',
           powerValue: Number(chargePoint3Power.value.value),
         });
       }
@@ -548,7 +585,8 @@ const svgComponents = computed((): FlowComponent[] => {
           absoluteValueObject(chargePointSumPower.value).textValue,
         ],
         powerValue: Number(chargePointSumPower.value.value),
-        icon: 'icons/owbChargePoint.svg',
+        iconComponent: ChargePointIcon,
+        iconColor: 'var(--q-diagram-icon)',
       });
     }
   }
@@ -778,13 +816,28 @@ const svgRectWidth = computed(
               :clip-path="`url(#clip-soc-${component.id})`"
             />
 
-            <image
-              :href="component.icon"
+            <foreignObject
               :x="-svgIconWidth / 2"
               :y="-svgIconHeight / 2"
-              :height="svgIconHeight"
               :width="svgIconWidth"
-            />
+              :height="svgIconHeight"
+            >
+              <div
+                style="
+                  width: 100%;
+                  height: 100%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+                :style="{ color: component.iconColor }"
+              >
+                <component
+                  :is="component.iconComponent"
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </foreignObject>
           </g>
         </g>
       </g>
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 b0fafafd55..6d2390e583 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
@@ -1,3 +1,5 @@
+import type { Component } from 'vue';
+
 export interface SvgSize {
   xMin: number;
   xMax: number;
@@ -31,5 +33,6 @@ export interface FlowComponent {
   label: string[];
   powerValue?: number;
   soc?: number;
-  icon: string;
+  iconComponent?: Component;
+  iconColor?: string | null;
 }
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
index da32ade45b..0fe0431553 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
@@ -4,6 +4,7 @@
     viewBox="0 0 1024 1024"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <path
       d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
index 93e9685ee4..8231c2af69 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
@@ -4,10 +4,10 @@
     viewBox="0 0 1024 1024"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <path
       d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z"
-      fill=""
     />
   </svg>
 </template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
index e0d5c010b3..f2cd5a67ee 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
@@ -4,12 +4,12 @@
     viewBox="0 0 1024 1024"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <g transform="scale(1.1)">
-    <path
-      d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"
-    />
+      <path
+        d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"
+      />
     </g>
   </svg>
 </template>
-
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
index 8a7b9cc7c5..12c0ce073f 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
@@ -4,6 +4,7 @@
     viewBox="0 0 1024 1024"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <g transform="scale(0.9)">
     <path
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
index 26ffadb1e7..666c8d453d 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
@@ -4,6 +4,7 @@
     viewBox="0 0 1024 1024"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <path
       d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue
index cbd35ecf4a..d8655eaf7f 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue
@@ -10,6 +10,7 @@
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <defs id="defs8" />
     <path

From ec12a718b5cfc266544bfacfc9962016c97f56cb Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 15 Apr 2026 09:01:13 +0200
Subject: [PATCH 10/22] energy flow chart move css to style section

---
 .../energyFlowChart/EnergyFlowChart.vue       | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 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 4e70b1dc25..a39d6aab93 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
@@ -342,7 +342,9 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['EVU', absoluteValueObject(gridPower.value).textValue],
       powerValue: Number(gridPower.value.value),
       iconComponent: GridIcon,
-      iconColor: mqttStore.getGridComponentColor(gridID.value) || 'var(--q-diagram-icon)',
+      iconColor:
+        mqttStore.getGridComponentColor(gridID.value) ||
+        'var(--q-diagram-icon)',
     });
   }
 
@@ -376,7 +378,8 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
       iconComponent: PvIcon,
-      iconColor: mqttStore.getPvComponentColor(pvId.value) || 'var(--q-diagram-icon)',
+      iconColor:
+        mqttStore.getPvComponentColor(pvId.value) || 'var(--q-diagram-icon)',
     });
   }
 
@@ -822,16 +825,7 @@ const svgRectWidth = computed(
               :width="svgIconWidth"
               :height="svgIconHeight"
             >
-              <div
-                style="
-                  width: 100%;
-                  height: 100%;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                "
-                :style="{ color: component.iconColor }"
-              >
+              <div class="icon-wrapper" :style="{ color: component.iconColor }">
                 <component
                   :is="component.iconComponent"
                   style="width: 100%; height: 100%"
@@ -1114,4 +1108,11 @@ text .fill-dark {
 .vehicle circle:not(.soc) {
   fill: color-mix(in srgb, var(--q-accent) 50%, transparent);
 }
+.icon-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

From 5672b8fdc5cbf32a983ed5fce33ba732fe8b9df4 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 15 Apr 2026 09:59:26 +0200
Subject: [PATCH 11/22] Add user defined colors to vehicle cards

---
 .../source/src/components/VehicleCard.vue     | 23 ++++++++++++++++---
 .../koala/source/src/stores/mqtt-store.ts     |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index 4560545263..8b8c517f99 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -1,8 +1,16 @@
 <template>
   <q-card
     ref="cardRef"
-    class="card-width"
-    :class="{ 'full-height': props.fullHeight }"
+    class="vehicle-card"
+    :class="[
+      { 'full-height': props.fullHeight },
+      vehicleUserDefinedColor && 'has-custom-color',
+    ]"
+    :style="
+      vehicleUserDefinedColor && {
+        '--component-color': vehicleUserDefinedColor,
+      }
+    "
   >
     <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
@@ -104,11 +112,20 @@ const refreshSoc = () => {
     message: 'SoC Update angefordert.',
   });
 };
+
+const vehicleUserDefinedColor = computed(() => {
+  return mqttStore.vehicleUserDefinedColor(props.vehicleId);
+});
 </script>
 
 <style lang="scss" scoped>
-.card-width {
+.vehicle-card {
   width: 22em;
+  border: none;
+}
+
+.vehicle-card.has-custom-color {
+  border-left: 4px solid var(--component-color);
 }
 
 .q-card__section {
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 c0d76b98bc..8001e42ca0 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
@@ -2985,7 +2985,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    */
   const vehicleUserDefinedColor = computed(() => {
     return (vehicleId: number): string | null => {
-      const DEFAULT_COLOR = '#007bff';
+      const DEFAULT_COLOR = '#17a2b8';
       const color = getValue.value(
         `openWB/vehicle/${vehicleId}/color`,
         undefined,

From 71d0aea28592198514019918a82a9597657355fa Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 17 Apr 2026 11:39:01 +0200
Subject: [PATCH 12/22] Add border between all expansion items/components

---
 .../charts/dailyTotals/DailyTotals.vue        | 90 +++++++++++--------
 1 file changed, 53 insertions(+), 37 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 1b5e05a3c9..4f3e7d7640 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
@@ -35,7 +35,7 @@
           <div
             v-for="item in secondaryCounterData"
             :key="item.id"
-            class="counter"
+            class="counter sub-row"
           >
             <DailyTotalsRow
               :item="item"
@@ -118,50 +118,58 @@
             </DailyTotalsRow>
           </template>
           <div v-if="item.id === 'chargepoint'">
-            <DailyTotalsRow
+            <div
               v-for="chargePointData in individualChargePointData"
               :key="chargePointData.id"
-              :item="chargePointData"
-              :rowHeight="rowHeight"
-              :componentNameVisible="componentNameVisible"
-              :currentPowerVisible="currentPowerVisible"
-              :socValueVisible="socValueVisible"
+              class="sub-row"
             >
-              <template #right-label>
-                <template v-if="chargePointData.today !== undefined">
-                  <div>Geladen:</div>
-                  <div>Entladen:</div>
+              <DailyTotalsRow
+                :item="chargePointData"
+                :rowHeight="rowHeight"
+                :componentNameVisible="componentNameVisible"
+                :currentPowerVisible="currentPowerVisible"
+                :socValueVisible="socValueVisible"
+              >
+                <template #right-label>
+                  <template v-if="chargePointData.today !== undefined">
+                    <div>Geladen:</div>
+                    <div>Entladen:</div>
+                  </template>
                 </template>
-              </template>
-              <template #right-value>
-                <div v-if="chargePointData.today !== undefined">
-                  {{ chargePointData.today.imported }}
-                </div>
-                <div v-if="chargePointData.today !== undefined">
-                  {{ chargePointData.today.exported }}
-                </div>
-              </template>
-            </DailyTotalsRow>
+                <template #right-value>
+                  <div v-if="chargePointData.today !== undefined">
+                    {{ chargePointData.today.imported }}
+                  </div>
+                  <div v-if="chargePointData.today !== undefined">
+                    {{ chargePointData.today.exported }}
+                  </div>
+                </template>
+              </DailyTotalsRow>
+            </div>
           </div>
           <div v-if="item.id === 'battery'">
-            <DailyTotalsRow
+            <div
               v-for="batteryData in individualBatteryData"
               :key="batteryData.id"
-              :item="batteryData"
-              :rowHeight="rowHeight"
-              :componentNameVisible="componentNameVisible"
-              :currentPowerVisible="currentPowerVisible"
-              :socValueVisible="socValueVisible"
+              class="sub-row"
             >
-              <template #right-label>
-                <div>Geladen:</div>
-                <div>Entladen:</div>
-              </template>
-              <template #right-value>
-                <div>{{ batteryData.today?.imported }}</div>
-                <div>{{ batteryData.today?.exported }}</div>
-              </template>
-            </DailyTotalsRow>
+              <DailyTotalsRow
+                :item="batteryData"
+                :rowHeight="rowHeight"
+                :componentNameVisible="componentNameVisible"
+                :currentPowerVisible="currentPowerVisible"
+                :socValueVisible="socValueVisible"
+              >
+                <template #right-label>
+                  <div>Geladen:</div>
+                  <div>Entladen:</div>
+                </template>
+                <template #right-value>
+                  <div>{{ batteryData.today?.imported }}</div>
+                  <div>{{ batteryData.today?.exported }}</div>
+                </template>
+              </DailyTotalsRow>
+            </div>
           </div>
         </q-expansion-item>
       </div>
@@ -522,7 +530,6 @@ watch(
 }
 .counter {
   background: var(--q-secondary-counter-fill);
-  border-top: 0.125rem solid var(--q-secondary-counter-stroke);
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
@@ -543,6 +550,15 @@ watch(
   background: var(--q-charge-point-fill);
   border: 0.125rem solid var(--q-charge-point-stroke);
 }
+.counter.sub-row {
+  border-top: 0.12rem solid var(--q-secondary-counter-stroke);
+}
+.battery .sub-row {
+  border-top: 0.12rem solid var(--q-battery-stroke);
+}
+.chargepoint .sub-row {
+  border-top: 0.12rem solid var(--q-charge-point-stroke);
+}
 .rotate-180 {
   transform: rotate(180deg);
 }

From 293c7501083584433bca951f58eeb1150621834c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 7 May 2026 09:32:59 +0200
Subject: [PATCH 13/22] Add user defined colors to tables (vehicle & charge
 points)

---
 .../src/components/ChargePointInformation.vue | 20 +++++++++++++++++--
 .../src/components/VehicleInformation.vue     | 20 +++++++++++++++++--
 .../src/components/models/table-model.ts      |  2 ++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index ed7e453845..cb657eedc4 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -25,8 +25,16 @@
     <!-- full view table body slots -->
     <template #body-cell-name="slotProps">
       <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.name">
-          {{ slotProps.row.name }}
+        <div class="row items-center no-wrap">
+          <div
+            class="row-color-bar q-mr-sm"
+            :style="{
+              backgroundColor: slotProps.row.color || 'transparent',
+            }"
+          />
+          <div class="ellipsis" :title="slotProps.row.name">
+            {{ slotProps.row.name }}
+          </div>
         </div>
       </q-td>
     </template>
@@ -204,6 +212,7 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
     // typecasting necessary as chargePointChargingCurrent has a union type in store and needs to be narrowed to string
     const current = mqttStore.chargePointChargingCurrent(id) as string;
     const powerColumn = '';
+    const color = mqttStore.chargePointUserDefinedColor(id);
     return {
       id,
       name,
@@ -217,6 +226,7 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
       current,
       powerColumn,
       charged,
+      color,
     };
   };
 });
@@ -261,4 +271,10 @@ const onRowClick = (row: ChargePointRow) => {
 .max-width-0 {
   max-width: 0;
 }
+.row-color-bar {
+  width: 4px;
+  height: 100%;
+  min-height: 24px;
+  border-radius: 2px;
+}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index d2b3cb2cd6..7f5982d19c 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -28,8 +28,16 @@
     </template>
     <template #body-cell-name="slotProps">
       <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.name">
-          {{ slotProps.row.name }}
+        <div class="row items-center no-wrap">
+          <div
+            class="row-color-bar"
+            :style="{
+              backgroundColor: slotProps.row.color || 'transparent',
+            }"
+          />
+          <div class="ellipsis q-ml-sm" :title="slotProps.row.name">
+            {{ slotProps.row.name }}
+          </div>
         </div>
       </q-td>
     </template>
@@ -110,6 +118,7 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
     const model = info?.model || 'keine Angabe';
     const soc = mqttStore.vehicleSocValue(id);
     const vehicleSocValue = soc !== undefined ? `${Math.round(soc)}%` : '–';
+    const color = mqttStore.vehicleUserDefinedColor(id);
     return {
       id,
       name,
@@ -118,6 +127,7 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
       plugState,
       chargeState,
       vehicleSocValue,
+      color,
     };
   };
 });
@@ -146,4 +156,10 @@ const onRowClick = (row: VehicleRow) => {
 .max-width-0 {
   max-width: 0;
 }
+.row-color-bar {
+  width: 4px;
+  height: 100%;
+  min-height: 24px;
+  border-radius: 2px;
+}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index 411594f309..efc0452bf5 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -27,6 +27,7 @@ export interface ChargePointRow extends Record<string, unknown> {
   current: string;
   powerColumn: '';
   charged: string;
+  color: string;
 }
 
 export interface VehicleRow extends Record<string, unknown> {
@@ -37,4 +38,5 @@ export interface VehicleRow extends Record<string, unknown> {
   plugState: boolean;
   chargeState: boolean;
   vehicleSocValue: string;
+  color: string;
 }

From cf7cdd17c9e8017e3f1e60280e9767ce87d14c92 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 8 May 2026 09:23:34 +0200
Subject: [PATCH 14/22] Fix color bar display in tables smaller screen sizes

---
 .../src/components/ChargePointInformation.vue | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index cb657eedc4..b49e2d989f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -92,11 +92,21 @@
     <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.name">
-          {{ slotProps.row.name }}
-        </div>
-        <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
-          {{ slotProps.row.vehicle }}
+        <div class="row items-center">
+          <div
+            class="row-color-bar q-mr-sm"
+            :style="{
+              backgroundColor: slotProps.row.color || 'transparent',
+            }"
+          />
+          <div>
+            <div class="ellipsis" :title="slotProps.row.name">
+              {{ slotProps.row.name }}
+            </div>
+            <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
+              {{ slotProps.row.vehicle }}
+            </div>
+          </div>
         </div>
       </q-td>
     </template>

From 0e54b6357a8c14cdd3524a64383f4e1e7a5da5e0 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 11 May 2026 10:25:10 +0200
Subject: [PATCH 15/22] Table data tag in BaseTable.vue - color application
 consistent for all tables

---
 .../koala/source/src/components/BaseTable.vue | 107 +++++++++------
 .../src/components/ChargePointInformation.vue | 128 ++++++------------
 .../src/components/VehicleInformation.vue     |  59 +++-----
 .../src/components/models/table-model.ts      |   9 +-
 4 files changed, 128 insertions(+), 175 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index e08601d7c9..7dde09cbcc 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -56,14 +56,18 @@
     </template>
 
     <!-- body ------------------------------------------------------------->
-    <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
+    <template #body="rowProps: BodySlotProps<T>">
       <q-tr
         :key="`main-${rowProps.key}`"
         :props="rowProps"
         @click="onRowClick($event, rowProps.row)"
         class="clickable"
       >
-        <q-td auto-width>
+        <q-td
+          v-if="props.rowExpandable"
+          auto-width
+          :style="rowBorderStyle(rowProps.row)"
+        >
           <q-btn
             dense
             flat
@@ -75,66 +79,69 @@
             @click.stop="rowProps.expand = !rowProps.expand"
           />
         </q-td>
-
-        <template v-for="column in rowProps.cols" :key="column.name">
-          <!-- custom body-cell slot -->
-          <template v-if="$slots[`body-cell-${column.name}`]">
-            <slot
-              :name="`body-cell-${column.name}`"
-              v-bind="{
-                ...rowProps,
-                col: column,
-              }"
-            >
-            </slot>
-          </template>
-
-          <!-- all other column data -->
+        <!-- DATA COLUMNS -->
+        <template v-for="(column, index) in rowProps.cols" :key="column.name">
           <q-td
-            v-else
             :props="{
               ...rowProps,
               col: column,
-              // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
-              value: rowProps.row[column.field as string],
+              value:
+                typeof column.field === 'string'
+                  ? rowProps.row[column.field]
+                  : undefined,
             }"
+            :class="[
+              `text-${column.align || 'left'}`,
+              column.shrink ? 'max-width-0' : '',
+            ]"
+            :auto-width="column.autoWidth"
+            :style="
+              index === 0 && !props.rowExpandable
+                ? rowBorderStyle(rowProps.row)
+                : {}
+            "
           >
-            <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
-            {{ rowProps.row[column.field as string] }}
+            <!-- Custom slot -->
+            <template v-if="$slots[`body-cell-${column.name}`]">
+              <slot
+                :name="`body-cell-${column.name}`"
+                v-bind="{ ...rowProps, col: column }"
+              />
+            </template>
+            <!-- Default render -->
+            <template v-else>
+              {{
+                typeof column.field === 'string'
+                  ? rowProps.row[column.field]
+                  : ''
+              }}
+            </template>
           </q-td>
         </template>
       </q-tr>
-
-      <!-- expansion row -->
+      <!-- Expansion row -->
       <q-tr
+        v-if="props.rowExpandable"
         v-show="rowProps.expand"
         :key="`xp-${rowProps.key}`"
         :props="rowProps"
         class="q-virtual-scroll--with-prev"
       >
         <q-td :colspan="rowProps.cols.length + 1">
-          <slot name="row-expand" v-bind="rowProps"> </slot>
+          <slot name="row-expand" v-bind="rowProps" />
         </q-td>
       </q-tr>
     </template>
-
-    <!-- forward any other slots not related to table  e.g top search field -------------------->
-    <template
-      v-for="slotName in forwardedSlotNames"
-      :key="slotName"
-      v-slot:[slotName]="slotProps"
-    >
-      <slot :name="slotName" v-bind="slotProps"></slot>
-    </template>
   </q-table>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, ComputedRef, ref, useSlots } from 'vue';
-import type { QTableColumn, QTableProps } from 'quasar';
+import { computed, ComputedRef, ref } from 'vue';
+import type { QTableProps } from 'quasar';
 import {
   ColumnConfiguration,
   BodySlotProps,
+  ExtendedQTableColumn,
 } from 'src/components/models/table-model';
 
 /* ------------------------------------------------------------------ props */
@@ -150,18 +157,11 @@ const props = defineProps<{
   rowExpandable?: boolean;
   dense?: boolean;
   square?: boolean;
+  rowColor?: (row: T) => string | undefined;
 }>();
 
 /* ------------------------------------------------------------------ state */
 const expanded = ref<(string | number)[]>([]);
-const slots = useSlots();
-
-const forwardedSlotNames = computed(() => {
-  if (props.rowExpandable)
-    return Object.keys(slots).filter((name) => !name.startsWith('body'));
-  return Object.keys(slots);
-});
-
 const emit = defineEmits<{
   (event: 'row-click', row: T): void;
   (event: 'update:filter', value: string): void;
@@ -179,7 +179,7 @@ const mappedRows = computed(() =>
   ),
 );
 
-const mappedColumns = computed<QTableColumn[]>(() =>
+const mappedColumns = computed<ExtendedQTableColumn[]>(() =>
   props.columnConfig
     .filter((column) => !column.expandField) // main table columns only
     .map((column) => ({
@@ -189,6 +189,8 @@ const mappedColumns = computed<QTableColumn[]>(() =>
       align: column.align ?? 'left',
       sortable: true,
       headerStyle: 'font-weight: bold',
+      autoWidth: column.autoWidth,
+      shrink: column.shrink ?? false,
     })),
 );
 
@@ -213,6 +215,17 @@ const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
 };
 
 const onRowClick = (evt: Event, row: T) => emit('row-click', row);
+
+const rowBorderStyle = (row: T) => {
+  const color = props.rowColor?.(row);
+  if (!color) return {};
+  return {
+    backgroundImage: `linear-gradient(${color}, ${color})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '4px 70%',
+    backgroundPosition: '4px center',
+  };
+};
 </script>
 
 <style scoped lang="scss">
@@ -232,4 +245,8 @@ const onRowClick = (evt: Event, row: T) => emit('row-click', row);
 .custom-table-height {
   height: v-bind('tableHeight');
 }
+
+.max-width-0 {
+  max-width: 0;
+}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index b49e2d989f..2c10acf8fa 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -21,99 +21,67 @@
     :columns-to-search="['vehicle', 'name']"
     :row-expandable="compactTable"
     @row-click="onRowClick"
+    :row-color="(row) => row.color"
   >
     <!-- full view table body slots -->
     <template #body-cell-name="slotProps">
-      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="row items-center no-wrap">
-          <div
-            class="row-color-bar q-mr-sm"
-            :style="{
-              backgroundColor: slotProps.row.color || 'transparent',
-            }"
-          />
-          <div class="ellipsis" :title="slotProps.row.name">
-            {{ slotProps.row.name }}
-          </div>
+      <div class="row items-center no-wrap">
+        <div class="ellipsis" :title="slotProps.row.name">
+          {{ slotProps.row.name }}
         </div>
-      </q-td>
+      </div>
     </template>
     <template #body-cell-vehicle="slotProps">
-      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.vehicle">
-          {{ slotProps.row.vehicle }}
-        </div>
-      </q-td>
+      <div class="ellipsis" :title="slotProps.row.vehicle">
+        {{ slotProps.row.vehicle }}
+      </div>
     </template>
     <template #body-cell-plugged="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
-      </q-td>
+      <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
     </template>
 
     <template #body-cell-chargeMode="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        <ChargePointMode :charge-point-id="slotProps.row.id" />
-      </q-td>
+      <ChargePointMode :charge-point-id="slotProps.row.id" />
     </template>
 
     <template #body-cell-timeCharging="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        <ChargePointTimeCharging
-          :charge-point-id="slotProps.row.id"
-          :readonly="true"
-          :toolTip="true"
-          :icon-size="'xs'"
-        />
-      </q-td>
+      <ChargePointTimeCharging
+        :charge-point-id="slotProps.row.id"
+        :readonly="true"
+        :toolTip="true"
+        :icon-size="'xs'"
+      />
     </template>
 
     <template #body-cell-powerColumn="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        <ChargePointPowerData
-          :power="slotProps.row.power"
-          :phase-number="slotProps.row.phaseNumber"
-          :current="slotProps.row.current"
-          :column-display-format="isSmallScreen"
-        />
-      </q-td>
+      <ChargePointPowerData
+        :power="slotProps.row.power"
+        :phase-number="slotProps.row.phaseNumber"
+        :current="slotProps.row.current"
+        :column-display-format="isSmallScreen"
+      />
     </template>
     <template #body-cell-charged="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        {{ slotProps.row.charged }}
-      </q-td>
+      {{ slotProps.row.charged }}
     </template>
     <template #body-cell-soc="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        {{ slotProps.row.soc }}
-      </q-td>
+      {{ slotProps.row.soc }}
     </template>
     <!-- compact view table body slots -->
     <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
-      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="row items-center">
-          <div
-            class="row-color-bar q-mr-sm"
-            :style="{
-              backgroundColor: slotProps.row.color || 'transparent',
-            }"
-          />
-          <div>
-            <div class="ellipsis" :title="slotProps.row.name">
-              {{ slotProps.row.name }}
-            </div>
-            <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
-              {{ slotProps.row.vehicle }}
-            </div>
-          </div>
+      <div>
+        <div class="ellipsis" :title="slotProps.row.name">
+          {{ slotProps.row.name }}
+        </div>
+        <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
+          {{ slotProps.row.vehicle }}
         </div>
-      </q-td>
+      </div>
     </template>
 
     <!-- compact view charge point charge mode, plug status and time charging displayed in one field -->
     <template #body-cell-modePluggedTimeCharging="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <div class="items-center">
           <ChargePointMode :charge-point-id="slotProps.row.id" />
           <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
@@ -124,7 +92,6 @@
             :icon-size="'xs'"
           />
         </div>
-      </q-td>
     </template>
 
     <!-- Pass expansion row data to BaseTable.vue -->
@@ -242,23 +209,24 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
 });
 
 const columnConfig: ColumnConfiguration[] = [
-  { field: 'name', label: 'Ladepunkt' },
-  { field: 'vehicle', label: 'Fahrzeug' },
-  { field: 'plugged', label: 'Status', align: 'center' },
-  { field: 'chargeMode', label: 'Lademodus' },
-  { field: 'timeCharging', label: 'Zeitladen', align: 'center' },
-  { field: 'powerColumn', label: 'Leistung', align: 'right' },
-  { field: 'charged', label: 'Geladen', align: 'right' },
-  { field: 'soc', label: 'Ladestand', align: 'right' },
+  { field: 'name', label: 'Ladepunkt', shrink: true },
+  { field: 'vehicle', label: 'Fahrzeug', autoWidth: true },
+  { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
+  { field: 'chargeMode', label: 'Lademodus', autoWidth: true },
+  { field: 'timeCharging', label: 'Zeitladen', align: 'center', autoWidth: true },
+  { field: 'powerColumn', label: 'Leistung', align: 'right', autoWidth: true },
+  { field: 'charged', label: 'Geladen', align: 'right', autoWidth: true },
+  { field: 'soc', label: 'Ladestand', align: 'right', autoWidth: true },
 ];
 
 const columnConfigCompact: ColumnConfiguration[] = [
-  { field: 'nameAndVehicle', label: 'Ladepunkt' },
-  { field: 'modePluggedTimeCharging', label: 'Lademodus', align: 'center' },
+  { field: 'nameAndVehicle', label: 'Ladepunkt', shrink: true },
+  { field: 'modePluggedTimeCharging', label: 'Lademodus', align: 'center', autoWidth: true },
   {
     field: 'powerColumn',
     label: 'Leistung',
     align: 'center',
+    autoWidth: true,
   },
   { field: 'charged', label: 'Geladen', align: 'right', expandField: true },
   { field: 'soc', label: 'Ladestand', align: 'right', expandField: true },
@@ -276,15 +244,3 @@ const onRowClick = (row: ChargePointRow) => {
   modalChargePointCardVisible.value = true;
 };
 </script>
-
-<style scoped lang="scss">
-.max-width-0 {
-  max-width: 0;
-}
-.row-color-bar {
-  width: 4px;
-  height: 100%;
-  min-height: 24px;
-  border-radius: 2px;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 7f5982d19c..0a5b07fc70 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -21,45 +21,30 @@
     :columns-to-search="['name', 'manufacturer', 'model']"
     :row-expandable="true"
     @row-click="onRowClick"
+    :row-color="(row) => row.color"
   >
     <!-- "col" = column must match Quasar naming convention -->
     <template #row-expand="slotProps">
       <VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
     </template>
     <template #body-cell-name="slotProps">
-      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="row items-center no-wrap">
-          <div
-            class="row-color-bar"
-            :style="{
-              backgroundColor: slotProps.row.color || 'transparent',
-            }"
-          />
-          <div class="ellipsis q-ml-sm" :title="slotProps.row.name">
-            {{ slotProps.row.name }}
-          </div>
+      <div class="row items-center no-wrap">
+        <div class="ellipsis q-ml-sm" :title="slotProps.row.name">
+          {{ slotProps.row.name }}
         </div>
-      </q-td>
+      </div>
     </template>
     <template #body-cell-manufacturer="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        {{ slotProps.row.manufacturer }}
-      </q-td>
+      {{ slotProps.row.manufacturer }}
     </template>
     <template #body-cell-model="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        {{ slotProps.row.model }}
-      </q-td>
+      {{ slotProps.row.model }}
     </template>
     <template #body-cell-plugged="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        <ChargePointStateIcon :vehicle-id="slotProps.row.id" />
-      </q-td>
+      <ChargePointStateIcon :vehicle-id="slotProps.row.id" />
     </template>
     <template #body-cell-vehicleSocValue="slotProps">
-      <q-td auto-width :class="`text-${slotProps.col.align}`">
-        {{ slotProps.row.vehicleSocValue }}
-      </q-td>
+      {{ slotProps.row.vehicleSocValue }}
     </template>
   </BaseTable>
 
@@ -133,17 +118,17 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
 });
 
 const columnConfig: ColumnConfiguration[] = [
-  { field: 'name', label: 'Fahrzeug' },
-  { field: 'manufacturer', label: 'Hersteller' },
-  { field: 'model', label: 'Modell' },
-  { field: 'plugged', label: 'Status', align: 'center' },
-  { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
+  { field: 'name', label: 'Fahrzeug', shrink: true },
+  { field: 'manufacturer', label: 'Hersteller', autoWidth: true },
+  { field: 'model', label: 'Modell', autoWidth: true },
+  { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
+  { field: 'vehicleSocValue', label: 'Ladestand', align: 'right', autoWidth: true },
 ];
 
 const columnConfigCompact: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
-  { field: 'plugged', label: 'Status', align: 'center' },
-  { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
+  { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
+  { field: 'vehicleSocValue', label: 'Ladestand', align: 'right', autoWidth: true },
 ];
 
 const onRowClick = (row: VehicleRow) => {
@@ -151,15 +136,3 @@ const onRowClick = (row: VehicleRow) => {
   modalChargeVehicleCardVisible.value = true;
 };
 </script>
-
-<style scoped lang="scss">
-.max-width-0 {
-  max-width: 0;
-}
-.row-color-bar {
-  width: 4px;
-  height: 100%;
-  min-height: 24px;
-  border-radius: 2px;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index efc0452bf5..72b0195e0d 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -5,12 +5,14 @@ export type ColumnConfiguration = {
   label: string;
   align?: 'left' | 'right' | 'center';
   expandField?: boolean;
+  autoWidth?: boolean;
+  shrink?: boolean;
 };
 
 export interface BodySlotProps<T> {
   key: string | number;
   row: T;
-  cols: QTableColumn[];
+  cols: ExtendedQTableColumn[];
   expand: boolean;
 }
 
@@ -40,3 +42,8 @@ export interface VehicleRow extends Record<string, unknown> {
   vehicleSocValue: string;
   color: string;
 }
+
+export type ExtendedQTableColumn = QTableColumn & {
+  autoWidth?: boolean;
+  shrink?: boolean;
+};

From 7e0e1fdb5c2480a8f89ba28678caed407c8aeae0 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 11 May 2026 10:28:45 +0200
Subject: [PATCH 16/22] formatting

---
 .../web_themes/koala/source/src/components/BaseTable.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 7dde09cbcc..ac8676314d 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -79,7 +79,7 @@
             @click.stop="rowProps.expand = !rowProps.expand"
           />
         </q-td>
-        <!-- DATA COLUMNS -->
+        <!-- Data Columns -->
         <template v-for="(column, index) in rowProps.cols" :key="column.name">
           <q-td
             :props="{

From 71f464b7ed76f00e4f4d56e1ababd72b01127a11 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 11 May 2026 10:49:42 +0200
Subject: [PATCH 17/22] Add user defined color to table expansion row

---
 .../web_themes/koala/source/src/components/BaseTable.vue     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index ac8676314d..1c95b6c98c 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -127,7 +127,10 @@
         :props="rowProps"
         class="q-virtual-scroll--with-prev"
       >
-        <q-td :colspan="rowProps.cols.length + 1">
+        <q-td
+          :colspan="rowProps.cols.length + 1"
+          :style="rowBorderStyle(rowProps.row)"
+        >
           <slot name="row-expand" v-bind="rowProps" />
         </q-td>
       </q-tr>

From 476a383a6ae7686676e4da033d61ee2be0f2191f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 12 May 2026 17:08:49 +0200
Subject: [PATCH 18/22] Use icon sprite for icons in place of vue components

---
 .../web_themes/koala/source/src/App.vue       |  3 +
 .../charts/dailyTotals/DailyTotalsRow.vue     |  8 ---
 .../energyFlowChart/EnergyFlowChart.vue       | 64 ++++++-------------
 .../energy-flow-chart-models.ts               |  4 +-
 .../src/components/svgIcons/BaseIcon.vue      | 46 ++++++-------
 .../src/components/svgIcons/BatteryIcon.vue   | 13 ----
 .../components/svgIcons/ChargePointIcon.vue   | 13 ----
 .../src/components/svgIcons/CounterIcon.vue   | 15 -----
 .../src/components/svgIcons/GridIcon.vue      | 15 -----
 .../src/components/svgIcons/HouseIcon.vue     | 18 ------
 .../src/components/svgIcons/IconSprite.vue    | 61 ++++++++++++++++++
 .../source/src/components/svgIcons/PvIcon.vue | 13 ----
 .../src/components/svgIcons/VehicleIcon.vue   | 22 -------
 13 files changed, 102 insertions(+), 193 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/CounterIcon.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue

diff --git a/packages/modules/web_themes/koala/source/src/App.vue b/packages/modules/web_themes/koala/source/src/App.vue
index ee4f7b6bdf..92240f4404 100644
--- a/packages/modules/web_themes/koala/source/src/App.vue
+++ b/packages/modules/web_themes/koala/source/src/App.vue
@@ -1,8 +1,11 @@
 <template>
+  <IconSprite />
   <router-view />
 </template>
 
 <script setup lang="ts">
+import IconSprite from 'src/components/svgIcons/IconSprite.vue';
+
 defineOptions({
   name: 'OpenwbKoalaWebTheme',
 });
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 e818faccc4..d80891da4b 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
@@ -167,14 +167,6 @@ const arrowDirection = (id: string) => {
   height: 1.75rem;
   color: var(--q-diagram-icon);
 }
-
-:deep(.base-icon svg) {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-  vertical-align: middle;
-  overflow: hidden;
-}
 .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 a39d6aab93..17f59326b7 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
@@ -3,13 +3,6 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
-//SVG Icons
-import GridIcon from 'src/components/svgIcons/GridIcon.vue';
-import HouseIcon from 'src/components/svgIcons/HouseIcon.vue';
-import PvIcon from 'src/components/svgIcons/PvIcon.vue';
-import BatteryIcon from 'src/components/svgIcons/BatteryIcon.vue';
-import ChargePointIcon from 'src/components/svgIcons/ChargePointIcon.vue';
-import VehicleIcon from 'src/components/svgIcons/VehicleIcon.vue';
 
 const mqttStore = useMqttStore();
 
@@ -341,7 +334,7 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 0, column: 0 },
       label: ['EVU', absoluteValueObject(gridPower.value).textValue],
       powerValue: Number(gridPower.value.value),
-      iconComponent: GridIcon,
+      iconName: 'grid',
       iconColor:
         mqttStore.getGridComponentColor(gridID.value) ||
         'var(--q-diagram-icon)',
@@ -360,7 +353,7 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 0, column: 2 },
       label: ['Haus', absoluteValueObject(homePower.value).textValue],
       powerValue: Number(homePower.value.value),
-      iconComponent: HouseIcon,
+      iconName: 'house',
       iconColor: 'var(--q-diagram-icon)',
     });
   }
@@ -377,7 +370,7 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
-      iconComponent: PvIcon,
+      iconName: 'pv',
       iconColor:
         mqttStore.getPvComponentColor(pvId.value) || 'var(--q-diagram-icon)',
     });
@@ -396,7 +389,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
       powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
-      iconComponent: BatteryIcon,
+      iconName: 'battery',
       iconColor: 'var(--q-diagram-icon)',
     });
   }
@@ -422,7 +415,7 @@ const svgComponents = computed((): FlowComponent[] => {
           absoluteValueObject(chargePoint1Power.value).textValue,
         ],
         powerValue: Number(chargePoint1Power.value.value),
-        iconComponent: ChargePointIcon,
+        iconName: 'chargepoint',
         iconColor:
           mqttStore.chargePointUserDefinedColor(
             connectedChargePoints.value[0],
@@ -450,7 +443,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint1ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint1ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          iconComponent: VehicleIcon,
+          iconName: 'vehicle',
           iconColor:
             mqttStore.vehicleUserDefinedColor(
               chargePoint1ConnectedVehicle.value?.id,
@@ -479,7 +472,7 @@ const svgComponents = computed((): FlowComponent[] => {
             absoluteValueObject(chargePoint2Power.value).textValue,
           ],
           powerValue: Number(chargePoint2Power.value.value),
-          iconComponent: ChargePointIcon,
+          iconName: 'chargepoint',
           iconColor:
             mqttStore.chargePointUserDefinedColor(
               connectedChargePoints.value[1],
@@ -508,7 +501,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint2ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint2ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          iconComponent: VehicleIcon,
+          iconName: 'vehicle',
           iconColor:
             mqttStore.vehicleUserDefinedColor(
               chargePoint2ConnectedVehicle.value?.id,
@@ -534,7 +527,7 @@ const svgComponents = computed((): FlowComponent[] => {
             absoluteValueObject(chargePoint3Power.value).textValue,
           ],
           powerValue: Number(chargePoint3Power.value.value),
-          iconComponent: ChargePointIcon,
+          iconName: 'chargepoint',
           iconColor:
             mqttStore.chargePointUserDefinedColor(
               connectedChargePoints.value[2],
@@ -563,7 +556,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint3ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint3ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          iconComponent: VehicleIcon,
+          iconName: 'vehicle',
           iconColor:
             mqttStore.vehicleUserDefinedColor(
               chargePoint3ConnectedVehicle.value?.id,
@@ -588,7 +581,7 @@ const svgComponents = computed((): FlowComponent[] => {
           absoluteValueObject(chargePointSumPower.value).textValue,
         ],
         powerValue: Number(chargePointSumPower.value.value),
-        iconComponent: ChargePointIcon,
+        iconName: 'chargepoint',
         iconColor: 'var(--q-diagram-icon)',
       });
     }
@@ -819,19 +812,15 @@ const svgRectWidth = computed(
               :clip-path="`url(#clip-soc-${component.id})`"
             />
 
-            <foreignObject
+            <use
+              v-if="component.iconName"
+              :href="`#icon-${component.iconName}`"
               :x="-svgIconWidth / 2"
               :y="-svgIconHeight / 2"
               :width="svgIconWidth"
               :height="svgIconHeight"
-            >
-              <div class="icon-wrapper" :style="{ color: component.iconColor }">
-                <component
-                  :is="component.iconComponent"
-                  style="width: 100%; height: 100%"
-                />
-              </div>
-            </foreignObject>
+              :style="{ color: component.iconColor }"
+            />
           </g>
         </g>
       </g>
@@ -987,18 +976,6 @@ rect {
   fill: var(--q-secondary);
 }
 
-:root {
-  image {
-    filter: brightness(0.4); /* Creates a dark grey icons in light theme */
-  }
-}
-
-.body--dark {
-  image {
-    filter: brightness(1); /* white icons in dark theme */
-  }
-}
-
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;
@@ -1108,11 +1085,8 @@ text .fill-dark {
 .vehicle circle:not(.soc) {
   fill: color-mix(in srgb, var(--q-accent) 50%, transparent);
 }
-.icon-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
+use {
+  fill: currentColor;
 }
 </style>
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 6d2390e583..f88ab3ea49 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
@@ -1,5 +1,3 @@
-import type { Component } from 'vue';
-
 export interface SvgSize {
   xMin: number;
   xMax: number;
@@ -33,6 +31,6 @@ export interface FlowComponent {
   label: string[];
   powerValue?: number;
   soc?: number;
-  iconComponent?: Component;
+  iconName?: string;
   iconColor?: string | null;
 }
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
index 23afb4f323..7e17041523 100644
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
@@ -1,36 +1,26 @@
 <template>
-  <div :style="color ? { color } : undefined">
-    <component :is="iconComponent" v-if="iconComponent" />
-  </div>
+  <svg
+    class="base-icon"
+    :style="color ? { color } : undefined"
+    aria-hidden="true"
+  >
+    <use :href="`#icon-${iconName}`" />
+  </svg>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-import GridIcon from 'src/components/svgIcons/GridIcon.vue';
-import CounterIcon from 'src/components/svgIcons/CounterIcon.vue';
-import BatteryIcon from 'src/components/svgIcons/BatteryIcon.vue';
-import ChargePointIcon from 'src/components/svgIcons/ChargePointIcon.vue';
-import VehicleIcon from 'src/components/svgIcons/VehicleIcon.vue';
-import PvIcon from 'src/components/svgIcons/PvIcon.vue';
-import HouseIcon from 'src/components/svgIcons/HouseIcon.vue';
-
-const props = defineProps<{
+defineProps<{
   iconName: string;
   color?: string | null;
 }>();
-
-const iconMap = {
-  grid: GridIcon,
-  counter: CounterIcon,
-  battery: BatteryIcon,
-  chargepoint: ChargePointIcon,
-  pv: PvIcon,
-  house: HouseIcon,
-  vehicle: VehicleIcon,
-};
-
-const iconComponent = computed(() => {
-  return iconMap[props.iconName] || null;
-});
 </script>
+
+<style scoped>
+.base-icon {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  vertical-align: middle;
+  overflow: hidden;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
deleted file mode 100644
index 0fe0431553..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/BatteryIcon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <path
-      d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"
-    />
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
deleted file mode 100644
index 8231c2af69..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/ChargePointIcon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <path
-      d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z"
-    />
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/CounterIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/CounterIcon.vue
deleted file mode 100644
index f6d4e67e16..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/CounterIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"
-    />
-    <path
-      d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"
-    />
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
deleted file mode 100644
index f2cd5a67ee..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/GridIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <g transform="scale(1.1)">
-      <path
-        d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"
-      />
-    </g>
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
deleted file mode 100644
index 12c0ce073f..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/HouseIcon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <g transform="scale(0.9)">
-    <path
-      d="M848 539.648a32.128 32.128 0 0 1 24.874667 31.189333v412.885334a32.085333 32.085333 0 0 1-32 32h-253.824a32.085333 32.085333 0 0 1-32-32v-217.557334H470.613333v217.557334a32.085333 32.085333 0 0 1-32 32H183.125333a32.085333 32.085333 0 0 1-32-32v-412.885334a31.957333 31.957333 0 0 1 63.488-5.717333c0.426667 2.517333 0.384 3.157333 0.512 5.717333v380.885334H406.613333v-217.557334a32.085333 32.085333 0 0 1 32-32h148.437334a32.170667 32.170667 0 0 1 32 32v217.557334h189.824v-380.885334a32.256 32.256 0 0 1 33.450666-31.957333c2.858667 0.256 2.858667 0.256 5.674667 0.768z"
-    />
-    <path
-      d="M774.698667 267.989333l228.224 226.730667c0.768 0.853333 1.578667 1.664 2.304 2.56a31.786667 31.786667 0 0 1 7.04 22.613333 32.341333 32.341333 0 0 1-32.682667 29.482667 32.170667 32.170667 0 0 1-16.384-4.949333c-2.602667-1.664-3.114667-2.261333-5.418667-4.309334L507.690667 92.842667 57.386667 540.117333l-2.56 2.304c-0.938667 0.64-1.834667 1.365333-2.816 2.005334a32.170667 32.170667 0 0 1-23.296 4.394666 32.341333 32.341333 0 0 1-25.856-32.384 32.170667 32.170667 0 0 1 5.077333-16.341333c1.664-2.602667 2.304-3.114667 4.352-5.418667L485.12 25.045333c0.853333-0.725333 1.621333-1.536 2.517333-2.218666a31.701333 31.701333 0 0 1 11.818667-6.016c2.858667-0.768 3.626667-0.725333 6.570667-1.024h3.328c1.109333 0.128 2.218667 0.170667 3.328 0.341333a31.744 31.744 0 0 1 12.373333 4.736c2.474667 1.621333 2.986667 2.218667 5.205333 4.181333l179.541334 178.432c-0.042667-28.928 0.213333-57.856 0.853333-86.741333a32 32 0 0 1 62.037333-9.557333c1.152 3.072 1.92 9.557333 1.92 9.557333l0.085334 151.253333z"
-    />
-    </g>
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue
new file mode 100644
index 0000000000..619a384a56
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue
@@ -0,0 +1,61 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="position: absolute; width: 0; height: 0; overflow: hidden"
+    aria-hidden="true"
+  >
+    <defs>
+      <symbol id="icon-grid" viewBox="0 0 1024 1024">
+        <g transform="scale(1.1)">
+          <path
+            d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"
+          />
+        </g>
+      </symbol>
+
+      <symbol id="icon-house" viewBox="0 0 1024 1024">
+        <g transform="scale(0.9)">
+          <path
+            d="M848 539.648a32.128 32.128 0 0 1 24.874667 31.189333v412.885334a32.085333 32.085333 0 0 1-32 32h-253.824a32.085333 32.085333 0 0 1-32-32v-217.557334H470.613333v217.557334a32.085333 32.085333 0 0 1-32 32H183.125333a32.085333 32.085333 0 0 1-32-32v-412.885334a31.957333 31.957333 0 0 1 63.488-5.717333c0.426667 2.517333 0.384 3.157333 0.512 5.717333v380.885334H406.613333v-217.557334a32.085333 32.085333 0 0 1 32-32h148.437334a32.170667 32.170667 0 0 1 32 32v217.557334h189.824v-380.885334a32.256 32.256 0 0 1 33.450666-31.957333c2.858667 0.256 2.858667 0.256 5.674667 0.768z"
+          />
+          <path
+            d="M774.698667 267.989333l228.224 226.730667c0.768 0.853333 1.578667 1.664 2.304 2.56a31.786667 31.786667 0 0 1 7.04 22.613333 32.341333 32.341333 0 0 1-32.682667 29.482667 32.170667 32.170667 0 0 1-16.384-4.949333c-2.602667-1.664-3.114667-2.261333-5.418667-4.309334L507.690667 92.842667 57.386667 540.117333l-2.56 2.304c-0.938667 0.64-1.834667 1.365333-2.816 2.005334a32.170667 32.170667 0 0 1-23.296 4.394666 32.341333 32.341333 0 0 1-25.856-32.384 32.170667 32.170667 0 0 1 5.077333-16.341333c1.664-2.602667 2.304-3.114667 4.352-5.418667L485.12 25.045333c0.853333-0.725333 1.621333-1.536 2.517333-2.218666a31.701333 31.701333 0 0 1 11.818667-6.016c2.858667-0.768 3.626667-0.725333 6.570667-1.024h3.328c1.109333 0.128 2.218667 0.170667 3.328 0.341333a31.744 31.744 0 0 1 12.373333 4.736c2.474667 1.621333 2.986667 2.218667 5.205333 4.181333l179.541334 178.432c-0.042667-28.928 0.213333-57.856 0.853333-86.741333a32 32 0 0 1 62.037333-9.557333c1.152 3.072 1.92 9.557333 1.92 9.557333l0.085334 151.253333z"
+          />
+        </g>
+      </symbol>
+
+      <symbol id="icon-pv" viewBox="0 0 1024 1024">
+        <path
+          d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"
+        />
+      </symbol>
+
+      <symbol id="icon-battery" viewBox="0 0 1024 1024">
+        <path
+          d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"
+        />
+      </symbol>
+
+      <symbol id="icon-chargepoint" viewBox="0 0 1024 1024">
+        <path
+          d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z"
+        />
+      </symbol>
+
+      <symbol id="icon-vehicle" viewBox="0 0 1024 1024">
+        <path
+          d="M213.333333 469.333333l64-192h469.333334L810.666667 469.333333m-64 213.333334a64 64 0 0 1-64-64 64 64 0 0 1 64-64 64 64 0 0 1 64 64 64 64 0 0 1-64 64m-469.333334 0A64 64 0 0 1 213.333333 618.666667 64 64 0 0 1 277.333333 554.666667 64 64 0 0 1 341.333333 618.666667 64 64 0 0 1 277.333333 682.666667M807.253333 256c-8.533333-24.746667-32.426667-42.666667-60.586666-42.666667h-469.333334c-28.16 0-52.053333 17.92-60.586666 42.666667L128 512v341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666666h512v42.666666a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-341.333333l-88.746667-256z"
+        />
+      </symbol>
+
+      <symbol id="icon-counter" viewBox="0 0 1024 1024">
+        <path
+          d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"
+        />
+        <path
+          d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"
+        />
+      </symbol>
+    </defs>
+  </svg>
+</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
deleted file mode 100644
index 666c8d453d..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/PvIcon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <path
-      d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"
-    />
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue
deleted file mode 100644
index d8655eaf7f..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/VehicleIcon.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <svg
-    class="svg-icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    id="svg4"
-    sodipodi:docname="owbCar.svg"
-    inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:svg="http://www.w3.org/2000/svg"
-    fill="currentColor"
-  >
-    <defs id="defs8" />
-    <path
-      d="M213.333333 469.333333l64-192h469.333334L810.666667 469.333333m-64 213.333334a64 64 0 0 1-64-64 64 64 0 0 1 64-64 64 64 0 0 1 64 64 64 64 0 0 1-64 64m-469.333334 0A64 64 0 0 1 213.333333 618.666667 64 64 0 0 1 277.333333 554.666667 64 64 0 0 1 341.333333 618.666667 64 64 0 0 1 277.333333 682.666667M807.253333 256c-8.533333-24.746667-32.426667-42.666667-60.586666-42.666667h-469.333334c-28.16 0-52.053333 17.92-60.586666 42.666667L128 512v341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666666h512v42.666666a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-341.333333l-88.746667-256z"
-      fill=""
-      id="path2"
-    />
-  </svg>
-</template>

From 9aa55917a710b3b8f1e58bc04e0834d06e60bc02 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 15 May 2026 08:17:47 +0200
Subject: [PATCH 19/22] Use vite-svg-loader for svg icons

---
 .../web_themes/koala/source/package-lock.json | 195 +++++++++++++++++-
 .../web_themes/koala/source/package.json      |   1 +
 .../koala/source/public/icons/owbBattery.svg  |   3 -
 .../source/public/icons/owbBattery_2.svg      |   1 -
 .../source/public/icons/owbChargePoint.svg    |   3 -
 .../source/public/icons/owbChargePoint_2.svg  |   1 -
 .../koala/source/public/icons/owbCounter.svg  |   1 -
 .../koala/source/public/icons/owbGrid.svg     |   3 -
 .../koala/source/public/icons/owbHouse.svg    |   1 -
 .../koala/source/public/icons/owbPV.svg       |   3 -
 .../web_themes/koala/source/quasar.config.ts  |   1 +
 .../web_themes/koala/source/src/App.vue       |   3 -
 .../source/src/assets/icons/owbBattery.svg    |   3 +
 .../source/src/assets/icons/owbBattery_2.svg  |   1 +
 .../src/assets/icons/owbChargePoint.svg       |   3 +
 .../src/assets/icons/owbChargePoint_2.svg     |   1 +
 .../source/src/assets/icons/owbCounter.svg    |   1 +
 .../koala/source/src/assets/icons/owbGrid.svg |   3 +
 .../source/src/assets/icons/owbHouse.svg      |   1 +
 .../koala/source/src/assets/icons/owbPV.svg   |   3 +
 .../assets}/icons/owbVehicle.svg              |   2 +-
 .../charts/dailyTotals/DailyTotalsRow.vue     |  23 ++-
 .../energyFlowChart/EnergyFlowChart.vue       |  53 +++--
 .../energy-flow-chart-models.ts               |   4 +-
 .../src/components/svgIcons/BaseIcon.vue      |  26 ---
 .../src/components/svgIcons/IconSprite.vue    |  61 ------
 .../koala/source/src/types/svg.d.ts           |   5 +
 27 files changed, 269 insertions(+), 137 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbBattery.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbChargePoint.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbGrid.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbHouse.svg
 delete mode 100644 packages/modules/web_themes/koala/source/public/icons/owbPV.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbBattery.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbBattery_2.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint_2.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbCounter.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbGrid.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbHouse.svg
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbPV.svg
 rename packages/modules/web_themes/koala/source/{public => src/assets}/icons/owbVehicle.svg (97%)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/types/svg.d.ts

diff --git a/packages/modules/web_themes/koala/source/package-lock.json b/packages/modules/web_themes/koala/source/package-lock.json
index 07f0945fb5..d5bcfb96da 100644
--- a/packages/modules/web_themes/koala/source/package-lock.json
+++ b/packages/modules/web_themes/koala/source/package-lock.json
@@ -18,6 +18,7 @@
         "pinia": "^3.0.3",
         "quasar": "^2.18.2",
         "register-service-worker": "^1.7.2",
+        "vite-svg-loader": "^5.1.1",
         "vue": "^3.5.18",
         "vue-chartjs": "^5.3.2",
         "vue-router": "^4.5.1"
@@ -4660,7 +4661,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
@@ -5447,6 +5447,47 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5460,6 +5501,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -5704,6 +5778,61 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -5846,7 +5975,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -8283,6 +8411,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8628,7 +8762,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
@@ -11062,6 +11195,49 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
+      "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgo/node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/sync-child-process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
@@ -11938,6 +12114,19 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz",
+      "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "svgo": "^3.3.3"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
diff --git a/packages/modules/web_themes/koala/source/package.json b/packages/modules/web_themes/koala/source/package.json
index 2740c7a91b..5b6d548165 100644
--- a/packages/modules/web_themes/koala/source/package.json
+++ b/packages/modules/web_themes/koala/source/package.json
@@ -24,6 +24,7 @@
     "pinia": "^3.0.3",
     "quasar": "^2.18.2",
     "register-service-worker": "^1.7.2",
+    "vite-svg-loader": "^5.1.1",
     "vue": "^3.5.18",
     "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.1"
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbBattery.svg b/packages/modules/web_themes/koala/source/public/icons/owbBattery.svg
deleted file mode 100644
index dd1fc748d3..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbBattery.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="svg-icon" style="width: 2em; height: 2em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M170.666667 128v128H42.666667v597.333333h938.666666V256h-128V128h-256v128h-170.666666V128H170.666667M128 341.333333h768v426.666667H128V341.333333m512 85.333334v85.333333h-85.333333v85.333333h85.333333v85.333334h85.333333v-85.333334h85.333334v-85.333333h-85.333334v-85.333333h-85.333333M213.333333 512v85.333333h256v-85.333333H213.333333z" fill="" /></svg>
- 
-  
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg b/packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg
deleted file mode 100644
index 709627ebb9..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbBattery_2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"  /></svg>
\ No newline at end of file
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbChargePoint.svg b/packages/modules/web_themes/koala/source/public/icons/owbChargePoint.svg
deleted file mode 100644
index 29cca3f93c..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbChargePoint.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="svg-icon" style="width: 2em; height: 2em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 282.496 933.504 192 754.752 370.752 653.248 269.248 832 90.496 741.504 0 562.752 178.752 448 64 361.376 150.624 873.376 662.624 960 576 845.248 461.248zM274.752 749.248c165.76 165.76 385.184 36.352 519.296-75.456L350.208 229.952C238.4 364.064 108.992 583.488 274.752 749.248zM192 704 320 832 128 1024 0 896z"  /></svg>
-
-  
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg b/packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg
deleted file mode 100644
index 4b56f6fb09..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbChargePoint_2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z" fill="" /></svg>
\ No newline at end of file
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg b/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
deleted file mode 100644
index 8a8f271fce..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"  /><path d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"  /></svg>
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbGrid.svg b/packages/modules/web_themes/koala/source/public/icons/owbGrid.svg
deleted file mode 100644
index e098048efa..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbGrid.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="svg-icon" style="width: 4em;height: 4em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"  /></svg>
-
-  
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbHouse.svg b/packages/modules/web_themes/koala/source/public/icons/owbHouse.svg
deleted file mode 100644
index 412dc8613b..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbHouse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M848 539.648a32.128 32.128 0 0 1 24.874667 31.189333v412.885334a32.085333 32.085333 0 0 1-32 32h-253.824a32.085333 32.085333 0 0 1-32-32v-217.557334H470.613333v217.557334a32.085333 32.085333 0 0 1-32 32H183.125333a32.085333 32.085333 0 0 1-32-32v-412.885334a31.957333 31.957333 0 0 1 63.488-5.717333c0.426667 2.517333 0.384 3.157333 0.512 5.717333v380.885334H406.613333v-217.557334a32.085333 32.085333 0 0 1 32-32h148.437334a32.170667 32.170667 0 0 1 32 32v217.557334h189.824v-380.885334a32.256 32.256 0 0 1 33.450666-31.957333c2.858667 0.256 2.858667 0.256 5.674667 0.768z"  /><path d="M774.698667 267.989333l228.224 226.730667c0.768 0.853333 1.578667 1.664 2.304 2.56a31.786667 31.786667 0 0 1 7.04 22.613333 32.341333 32.341333 0 0 1-32.682667 29.482667 32.170667 32.170667 0 0 1-16.384-4.949333c-2.602667-1.664-3.114667-2.261333-5.418667-4.309334L507.690667 92.842667 57.386667 540.117333l-2.56 2.304c-0.938667 0.64-1.834667 1.365333-2.816 2.005334a32.170667 32.170667 0 0 1-23.296 4.394666 32.341333 32.341333 0 0 1-25.856-32.384 32.170667 32.170667 0 0 1 5.077333-16.341333c1.664-2.602667 2.304-3.114667 4.352-5.418667L485.12 25.045333c0.853333-0.725333 1.621333-1.536 2.517333-2.218666a31.701333 31.701333 0 0 1 11.818667-6.016c2.858667-0.768 3.626667-0.725333 6.570667-1.024h3.328c1.109333 0.128 2.218667 0.170667 3.328 0.341333a31.744 31.744 0 0 1 12.373333 4.736c2.474667 1.621333 2.986667 2.218667 5.205333 4.181333l179.541334 178.432c-0.042667-28.928 0.213333-57.856 0.853333-86.741333a32 32 0 0 1 62.037333-9.557333c1.152 3.072 1.92 9.557333 1.92 9.557333l0.085334 151.253333z"  /></svg>
\ No newline at end of file
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbPV.svg b/packages/modules/web_themes/koala/source/public/icons/owbPV.svg
deleted file mode 100644
index becf88bc97..0000000000
--- a/packages/modules/web_themes/koala/source/public/icons/owbPV.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="svg-icon" style="width: 3em; height: 3em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"  /></svg>
-
-
diff --git a/packages/modules/web_themes/koala/source/quasar.config.ts b/packages/modules/web_themes/koala/source/quasar.config.ts
index e53f0639b0..fb0f1d3fce 100644
--- a/packages/modules/web_themes/koala/source/quasar.config.ts
+++ b/packages/modules/web_themes/koala/source/quasar.config.ts
@@ -86,6 +86,7 @@ export default defineConfig((ctx) => {
           },
           { server: false },
         ],
+        ['vite-svg-loader'],
       ],
     },
 
diff --git a/packages/modules/web_themes/koala/source/src/App.vue b/packages/modules/web_themes/koala/source/src/App.vue
index 92240f4404..ee4f7b6bdf 100644
--- a/packages/modules/web_themes/koala/source/src/App.vue
+++ b/packages/modules/web_themes/koala/source/src/App.vue
@@ -1,11 +1,8 @@
 <template>
-  <IconSprite />
   <router-view />
 </template>
 
 <script setup lang="ts">
-import IconSprite from 'src/components/svgIcons/IconSprite.vue';
-
 defineOptions({
   name: 'OpenwbKoalaWebTheme',
 });
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbBattery.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbBattery.svg
new file mode 100644
index 0000000000..efcd7cd76a
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbBattery.svg
@@ -0,0 +1,3 @@
+<svg class="svg-icon" style="width: 2em; height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M170.666667 128v128H42.666667v597.333333h938.666666V256h-128V128h-256v128h-170.666666V128H170.666667M128 341.333333h768v426.666667H128V341.333333m512 85.333334v85.333333h-85.333333v85.333333h85.333333v85.333334h85.333333v-85.333334h85.333334v-85.333333h-85.333334v-85.333333h-85.333333M213.333333 512v85.333333h256v-85.333333H213.333333z" fill="" /></svg>
+
+
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbBattery_2.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbBattery_2.svg
new file mode 100644
index 0000000000..a4c8e5c709
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbBattery_2.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"  /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint.svg
new file mode 100644
index 0000000000..67dd481526
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint.svg
@@ -0,0 +1,3 @@
+<svg class="svg-icon" style="width: 2em; height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 282.496 933.504 192 754.752 370.752 653.248 269.248 832 90.496 741.504 0 562.752 178.752 448 64 361.376 150.624 873.376 662.624 960 576 845.248 461.248zM274.752 749.248c165.76 165.76 385.184 36.352 519.296-75.456L350.208 229.952C238.4 364.064 108.992 583.488 274.752 749.248zM192 704 320 832 128 1024 0 896z"  /></svg>
+
+
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint_2.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint_2.svg
new file mode 100644
index 0000000000..ff7ae019b1
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbChargePoint_2.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z" fill="" /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbCounter.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbCounter.svg
new file mode 100644
index 0000000000..0984f3c17e
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbCounter.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"  /><path d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"  /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbGrid.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbGrid.svg
new file mode 100644
index 0000000000..487386825c
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbGrid.svg
@@ -0,0 +1,3 @@
+<svg class="svg-icon" style="width: 4em;height: 4em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"  /></svg>
+
+
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbHouse.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbHouse.svg
new file mode 100644
index 0000000000..cee1b4ce3d
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbHouse.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M848 539.648a32.128 32.128 0 0 1 24.874667 31.189333v412.885334a32.085333 32.085333 0 0 1-32 32h-253.824a32.085333 32.085333 0 0 1-32-32v-217.557334H470.613333v217.557334a32.085333 32.085333 0 0 1-32 32H183.125333a32.085333 32.085333 0 0 1-32-32v-412.885334a31.957333 31.957333 0 0 1 63.488-5.717333c0.426667 2.517333 0.384 3.157333 0.512 5.717333v380.885334H406.613333v-217.557334a32.085333 32.085333 0 0 1 32-32h148.437334a32.170667 32.170667 0 0 1 32 32v217.557334h189.824v-380.885334a32.256 32.256 0 0 1 33.450666-31.957333c2.858667 0.256 2.858667 0.256 5.674667 0.768z"  /><path d="M774.698667 267.989333l228.224 226.730667c0.768 0.853333 1.578667 1.664 2.304 2.56a31.786667 31.786667 0 0 1 7.04 22.613333 32.341333 32.341333 0 0 1-32.682667 29.482667 32.170667 32.170667 0 0 1-16.384-4.949333c-2.602667-1.664-3.114667-2.261333-5.418667-4.309334L507.690667 92.842667 57.386667 540.117333l-2.56 2.304c-0.938667 0.64-1.834667 1.365333-2.816 2.005334a32.170667 32.170667 0 0 1-23.296 4.394666 32.341333 32.341333 0 0 1-25.856-32.384 32.170667 32.170667 0 0 1 5.077333-16.341333c1.664-2.602667 2.304-3.114667 4.352-5.418667L485.12 25.045333c0.853333-0.725333 1.621333-1.536 2.517333-2.218666a31.701333 31.701333 0 0 1 11.818667-6.016c2.858667-0.768 3.626667-0.725333 6.570667-1.024h3.328c1.109333 0.128 2.218667 0.170667 3.328 0.341333a31.744 31.744 0 0 1 12.373333 4.736c2.474667 1.621333 2.986667 2.218667 5.205333 4.181333l179.541334 178.432c-0.042667-28.928 0.213333-57.856 0.853333-86.741333a32 32 0 0 1 62.037333-9.557333c1.152 3.072 1.92 9.557333 1.92 9.557333l0.085334 151.253333z"  /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbPV.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbPV.svg
new file mode 100644
index 0000000000..1ccb43e72b
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbPV.svg
@@ -0,0 +1,3 @@
+<svg class="svg-icon" style="width: 3em; height: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"  /></svg>
+
+
diff --git a/packages/modules/web_themes/koala/source/public/icons/owbVehicle.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbVehicle.svg
similarity index 97%
rename from packages/modules/web_themes/koala/source/public/icons/owbVehicle.svg
rename to packages/modules/web_themes/koala/source/src/assets/icons/owbVehicle.svg
index e721de12f4..925d5fda21 100644
--- a/packages/modules/web_themes/koala/source/public/icons/owbVehicle.svg
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbVehicle.svg
@@ -35,5 +35,5 @@
      d="M213.333333 469.333333l64-192h469.333334L810.666667 469.333333m-64 213.333334a64 64 0 0 1-64-64 64 64 0 0 1 64-64 64 64 0 0 1 64 64 64 64 0 0 1-64 64m-469.333334 0A64 64 0 0 1 213.333333 618.666667 64 64 0 0 1 277.333333 554.666667 64 64 0 0 1 341.333333 618.666667 64 64 0 0 1 277.333333 682.666667M807.253333 256c-8.533333-24.746667-32.426667-42.666667-60.586666-42.666667h-469.333334c-28.16 0-52.053333 17.92-60.586666 42.666667L128 512v341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666666h512v42.666666a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-341.333333l-88.746667-256z"
      fill=""
      id="path2"
-     style="fill:#ffffff;fill-opacity:1" />
+     fill="currentColor" />
 </svg>
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 d80891da4b..2bb1946bf1 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
@@ -2,10 +2,11 @@
   <div class="component-container">
     <!-- Icon -->
     <div class="col-icon">
-      <BaseIcon
-        :iconName="props.item.icon"
-        :color="props.item.color"
+      <component
+        :is="iconMap[props.item.icon]"
         class="base-icon"
+        :style="{ color: props.item.color || 'var(--q-diagram-icon)' }"
+
       />
     </div>
     <!-- Title -->
@@ -91,8 +92,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import BaseIcon from 'src/components/svgIcons/BaseIcon.vue';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
+import BatteryIcon from 'src/assets/icons/owbBattery_2.svg?component';
+import GridIcon from 'src/assets/icons/owbGrid.svg?component';
+import PvIcon from 'src/assets/icons/owbPV.svg?component';
+import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
+import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
+import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 
 const mqttStore = useMqttStore();
 
@@ -140,6 +146,15 @@ const arrowDirection = (id: string) => {
 
   return { noCurrent, rotate180 };
 };
+
+const iconMap = {
+  grid: GridIcon,
+  battery: BatteryIcon,
+  chargepoint: ChargePointIcon,
+  vehicle: VehicleIcon,
+  pv: PvIcon,
+  house: HouseIcon,
+};
 </script>
 
 <style scoped>
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 17f59326b7..3dae9eb08f 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
@@ -3,6 +3,12 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
+import BatteryIcon from 'src/assets/icons/owbBattery_2.svg?component';
+import GridIcon from 'src/assets/icons/owbGrid.svg?component';
+import PvIcon from 'src/assets/icons/owbPV.svg?component';
+import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
+import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
+import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 
 const mqttStore = useMqttStore();
 
@@ -334,7 +340,7 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 0, column: 0 },
       label: ['EVU', absoluteValueObject(gridPower.value).textValue],
       powerValue: Number(gridPower.value.value),
-      iconName: 'grid',
+      iconComponent: GridIcon,
       iconColor:
         mqttStore.getGridComponentColor(gridID.value) ||
         'var(--q-diagram-icon)',
@@ -353,7 +359,7 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 0, column: 2 },
       label: ['Haus', absoluteValueObject(homePower.value).textValue],
       powerValue: Number(homePower.value.value),
-      iconName: 'house',
+      iconComponent: HouseIcon,
       iconColor: 'var(--q-diagram-icon)',
     });
   }
@@ -370,7 +376,7 @@ const svgComponents = computed((): FlowComponent[] => {
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
-      iconName: 'pv',
+      iconComponent: PvIcon,
       iconColor:
         mqttStore.getPvComponentColor(pvId.value) || 'var(--q-diagram-icon)',
     });
@@ -389,7 +395,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
       powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
-      iconName: 'battery',
+      iconComponent: BatteryIcon,
       iconColor: 'var(--q-diagram-icon)',
     });
   }
@@ -415,7 +421,7 @@ const svgComponents = computed((): FlowComponent[] => {
           absoluteValueObject(chargePoint1Power.value).textValue,
         ],
         powerValue: Number(chargePoint1Power.value.value),
-        iconName: 'chargepoint',
+        iconComponent: ChargePointIcon,
         iconColor:
           mqttStore.chargePointUserDefinedColor(
             connectedChargePoints.value[0],
@@ -443,7 +449,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint1ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint1ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          iconName: 'vehicle',
+          iconComponent: VehicleIcon,
           iconColor:
             mqttStore.vehicleUserDefinedColor(
               chargePoint1ConnectedVehicle.value?.id,
@@ -472,7 +478,7 @@ const svgComponents = computed((): FlowComponent[] => {
             absoluteValueObject(chargePoint2Power.value).textValue,
           ],
           powerValue: Number(chargePoint2Power.value.value),
-          iconName: 'chargepoint',
+          iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointUserDefinedColor(
               connectedChargePoints.value[1],
@@ -501,7 +507,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint2ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint2ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          iconName: 'vehicle',
+          iconComponent: VehicleIcon,
           iconColor:
             mqttStore.vehicleUserDefinedColor(
               chargePoint2ConnectedVehicle.value?.id,
@@ -527,7 +533,7 @@ const svgComponents = computed((): FlowComponent[] => {
             absoluteValueObject(chargePoint3Power.value).textValue,
           ],
           powerValue: Number(chargePoint3Power.value.value),
-          iconName: 'chargepoint',
+          iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointUserDefinedColor(
               connectedChargePoints.value[2],
@@ -556,7 +562,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint3ConnectedVehicleChargeMode.value.label || '---',
           ],
           soc: (chargePoint3ConnectedVehicleSoc.value.value?.soc || 0) / 100,
-          iconName: 'vehicle',
+          iconComponent: VehicleIcon,
           iconColor:
             mqttStore.vehicleUserDefinedColor(
               chargePoint3ConnectedVehicle.value?.id,
@@ -581,7 +587,7 @@ const svgComponents = computed((): FlowComponent[] => {
           absoluteValueObject(chargePointSumPower.value).textValue,
         ],
         powerValue: Number(chargePointSumPower.value.value),
-        iconName: 'chargepoint',
+        iconComponent: ChargePointIcon,
         iconColor: 'var(--q-diagram-icon)',
       });
     }
@@ -710,7 +716,10 @@ const svgRectWidth = computed(
           @click="beginAnimation(`animate-label-${component.id}`)"
         >
           <defs>
-            <clipPath v-if="component.soc !== undefined" :id="`clip-soc-${component.id}`">
+            <clipPath
+              v-if="component.soc !== undefined"
+              :id="`clip-soc-${component.id}`"
+            >
               <rect
                 :x="-svgSize.circleRadius - svgSize.strokeWidth"
                 :y="
@@ -811,16 +820,16 @@ const svgRectWidth = computed(
               :r="svgSize.circleRadius"
               :clip-path="`url(#clip-soc-${component.id})`"
             />
-
-            <use
-              v-if="component.iconName"
-              :href="`#icon-${component.iconName}`"
-              :x="-svgIconWidth / 2"
-              :y="-svgIconHeight / 2"
-              :width="svgIconWidth"
-              :height="svgIconHeight"
-              :style="{ color: component.iconColor }"
-            />
+            <g
+              :transform="`translate(${-svgIconWidth / 2}, ${-svgIconHeight / 2})`"
+            >
+              <component
+                :is="component.iconComponent"
+                :width="svgIconWidth"
+                :height="svgIconHeight"
+                :style="{ color: component.iconColor }"
+              />
+            </g>
           </g>
         </g>
       </g>
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 f88ab3ea49..d9ea0363d9 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
@@ -1,3 +1,5 @@
+import { Component } from 'vue';
+
 export interface SvgSize {
   xMin: number;
   xMax: number;
@@ -31,6 +33,6 @@ export interface FlowComponent {
   label: string[];
   powerValue?: number;
   soc?: number;
-  iconName?: string;
+  iconComponent?: Component;
   iconColor?: string | null;
 }
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
deleted file mode 100644
index 7e17041523..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/BaseIcon.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <svg
-    class="base-icon"
-    :style="color ? { color } : undefined"
-    aria-hidden="true"
-  >
-    <use :href="`#icon-${iconName}`" />
-  </svg>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  iconName: string;
-  color?: string | null;
-}>();
-</script>
-
-<style scoped>
-.base-icon {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-  vertical-align: middle;
-  overflow: hidden;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue b/packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue
deleted file mode 100644
index 619a384a56..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/svgIcons/IconSprite.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    style="position: absolute; width: 0; height: 0; overflow: hidden"
-    aria-hidden="true"
-  >
-    <defs>
-      <symbol id="icon-grid" viewBox="0 0 1024 1024">
-        <g transform="scale(1.1)">
-          <path
-            d="M808.41 499.4H667.24l-26.61-132.02h79.12c5.82 0.04 11.42-2.25 15.54-6.36 4.13-4.11 6.44-9.69 6.42-15.52 0.02-5.82-2.3-11.41-6.42-15.52-4.12-4.11-9.72-6.4-15.54-6.36h-87.99l-19.51-96.72c-4.26-20.52-22.32-35.25-43.28-35.31h-96.86c-20.95 0-39.39 14.84-43.28 35.31l-19.51 96.72H321.7a21.846 21.846 0 0 0-15.58 6.34 21.797 21.797 0 0 0-6.44 15.54c0 12.36 9.94 21.88 22.02 21.88h79.12l-26.64 132.06H233.01a21.776 21.776 0 0 0-15.55 6.34 21.81 21.81 0 0 0-6.44 15.51c0 12.02 9.91 21.91 21.96 21.91h132.34l-65.27 326.16v6.7c0 1.41 0.37 2.48 0.7 3.88 0.37 1.41 1.07 2.48 1.78 3.89 0.62 1.31 1.46 2.5 2.48 3.52 0.37 0.7 0.73 1.41 1.41 1.77 0.37 0.34 1.1 0.71 1.43 1.04 1.07 0.71 2.14 1.41 3.55 2.14 1.41 0.7 2.85 1.41 4.25 1.75 0.73 0 1.07 0.7 1.78 0.7h2.14c0.71 0 1.41 0.37 2.14 0.37 0.7 0 1.41-0.37 2.48-0.37 1.41 0 2.82-0.34 4.25-0.7 1.41-0.34 2.81-1.04 3.91-1.75 1.31-0.62 2.51-1.46 3.54-2.48 0.71-0.71 1.41-0.71 2.11-1.41l183.07-192.03 183.05 192.03c0.37 0.34 0.7 0.34 1.07 0.7 1.41 1.41 3.18 2.45 4.96 3.18 0.7 0.34 1.41 1.04 2.14 1.04 2.58 1.13 5.35 1.73 8.17 1.78 1.41 0 2.82 0 3.89-0.37 0.7 0 1.07-0.7 1.77-0.7 1.41-0.34 2.82-1.04 4.25-1.75l3.21-2.14c0.7-0.34 1.07-0.7 1.78-1.04 0.7-0.7 0.7-1.41 1.41-1.77a12.75 12.75 0 0 0 2.48-3.52c0.73-1.41 1.41-2.48 1.78-3.89 0.37-1.41 0.73-2.48 0.73-3.88v-6.7l-65.63-325.83h132.33a21.815 21.815 0 0 0 21.96-21.88c0-11.99-9.58-22.24-21.96-22.24h-0.05zM472.84 235.01H569l17.74 88.24H455.07l17.74-88.24h0.03z m-26.61 132.36h149.01l26.61 132.06H419.6l26.61-132.06h0.02z m159.99 176.15l-85.51 89.31-85.48-89.31h170.99zM358.25 803.35l46.12-228.38 85.88 90.02-132 138.36z m278.86-228.38l46.12 228.38-131.97-138.36 85.85-90.02z m0 0"
-          />
-        </g>
-      </symbol>
-
-      <symbol id="icon-house" viewBox="0 0 1024 1024">
-        <g transform="scale(0.9)">
-          <path
-            d="M848 539.648a32.128 32.128 0 0 1 24.874667 31.189333v412.885334a32.085333 32.085333 0 0 1-32 32h-253.824a32.085333 32.085333 0 0 1-32-32v-217.557334H470.613333v217.557334a32.085333 32.085333 0 0 1-32 32H183.125333a32.085333 32.085333 0 0 1-32-32v-412.885334a31.957333 31.957333 0 0 1 63.488-5.717333c0.426667 2.517333 0.384 3.157333 0.512 5.717333v380.885334H406.613333v-217.557334a32.085333 32.085333 0 0 1 32-32h148.437334a32.170667 32.170667 0 0 1 32 32v217.557334h189.824v-380.885334a32.256 32.256 0 0 1 33.450666-31.957333c2.858667 0.256 2.858667 0.256 5.674667 0.768z"
-          />
-          <path
-            d="M774.698667 267.989333l228.224 226.730667c0.768 0.853333 1.578667 1.664 2.304 2.56a31.786667 31.786667 0 0 1 7.04 22.613333 32.341333 32.341333 0 0 1-32.682667 29.482667 32.170667 32.170667 0 0 1-16.384-4.949333c-2.602667-1.664-3.114667-2.261333-5.418667-4.309334L507.690667 92.842667 57.386667 540.117333l-2.56 2.304c-0.938667 0.64-1.834667 1.365333-2.816 2.005334a32.170667 32.170667 0 0 1-23.296 4.394666 32.341333 32.341333 0 0 1-25.856-32.384 32.170667 32.170667 0 0 1 5.077333-16.341333c1.664-2.602667 2.304-3.114667 4.352-5.418667L485.12 25.045333c0.853333-0.725333 1.621333-1.536 2.517333-2.218666a31.701333 31.701333 0 0 1 11.818667-6.016c2.858667-0.768 3.626667-0.725333 6.570667-1.024h3.328c1.109333 0.128 2.218667 0.170667 3.328 0.341333a31.744 31.744 0 0 1 12.373333 4.736c2.474667 1.621333 2.986667 2.218667 5.205333 4.181333l179.541334 178.432c-0.042667-28.928 0.213333-57.856 0.853333-86.741333a32 32 0 0 1 62.037333-9.557333c1.152 3.072 1.92 9.557333 1.92 9.557333l0.085334 151.253333z"
-          />
-        </g>
-      </symbol>
-
-      <symbol id="icon-pv" viewBox="0 0 1024 1024">
-        <path
-          d="M1024.162909 1023.790545H0L75.217455 414.254545h873.867636zM52.433455 976.919273h919.412363l-63.627636-515.746909H116.061091zM935.726545 637.277091H88.482909v-46.871273H935.726545v46.894546z m26.391273 185.762909H60.276364V776.145455h901.934545v46.894545z m-426.821818 177.314909H488.890182V437.736727h46.289454v562.618182z m-254.603636 1.954909l-46.126546-3.909818 46.266182-562.618182 46.126545 3.886546z m462.941091 0l-46.289455-562.641454 46.126545-3.886546L789.736727 998.4z m-69.515637-634.903273h-46.266182a115.712 115.712 0 1 0-231.400727 0h-46.289454a161.978182 161.978182 0 1 1 323.956363 0z m148.084364 18.757819L696.017455 290.257455 713.937455 162.909091l-125.672728 18.199273L512.162909 78.266182l-76.171636 102.865454L310.341818 162.909091l17.943273 127.301818-126.208 95.906909-27.764364-37.469091 104.285091-79.266909-22.807273-161.698909 159.604364 23.109818L512.162909 0.139636l96.744727 130.676364 159.604364-23.109818-22.807273 161.698909 104.285091 79.266909z"
-        />
-      </symbol>
-
-      <symbol id="icon-battery" viewBox="0 0 1024 1024">
-        <path
-          d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"
-        />
-      </symbol>
-
-      <symbol id="icon-chargepoint" viewBox="0 0 1024 1024">
-        <path
-          d="M843.52 308.48l0.426667-0.426667-158.72-158.72L640 194.56l90.026667 90.026667c-40.106667 15.36-68.693333 53.76-68.693334 99.413333a106.666667 106.666667 0 0 0 106.666667 106.666667c15.36 0 29.44-3.413333 42.666667-8.96v307.626666a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667V597.333333a85.333333 85.333333 0 0 0-85.333333-85.333333h-42.666667V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333H256a85.333333 85.333333 0 0 0-85.333333 85.333333v682.666667h426.666666v-320h64v213.333333A106.666667 106.666667 0 0 0 768 896a106.666667 106.666667 0 0 0 106.666667-106.666667V384c0-29.44-11.946667-56.32-31.146667-75.52M768 426.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667M341.333333 768v-192H256L426.666667 256v213.333333h85.333333l-170.666667 298.666667z"
-        />
-      </symbol>
-
-      <symbol id="icon-vehicle" viewBox="0 0 1024 1024">
-        <path
-          d="M213.333333 469.333333l64-192h469.333334L810.666667 469.333333m-64 213.333334a64 64 0 0 1-64-64 64 64 0 0 1 64-64 64 64 0 0 1 64 64 64 64 0 0 1-64 64m-469.333334 0A64 64 0 0 1 213.333333 618.666667 64 64 0 0 1 277.333333 554.666667 64 64 0 0 1 341.333333 618.666667 64 64 0 0 1 277.333333 682.666667M807.253333 256c-8.533333-24.746667-32.426667-42.666667-60.586666-42.666667h-469.333334c-28.16 0-52.053333 17.92-60.586666 42.666667L128 512v341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666666h512v42.666666a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-341.333333l-88.746667-256z"
-        />
-      </symbol>
-
-      <symbol id="icon-counter" viewBox="0 0 1024 1024">
-        <path
-          d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"
-        />
-        <path
-          d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"
-        />
-      </symbol>
-    </defs>
-  </svg>
-</template>
diff --git a/packages/modules/web_themes/koala/source/src/types/svg.d.ts b/packages/modules/web_themes/koala/source/src/types/svg.d.ts
new file mode 100644
index 0000000000..fc4161d78b
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/types/svg.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg?component' {
+  import type { Component } from 'vue';
+  const component: Component;
+  export default component;
+}

From b9763c4f9f760024c3e7de001eb3e89e816b0f6a Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 15 May 2026 08:33:33 +0200
Subject: [PATCH 20/22] mover vite-svg-loader to dev-dependencies

---
 .../web_themes/koala/source/package-lock.json | 20 ++++++++++++++++++-
 .../web_themes/koala/source/package.json      |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/package-lock.json b/packages/modules/web_themes/koala/source/package-lock.json
index d5bcfb96da..a95fc2f2ba 100644
--- a/packages/modules/web_themes/koala/source/package-lock.json
+++ b/packages/modules/web_themes/koala/source/package-lock.json
@@ -18,7 +18,6 @@
         "pinia": "^3.0.3",
         "quasar": "^2.18.2",
         "register-service-worker": "^1.7.2",
-        "vite-svg-loader": "^5.1.1",
         "vue": "^3.5.18",
         "vue-chartjs": "^5.3.2",
         "vue-router": "^4.5.1"
@@ -35,6 +34,7 @@
         "prettier": "^3.6.2",
         "typescript": "^5.9.2",
         "vite-plugin-checker": "^0.10.2",
+        "vite-svg-loader": "^5.1.1",
         "vitest": "^3.2.4",
         "vue-tsc": "^3.0.5",
         "workbox-build": "^7.3.0",
@@ -4661,6 +4661,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
@@ -5451,6 +5452,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
       "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0",
@@ -5467,6 +5469,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
       "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.0.30",
@@ -5480,6 +5483,7 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
       "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">= 6"
@@ -5505,6 +5509,7 @@
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
       "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "css-tree": "~2.2.0"
@@ -5518,6 +5523,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
       "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.0.28",
@@ -5532,6 +5538,7 @@
       "version": "2.0.28",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true,
       "license": "CC0-1.0"
     },
     "node_modules/csstype": {
@@ -5782,6 +5789,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
       "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.3.0",
@@ -5796,6 +5804,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
       "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5808,6 +5817,7 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
       "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "domelementtype": "^2.3.0"
@@ -5823,6 +5833,7 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
       "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^2.0.0",
@@ -5975,6 +5986,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -8415,6 +8427,7 @@
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true,
       "license": "CC0-1.0"
     },
     "node_modules/media-typer": {
@@ -8762,6 +8775,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
@@ -11199,6 +11213,7 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
       "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "commander": "^7.2.0",
@@ -11224,6 +11239,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
       "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 10"
@@ -11233,6 +11249,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
       "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=11.0.0"
@@ -12118,6 +12135,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz",
       "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4",
diff --git a/packages/modules/web_themes/koala/source/package.json b/packages/modules/web_themes/koala/source/package.json
index 5b6d548165..782577f379 100644
--- a/packages/modules/web_themes/koala/source/package.json
+++ b/packages/modules/web_themes/koala/source/package.json
@@ -24,7 +24,6 @@
     "pinia": "^3.0.3",
     "quasar": "^2.18.2",
     "register-service-worker": "^1.7.2",
-    "vite-svg-loader": "^5.1.1",
     "vue": "^3.5.18",
     "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.1"
@@ -41,6 +40,7 @@
     "prettier": "^3.6.2",
     "typescript": "^5.9.2",
     "vite-plugin-checker": "^0.10.2",
+    "vite-svg-loader": "^5.1.1",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.0.5",
     "workbox-build": "^7.3.0",

From 5cab557ed43ea3af542965c9227993c05bbbb255 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 15 May 2026 14:23:38 +0200
Subject: [PATCH 21/22] Refactor battery and pv color methods in store

---
 .../source/src/components/BatteryCard.vue     |  2 +-
 .../charts/dailyTotals/DailyTotals.vue        |  8 +--
 .../energyFlowChart/EnergyFlowChart.vue       |  7 +-
 .../charts/historyChart/HistoryChart.vue      | 13 ++--
 .../koala/source/src/stores/mqtt-store.ts     | 67 ++++++++-----------
 5 files changed, 45 insertions(+), 52 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 0d23fe1f09..fe82d5be3b 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -166,7 +166,7 @@ const dailyExportedEnergy = computed(() => {
 });
 
 const batteryUserDefinedColor = computed(() =>
-  mqttStore.batteryUserDefinedColor(props.batteryId)
+  mqttStore.batteryColor(props.batteryId)
 );
 </script>
 
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 4f3e7d7640..bf3f6cb63b 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
@@ -224,7 +224,7 @@ const secondaryCountersConfigured = computed(
 );
 
 const gridID = computed(() => mqttStore.getGridId).value;
-const pvID = computed(() => mqttStore.getPvId).value;
+
 
 const gridData = computed((): DailyTotalsItem => {
   let data: DailyTotalsItem = {
@@ -320,7 +320,7 @@ const individualBatteryData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.batteryDailyImported(id, 'textValue') as string,
           exported: mqttStore.batteryDailyExported(id, 'textValue') as string,
         },
-        color: mqttStore.batteryUserDefinedColor(id),
+        color: mqttStore.batteryColor(id),
       });
     }
   });
@@ -348,7 +348,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       },
     };
     if (mqttStore.batteryIds.length === 1) {
-      item.color = mqttStore.batteryUserDefinedColor(mqttStore.batteryIds[0]);
+      item.color = mqttStore.batteryColor(mqttStore.batteryIds[0]);
     }
     components.push(item);
   }
@@ -362,7 +362,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.getPvComponentColor(pvID),
+      color: mqttStore.pvColor || 'var(--q-diagram-icon)',
     });
   }
 
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 3dae9eb08f..c29cc2689b 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
@@ -264,7 +264,7 @@ const chargePointSumCharging = computed(
 );
 
 const gridID = computed(() => mqttStore.getGridId);
-const pvId = computed(() => mqttStore.getPvId);
+const pvColor = computed(() => mqttStore.pvColor);
 
 ///////////////////// Set animation speed //////////////////////////
 
@@ -377,8 +377,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
       iconComponent: PvIcon,
-      iconColor:
-        mqttStore.getPvComponentColor(pvId.value) || 'var(--q-diagram-icon)',
+      iconColor: pvColor.value || 'var(--q-diagram-icon)',
     });
   }
 
@@ -396,7 +395,7 @@ const svgComponents = computed((): FlowComponent[] => {
       powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
       iconComponent: BatteryIcon,
-      iconColor: 'var(--q-diagram-icon)',
+      iconColor: mqttStore.batteryAggregateColor || 'var(--q-diagram-icon)',
     });
   }
 
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 69412063fd..99d0d2af40 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
@@ -102,7 +102,9 @@ const selectedData = computed((): GraphDataPoint[] => {
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const gridId = computed(() => mqttStore.getGridId);
-const pvId = computed(() => mqttStore.getPvId);
+const pvColor = computed(() => mqttStore.pvColor);
+const batteryColor = computed(() => mqttStore.batteryAggregateColor);
+
 const chargePointNames = computed(() => mqttStore.chargePointName);
 
 const gridMeterName = computed(() => {
@@ -296,7 +298,7 @@ const lineChartData = computed(() => {
   datasets.push(...secondaryCounterDatasets.value);
   if (mqttStore.getPvConfigured) {
     const baseColor =
-      mqttStore.getPvComponentColor(pvId.value) ||
+      pvColor.value ||
       getGlobalColor('--q-pv-stroke');
     datasets.push({
       label: 'PV ges.',
@@ -317,13 +319,16 @@ const lineChartData = computed(() => {
     });
   }
   if (mqttStore.batteryConfigured) {
+    const baseColor =
+      batteryColor.value ||
+      getGlobalColor('--q-battery-stroke');
     datasets.push(
       {
         label: 'Speicher ges.',
         category: 'component',
         unit: 'kW',
-        borderColor: getGlobalColor('--q-battery-stroke'),
-        backgroundColor: getGlobalColor('--q-battery-fill'),
+        borderColor: baseColor,
+        backgroundColor: hexColorToRgba(baseColor, 0.1),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['bat-all-power'],
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 8001e42ca0..8502d59a78 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
@@ -2906,18 +2906,27 @@ export const useMqttStore = defineStore('mqtt', () => {
   };
 
   /**
-   * Get the battery user defined color identified by the battery id
+   * Get the battery color for the battery if one or more batteries are configured
    * @param batteryId battery id
    * @returns string | null
    */
-  const batteryUserDefinedColor = computed(() => {
-    return (batteryId: number): 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
+   */
+  const batteryColor = computed(() => {
+    return (batteryId: number): string => {
       const DEFAULT_COLOR = '#ffc107';
-      if (batteryId === -1) return null;
-      const configurations = getWildcardValues.value(
-        `openWB/system/device/+/component/${batteryId}/config`,
-      ) as Record<string, ComponentConfiguration>;
-      const config = Object.values(configurations)[0];
+      const config = getComponentAttributes.value(batteryId);
       return resolveComponentColor(config?.color, DEFAULT_COLOR);
     };
   });
@@ -3954,37 +3963,17 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get PV id from root of component hierarchy
-   * @returns number | undefined
-   */
-  const getPvId = computed(() => {
-    const hierarchy = getValue.value(
-      'openWB/counter/get/hierarchy',
-    ) as Hierarchy[];
-    if (hierarchy && hierarchy.length > 0) {
-      const firstElement = hierarchy[0];
-      // Filtere alle Kinder mit type === 'inverter'
-      const inverterChild = firstElement.children.find(
-        (child) => child.type === 'inverter',
-      );
-      if (inverterChild) {
-        return inverterChild.id;
-      }
-    }
-    return undefined;
-  });
-
-  /**
-   * Get pv component color
-   * @param componentId component ID
+   * Get pv color (check if multiple inverters are present).
    * @returns string | null
    */
-  const getPvComponentColor = computed(() => {
-    return (componentId: number) => {
+  const pvColor = computed(() => {
+    const ids = getObjectIds.value('inverter');
+    if (ids.length === 1) {
       const DEFAULT_COLOR = '#28a745';
-      const color = getComponentAttributes.value(componentId)?.color;
-    return resolveComponentColor(color, DEFAULT_COLOR);
-    };
+      const color = getComponentAttributes.value(ids[0])?.color;
+      return resolveComponentColor(color, DEFAULT_COLOR);
+    }
+    return null;
   });
 
   /**
@@ -4228,7 +4217,8 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryTotalPower,
     batteryChargePriorityRange,
     batteryMode,
-    batteryUserDefinedColor,
+    batteryAggregateColor,
+    batteryColor,
     // Grid data
     getGridId,
     getAllCounterIds,
@@ -4244,8 +4234,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     homeDailyYield,
     // PV data
     getPvConfigured,
-    getPvId,
-    getPvComponentColor,
+    pvColor,
     getPvPower,
     pvDailyExported,
     // Chart data

From 0522e119151a48b32751603d48a91fc3a104b781 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 15 May 2026 14:34:34 +0200
Subject: [PATCH 22/22] Battery & pv colors use same pattern in store

---
 .../charts/dailyTotals/DailyTotals.vue        |  2 +-
 .../energyFlowChart/EnergyFlowChart.vue       |  2 +-
 .../charts/historyChart/HistoryChart.vue      |  2 +-
 .../koala/source/src/stores/mqtt-store.ts     | 22 ++++++++++++++-----
 4 files changed, 20 insertions(+), 8 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 bf3f6cb63b..79cc39a745 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
@@ -362,7 +362,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.pvColor || 'var(--q-diagram-icon)',
+      color: mqttStore.pvAggregateColor || 'var(--q-diagram-icon)',
     });
   }
 
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 c29cc2689b..bfba1ec609 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
@@ -264,7 +264,7 @@ const chargePointSumCharging = computed(
 );
 
 const gridID = computed(() => mqttStore.getGridId);
-const pvColor = computed(() => mqttStore.pvColor);
+const pvColor = computed(() => mqttStore.pvAggregateColor);
 
 ///////////////////// Set animation speed //////////////////////////
 
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 99d0d2af40..35a1c38ec4 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
@@ -102,7 +102,7 @@ const selectedData = computed((): GraphDataPoint[] => {
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const gridId = computed(() => mqttStore.getGridId);
-const pvColor = computed(() => mqttStore.pvColor);
+const pvColor = computed(() => mqttStore.pvAggregateColor);
 const batteryColor = computed(() => mqttStore.batteryAggregateColor);
 
 const chargePointNames = computed(() => mqttStore.chargePointName);
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 8502d59a78..1a45751afc 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
@@ -2906,7 +2906,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   };
 
   /**
-   * Get the battery color for the battery if one or more batteries are configured
+   * Get the battery color if exactly one battery is configured
    * @param batteryId battery id
    * @returns string | null
    */
@@ -3963,15 +3963,26 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get pv color (check if multiple inverters are present).
+   * 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 = getComponentAttributes.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) {
-      const DEFAULT_COLOR = '#28a745';
-      const color = getComponentAttributes.value(ids[0])?.color;
-      return resolveComponentColor(color, DEFAULT_COLOR);
+      return pvColor.value(ids[0]);
     }
     return null;
   });
@@ -4234,6 +4245,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     homeDailyYield,
     // PV data
     getPvConfigured,
+    pvAggregateColor,
     pvColor,
     getPvPower,
     pvDailyExported,