From 1e3c040878537dda97d82bef47afe4777d493f04 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 27 Nov 2024 12:55:08 +0100
Subject: [PATCH 01/23] Simplify button groups, add 4 more custom themes

---
 .../src/components/BatteryInformation.vue     |   4 +-
 .../src/components/BatteryModeButtons.vue     |   8 +-
 .../source/src/components/BatteryOverview.vue |   4 +-
 .../components/ChargePointInstantSettings.vue |   7 +-
 .../source/src/components/ChargePointLock.vue |   2 +-
 .../src/components/ChargePointModeButtons.vue |  12 +-
 .../src/components/ChargePointPriority.vue    |   2 +-
 .../source/src/components/SliderDouble.vue    |   4 +-
 .../source/src/composables/useThemeManager.ts |   8 +-
 .../source/src/css/quasar.variables.scss      | 340 +++++++++++++++++-
 .../source/src/layouts/MainLayout.vue         |  52 ++-
 .../standard/source/src/pages/TestPage.vue    |   4 +-
 12 files changed, 393 insertions(+), 54 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue b/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue
index 400e6534bb..c824a74974 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue
@@ -2,7 +2,7 @@
   <q-card class="full-height card-width">
     <q-card-section>
       <div class="row text-h6 items-center text-bold">
-        <q-icon name="battery_full" size="xs" class="q-mr-sm" color="warning" />
+        <q-icon name="battery_full" size="xs" class="q-mr-sm" color="primary" />
         {{ batteryName }}
       </div>
       <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
@@ -26,7 +26,7 @@
                             : 'battery_full'
             "
             size="sm"
-            color="warning"
+            color="primary"
             class="rotate90Clockwise q-mr-sm"
           />
           <div>SoC:</div>
diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
index b5efbf43a2..fee3e753cb 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
@@ -1,14 +1,12 @@
 <template>
-  <q-btn-group push rounded class="q-mt-md">
+  <q-btn-group class="q-mt-md">
     <q-btn
       v-for="mode in batModes"
       :key="mode.value"
-      :flat="batMode.value !== mode.value"
-      :outline="batMode.value === mode.value"
-      :glossy="batMode.value === mode.value"
+      :color="batMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
       :icon="mode.icon"
-      :color="mode.color"
+
       size="sm"
       @click="batMode.value = mode.value"
     >
diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue b/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue
index 72606e368e..ee107b5202 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue
@@ -7,7 +7,7 @@
             name="battery_full"
             size="sm"
             class="q-mr-sm"
-            color="warning"
+            color="primary"
           />
           Speicher Übersicht
         </div>
@@ -34,7 +34,7 @@
                             : 'battery_full'
             "
             size="sm"
-            color="warning"
+            color="primary"
             class="rotate90Clockwise q-mr-sm"
           />
           <div>SoC:</div>
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue
index e2f0ef913f..0dd53bdfa2 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue
@@ -10,15 +10,12 @@
   <!-- <SliderQuasar class="q-mt-sm" :readonly="false" /> -->
   <div class="text-subtitle2 q-mr-sm">Begrenzung</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-    <q-btn-group push rounded class="q-mt-md col">
+    <q-btn-group class="q-mt-md col">
       <q-btn
         v-for="mode in limitModes"
         :key="mode.value"
-        :flat="limitMode.value !== mode.value"
-        :outline="limitMode.value === mode.value"
-        :glossy="limitMode.value === mode.value"
+        :color="limitMode.value === mode.value ? 'primary' : 'grey'"
         :label="mode.label"
-        :color="mode.color"
         size="sm"
         class="col"
         @click="limitMode.value = mode.value"
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointLock.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointLock.vue
index cc3566962d..4c303eae2e 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointLock.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointLock.vue
@@ -8,7 +8,7 @@
   <q-toggle
     v-else
     v-model="locked"
-    :color="locked ? 'negative' : 'positive'"
+    :color="locked ? 'primary' : 'positive'"
     checked-icon="lock"
     unchecked-icon="lock_open"
     size="lg"
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
index be442aa890..f8d8841f58 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
@@ -1,16 +1,18 @@
 <template>
-  <q-btn-group push rounded class="q-mt-md">
+  <q-btn-group  class="q-mt-md">
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
-      :flat="chargeMode.value !== mode.value"
-      :outline="chargeMode.value === mode.value"
-      :glossy="chargeMode.value === mode.value"
+
+      :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
+
       :label="mode.label"
-      :color="mode.color"
+
       size="sm"
       @click="chargeMode.value = mode.value"
     />
+
+
   </q-btn-group>
 </template>
 
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointPriority.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointPriority.vue
index 57b4879886..ff2872ed87 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointPriority.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointPriority.vue
@@ -8,7 +8,7 @@
   <q-toggle
     v-else
     v-model="priority"
-    :color="priority ? 'warning' : ''"
+    :color="priority ? 'primary' : ''"
     :checked-icon="icon.on"
     :unchecked-icon="icon.off"
     size="lg"
diff --git a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
index 1c1f74f266..2f8d7e3d52 100644
--- a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
@@ -6,7 +6,7 @@
         :min="0"
         :max="100"
         color="green-7"
-        track-size="1em"
+        track-size="1.5em"
         thumb-size="0px"
         readonly
         no-focus
@@ -21,7 +21,7 @@
         :max="100"
         color="light-green-5"
         inner-track-color="blue-grey-2"
-        track-size="1em"
+        track-size="1.5em"
         :thumb-size="props.readonly ? '0' : '2em'"
         :readonly="props.readonly"
         @touchstart.stop
diff --git a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
index a7f81b5034..b78edbbcbf 100644
--- a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
+++ b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
@@ -11,11 +11,15 @@ export function useThemeManager() {
     document.body.classList.remove(
       'q-theme--light',
       'q-theme--dark',
-      'q-theme--custom',
+      'q-theme--custom1',
+      'q-theme--custom2',
+      'q-theme--custom3',
+      'q-theme--custom4',
+      'q-theme--custom5',
     );
     document.body.classList.add(`q-theme--${theme}`);
 
-    if (theme === 'dark') {
+    if (theme === 'dark' || theme === 'custom5') {
       $q.dark.set(true);
     } else {
       $q.dark.set(false);
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index fbb37ba7fd..df34d7ef9a 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -26,25 +26,105 @@ $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
 
-//////////////////////////// Custom Theme ////////////////////////////
+
+/////////////////////////////////////////////////////////////////////
 
 // Define variables for your custom theme
-$custom1-background-grey: #f3f3f7;
+// $custom1-background-grey: #f3f3f7;
+// $custom1-background-grey-2: #eeeef3;
+// $custom1-primary: #5c93d1;
+// $custom1-secondary: #d2d2d7;
+
+// $custom1-positive: #66bd7a;
+// $custom1-negative: #db4f5f;
+// $custom1-info: #7dc5d4;
+// $custom1-warning: #f7b267;
+
+// $custom1-accent: #b691bd;
+
+// $custom1-brown-text: #524f57;
+// $custom1-white: #ffffff;
+
+
+// Default Quasar variables remain unchanged at the top
+
+$primary: #1976d2;
+$secondary: #26a69a;
+$accent: #9c27b0;
+$dark: #1d1d1d;
+$dark-page: #121212;
+$positive: #21ba45;
+$negative: #c10015;
+$info: #31ccec;
+$warning: #f2c037;
+
+// Custom Theme 1 (existing)
+$custom1-background-grey: #eeeef3;
 $custom1-background-grey-2: #eeeef3;
 $custom1-primary: #5c93d1;
 $custom1-secondary: #d2d2d7;
-
 $custom1-positive: #66bd7a;
 $custom1-negative: #db4f5f;
 $custom1-info: #7dc5d4;
 $custom1-warning: #f7b267;
-
 $custom1-accent: #b691bd;
-
 $custom1-brown-text: #524f57;
 $custom1-white: #ffffff;
 
+// Custom Theme 2 (Slate Grey)
+$custom2-background-grey: #f7f8f9;
+$custom2-background-grey-2: #ebeef1;
+$custom2-primary: #445975;
+$custom2-secondary: #d5dae0;
+$custom2-positive: #427a5b;
+$custom2-negative: #a94955;
+$custom2-info: #4a7a98;
+$custom2-warning: #b87d43;
+$custom2-accent: #6e788c;
+$custom2-brown-text: #2b3541;
+$custom2-white: #ffffff;
+
+// Custom Theme 3 (Steel Blue)
+$custom3-background-grey: #f8f9fb;
+$custom3-background-grey-2: #edf0f5;
+$custom3-primary: #4878b7;
+$custom3-secondary: #d8dde6;
+$custom3-positive: #50a567;
+$custom3-negative: #d1495b;
+$custom3-info: #3d8cb5;
+$custom3-warning: #e89d4b;
+$custom3-accent: #8c7daf;
+$custom3-brown-text: #2d3748;
+$custom3-white: #ffffff;
+
+// Custom Theme 4 (Modern Grey)
+$custom4-background-grey: #f5f6f8;
+$custom4-background-grey-2: #e8eaef;
+$custom4-primary: #556785;
+$custom4-secondary: #cfd5de;
+$custom4-positive: #3e8f5e;
+$custom4-negative: #c54d57;
+$custom4-info: #4b89aa;
+$custom4-warning: #d98e44;
+$custom4-accent: #7a7a9c;
+$custom4-brown-text: #2c3645;
+$custom4-white: #ffffff;
+
+// Custom Theme 5 (Modern Grey)
+$custom5-background-grey: #010322;
+$custom5-background-grey-2: #010322;
+$custom5-primary: #3874db;
+$custom5-secondary: #28293D;
+$custom5-positive: #3e8f5e;
+$custom5-negative: #c54d57;
+$custom5-info: #4b89aa;
+$custom5-warning: #d98e44;
+$custom5-accent: #7a7a9c;
+$custom5-brown-text: #2c3645;
+$custom5-white: #ffffff;
+
 :root {
+  // Custom Theme 1
   --custom1-background-grey: #{$custom1-background-grey};
   --custom1-background-grey-2: #{$custom1-background-grey-2};
   --custom1-primary: #{$custom1-primary};
@@ -56,11 +136,62 @@ $custom1-white: #ffffff;
   --custom1-accent: #{$custom1-accent};
   --custom1-brown-text: #{$custom1-brown-text};
   --custom1-white: #{$custom1-white};
-}
 
-// Custom Theme
+  // Custom Theme 2
+  --custom2-background-grey: #{$custom2-background-grey};
+  --custom2-background-grey-2: #{$custom2-background-grey-2};
+  --custom2-primary: #{$custom2-primary};
+  --custom2-secondary: #{$custom2-secondary};
+  --custom2-positive: #{$custom2-positive};
+  --custom2-negative: #{$custom2-negative};
+  --custom2-info: #{$custom2-info};
+  --custom2-warning: #{$custom2-warning};
+  --custom2-accent: #{$custom2-accent};
+  --custom2-brown-text: #{$custom2-brown-text};
+  --custom2-white: #{$custom2-white};
+
+  // Custom Theme 3
+  --custom3-background-grey: #{$custom3-background-grey};
+  --custom3-background-grey-2: #{$custom3-background-grey-2};
+  --custom3-primary: #{$custom3-primary};
+  --custom3-secondary: #{$custom3-secondary};
+  --custom3-positive: #{$custom3-positive};
+  --custom3-negative: #{$custom3-negative};
+  --custom3-info: #{$custom3-info};
+  --custom3-warning: #{$custom3-warning};
+  --custom3-accent: #{$custom3-accent};
+  --custom3-brown-text: #{$custom3-brown-text};
+  --custom3-white: #{$custom3-white};
 
-.q-theme--custom {
+  // Custom Theme 4
+  --custom4-background-grey: #{$custom4-background-grey};
+  --custom4-background-grey-2: #{$custom4-background-grey-2};
+  --custom4-primary: #{$custom4-primary};
+  --custom4-secondary: #{$custom4-secondary};
+  --custom4-positive: #{$custom4-positive};
+  --custom4-negative: #{$custom4-negative};
+  --custom4-info: #{$custom4-info};
+  --custom4-warning: #{$custom4-warning};
+  --custom4-accent: #{$custom4-accent};
+  --custom4-brown-text: #{$custom4-brown-text};
+  --custom4-white: #{$custom4-white};
+
+  // Custom Theme 5
+  --custom5-background-grey: #{$custom5-background-grey};
+  --custom5-background-grey-2: #{$custom5-background-grey-2};
+  --custom5-primary: #{$custom5-primary};
+  --custom5-secondary: #{$custom5-secondary};
+  --custom5-positive: #{$custom5-positive};
+  --custom5-negative: #{$custom5-negative};
+  --custom5-info: #{$custom5-info};
+  --custom5-warning: #{$custom5-warning};
+  --custom5-accent: #{$custom5-accent};
+  --custom5-brown-text: #{$custom5-brown-text};
+  --custom5-white: #{$custom5-white};
+}
+
+// Theme Classes
+.q-theme--custom1 {
   --q-primary: var(--custom1-primary);
   --q-secondary: var(--custom1-secondary);
   --q-accent: var(--custom1-accent);
@@ -70,14 +201,13 @@ $custom1-white: #ffffff;
   --q-warning: var(--custom1-warning);
   --q-white: var(--custom1-white);
   background-color: var(--custom1-background-grey);
+  color: var(--custom1-brown-text);
 
   .q-header {
     background-color: var(--custom1-background-grey-2);
     color: var(--custom1-brown-text);
   }
 
-  color: var(--custom1-brown-text); // text color
-
   .q-tab-panels {
     background-color: var(--custom1-background-grey-2);
   }
@@ -90,10 +220,13 @@ $custom1-white: #ffffff;
   .q-tab--active {
     background-color: darken($custom1-secondary, 2%);
   }
+  // .q-tab-panels {
+  //   border-left: 1px solid var(--custom1-secondary);
+  //   border-right: 1px solid var(--custom1-secondary);
+  // }
   .q-carousel__slide {
     background-color: var(--custom1-background-grey-2);
   }
-
   .q-card {
     background-color: var(--custom1-secondary);
   }
@@ -106,4 +239,189 @@ $custom1-white: #ffffff;
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
+
+}
+
+.q-theme--custom2 {
+  --q-primary: var(--custom2-primary);
+  --q-secondary: var(--custom2-secondary);
+  --q-accent: var(--custom2-accent);
+  --q-positive: var(--custom2-positive);
+  --q-negative: var(--custom2-negative);
+  --q-info: var(--custom2-info);
+  --q-warning: var(--custom2-warning);
+  --q-white: var(--custom2-white);
+  background-color: var(--custom2-background-grey);
+  color: var(--custom2-brown-text);
+
+  .q-header {
+    background-color: var(--custom2-background-grey-2);
+    color: var(--custom2-brown-text);
+  }
+
+  .q-tab-panels {
+    background-color: var(--custom2-background-grey-2);
+  }
+  .q-tab {
+    background-color: var(--custom2-background-grey-2);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border: 1px solid var(--custom2-secondary);
+  }
+  .q-tab--active {
+    background-color: darken($custom2-secondary, 2%);
+  }
+  .q-carousel__slide {
+    background-color: var(--custom2-background-grey-2);
+  }
+  .q-card {
+    background-color: var(--custom2-secondary);
+  }
+  .q-list {
+    background-color: var(--custom2-background-grey-2);
+  }
+  .q-toggle__thumb:after {
+    background: #e0e0e0;
+  }
+  .q-toggle__inner--truthy .q-toggle__thumb:after {
+    background-color: currentColor;
+  }
+}
+
+.q-theme--custom3 {
+  --q-primary: var(--custom3-primary);
+  --q-secondary: var(--custom3-secondary);
+  --q-accent: var(--custom3-accent);
+  --q-positive: var(--custom3-positive);
+  --q-negative: var(--custom3-negative);
+  --q-info: var(--custom3-info);
+  --q-warning: var(--custom3-warning);
+  --q-white: var(--custom3-white);
+  background-color: var(--custom3-background-grey);
+  color: var(--custom3-brown-text);
+
+  .q-header {
+    background-color: var(--custom3-background-grey-2);
+    color: var(--custom3-brown-text);
+  }
+
+  .q-tab-panels {
+    background-color: var(--custom3-background-grey-2);
+  }
+  .q-tab {
+    background-color: var(--custom3-background-grey-2);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border: 1px solid var(--custom3-secondary);
+  }
+  .q-tab--active {
+    background-color: darken($custom3-secondary, 2%);
+  }
+  .q-carousel__slide {
+    background-color: var(--custom3-background-grey-2);
+  }
+  .q-card {
+    background-color: var(--custom3-secondary);
+  }
+  .q-list {
+    background-color: var(--custom3-background-grey-2);
+  }
+  .q-toggle__thumb:after {
+    background: #e0e0e0;
+  }
+  .q-toggle__inner--truthy .q-toggle__thumb:after {
+    background-color: currentColor;
+  }
+}
+
+.q-theme--custom4 {
+  --q-primary: var(--custom4-primary);
+  --q-secondary: var(--custom4-secondary);
+  --q-accent: var(--custom4-accent);
+  --q-positive: var(--custom4-positive);
+  --q-negative: var(--custom4-negative);
+  --q-info: var(--custom4-info);
+  --q-warning: var(--custom4-warning);
+  --q-white: var(--custom4-white);
+  background-color: var(--custom4-background-grey);
+  color: var(--custom4-brown-text);
+
+  .q-header {
+    background-color: var(--custom4-background-grey-2);
+    color: var(--custom4-brown-text);
+  }
+
+  .q-tab-panels {
+    background-color: var(--custom4-background-grey-2);
+  }
+  .q-tab {
+    background-color: var(--custom4-background-grey-2);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border: 1px solid var(--custom4-secondary);
+  }
+  .q-tab--active {
+    background-color: darken($custom4-secondary, 2%);
+  }
+  .q-carousel__slide {
+    background-color: var(--custom4-background-grey-2);
+  }
+  .q-card {
+    background-color: var(--custom4-secondary);
+  }
+  .q-list {
+    background-color: var(--custom4-background-grey-2);
+  }
+  .q-toggle__thumb:after {
+    background: #e0e0e0;
+  }
+  .q-toggle__inner--truthy .q-toggle__thumb:after {
+    background-color: currentColor;
+  }
+}
+
+.q-theme--custom5 {
+  --q-primary: var(--custom5-primary);
+  --q-secondary: var(--custom5-secondary);
+  --q-accent: var(--custom5-accent);
+  --q-positive: var(--custom5-positive);
+  --q-negative: var(--custom5-negative);
+  --q-info: var(--custom5-info);
+  --q-warning: var(--custom5-warning);
+  --q-white: var(--custom5-white);
+  background-color: var(--custom5-background-grey);
+  color: var(--custom5-brown-text);
+
+  .q-header {
+    background-color: var(--custom5-background-grey-2);
+    color: var(--custom5-brown-text);
+  }
+
+  .q-tab-panels {
+    background-color: var(--custom5-background-grey-2);
+  }
+  .q-tab {
+    background-color: var(--custom5-background-grey-2);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border: 1px solid var(--custom5-secondary);
+  }
+  .q-tab--active {
+    background-color: darken($custom5-secondary, 10%);
+  }
+  .q-carousel__slide {
+    background-color: var(--custom5-background-grey-2);
+  }
+  .q-card {
+    background-color: var(--custom5-secondary);
+  }
+  .q-list {
+    background-color: var(--custom5-background-grey-2);
+  }
+  .q-toggle__thumb:after {
+    background: #e0e0e0;
+  }
+  .q-toggle__inner--truthy .q-toggle__thumb:after {
+    background-color: currentColor;
+  }
 }
diff --git a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
index 85fd7642a0..00ad143b5c 100644
--- a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
@@ -2,26 +2,46 @@
   <q-layout view="lHh Lpr lFf" class="centered-container">
     <q-header elevated class="centered-container">
       <q-toolbar>
-        <q-btn flat round icon="menu" aria-label="Menu" />
         <q-toolbar-title>openWB</q-toolbar-title>
-        <q-btn-dropdown label="Display" dense unelevated no-caps>
-          <q-list>
-            <q-item
-              v-for="theme in ['light', 'dark', 'custom']"
-              :key="theme"
-              clickable
-              @click="setTheme(theme)"
-              :active="currentTheme === theme"
-              dense
-            >
-              <q-item-section>{{ theme }}</q-item-section>
-            </q-item>
-          </q-list>
-        </q-btn-dropdown>
+        <q-btn
+          dense
+          flat
+          round
+          icon="menu"
+        >
+          <q-menu>
+            <q-list dense>
+              <q-item clickable v-close-popup>
+                <q-item-section>Konfiguration</q-item-section>
+              </q-item>
+
+              <q-item clickable>
+                <q-item-section>Darstellung</q-item-section>
+                <q-menu anchor="top end" self="top start">
+                  <q-list dense>
+                    <q-item
+                      v-for="theme in ['light', 'dark', 'custom1', 'custom2', 'custom3', 'custom4', 'custom5']"
+                      :key="theme"
+                      clickable
+                      @click="setTheme(theme)"
+                      :active="currentTheme === theme"
+                      dense
+                    >
+                      <q-item-section>{{ theme }}</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-item>
+
+              <q-item clickable v-close-popup>
+                <q-item-section>Hilfe</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
       </q-toolbar>
     </q-header>
 
-    <!-- Page container that takes the remaining height -->
     <q-page-container class="column flex">
       <router-view />
     </q-page-container>
diff --git a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
index 43acb8b20b..0bddf4cee5 100644
--- a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
@@ -11,10 +11,10 @@
         <q-icon name="ev_station" size="md" color="primary" />
       </q-tab>
       <q-tab name="batteries" title="Speicher">
-        <q-icon name="battery_full" size="md" color="warning" />
+        <q-icon name="battery_full" size="md" color="primary" />
       </q-tab>
       <q-tab name="smartHome" title="SmartHome">
-        <q-icon name="home" size="md" color="accent" />
+        <q-icon name="home" size="md" color="primary" />
       </q-tab>
     </q-tabs>
     <!-- Tab Panels -->

From 177b507b499aaf12f2eb602a4d8f5c85523deb45 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 27 Nov 2024 18:00:05 +0100
Subject: [PATCH 02/23] Refine colors / css for custom themes

---
 .../source/src/components/BaseCarousel.vue    |   2 +-
 .../source/src/composables/useThemeManager.ts |   2 +-
 .../source/src/css/quasar.variables.scss      | 111 +++++++++++++++++-
 .../standard/source/src/pages/TestPage.vue    |   4 +-
 4 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
index 669c4e707e..03adfc77b3 100644
--- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
@@ -3,7 +3,7 @@
     v-model="currentSlide"
     swipeable
     :animated="animated"
-    control-color="primary"
+     control-color="primary"
     infinite
     padding
     :navigation="groupedItems.length > 1"
diff --git a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
index b78edbbcbf..9ecdf8d974 100644
--- a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
+++ b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
@@ -19,7 +19,7 @@ export function useThemeManager() {
     );
     document.body.classList.add(`q-theme--${theme}`);
 
-    if (theme === 'dark' || theme === 'custom5') {
+    if (theme === 'dark' ) {
       $q.dark.set(true);
     } else {
       $q.dark.set(false);
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index df34d7ef9a..f152838429 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -58,6 +58,8 @@ $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
 
+
+
 // Custom Theme 1 (existing)
 $custom1-background-grey: #eeeef3;
 $custom1-background-grey-2: #eeeef3;
@@ -70,6 +72,9 @@ $custom1-warning: #f7b267;
 $custom1-accent: #b691bd;
 $custom1-brown-text: #524f57;
 $custom1-white: #ffffff;
+$custom1-tab-icon: #5c93d1;
+$custom1-carousel-control: #5c93d1;
+
 
 // Custom Theme 2 (Slate Grey)
 $custom2-background-grey: #f7f8f9;
@@ -83,6 +88,8 @@ $custom2-warning: #b87d43;
 $custom2-accent: #6e788c;
 $custom2-brown-text: #2b3541;
 $custom2-white: #ffffff;
+$custom2-tab-icon: #445975;
+$custom2-carousel-control: #445975;
 
 // Custom Theme 3 (Steel Blue)
 $custom3-background-grey: #f8f9fb;
@@ -96,6 +103,8 @@ $custom3-warning: #e89d4b;
 $custom3-accent: #8c7daf;
 $custom3-brown-text: #2d3748;
 $custom3-white: #ffffff;
+$custom3-tab-icon: #4878b7;
+$custom3-carousel-control: #4878b7;
 
 // Custom Theme 4 (Modern Grey)
 $custom4-background-grey: #f5f6f8;
@@ -109,6 +118,8 @@ $custom4-warning: #d98e44;
 $custom4-accent: #7a7a9c;
 $custom4-brown-text: #2c3645;
 $custom4-white: #ffffff;
+$custom4-tab-icon: #556785;
+$custom4-carousel-control: #556785;
 
 // Custom Theme 5 (Modern Grey)
 $custom5-background-grey: #010322;
@@ -122,6 +133,8 @@ $custom5-warning: #d98e44;
 $custom5-accent: #7a7a9c;
 $custom5-brown-text: #2c3645;
 $custom5-white: #ffffff;
+$custom5-tab-icon: #ffffff;
+$custom5-carousel-control: #FFFFFF;
 
 :root {
   // Custom Theme 1
@@ -136,6 +149,8 @@ $custom5-white: #ffffff;
   --custom1-accent: #{$custom1-accent};
   --custom1-brown-text: #{$custom1-brown-text};
   --custom1-white: #{$custom1-white};
+  --custom1-tab-icon: #{$custom1-tab-icon};
+  --custom1-carousel-control: #{$custom1-carousel-control};
 
   // Custom Theme 2
   --custom2-background-grey: #{$custom2-background-grey};
@@ -149,6 +164,8 @@ $custom5-white: #ffffff;
   --custom2-accent: #{$custom2-accent};
   --custom2-brown-text: #{$custom2-brown-text};
   --custom2-white: #{$custom2-white};
+  --custom2-tab-icon: #{$custom2-tab-icon};
+  --custom2-carousel-control: #{$custom2-carousel-control};
 
   // Custom Theme 3
   --custom3-background-grey: #{$custom3-background-grey};
@@ -162,6 +179,8 @@ $custom5-white: #ffffff;
   --custom3-accent: #{$custom3-accent};
   --custom3-brown-text: #{$custom3-brown-text};
   --custom3-white: #{$custom3-white};
+  --custom3-tab-icon: #{$custom3-tab-icon};
+  --custom3-carousel-control: #{$custom3-carousel-control};
 
   // Custom Theme 4
   --custom4-background-grey: #{$custom4-background-grey};
@@ -175,6 +194,8 @@ $custom5-white: #ffffff;
   --custom4-accent: #{$custom4-accent};
   --custom4-brown-text: #{$custom4-brown-text};
   --custom4-white: #{$custom4-white};
+  --custom4-tab-icon: #{$custom4-tab-icon};
+  --custom4-carousel-control: #{$custom4-carousel-control};
 
   // Custom Theme 5
   --custom5-background-grey: #{$custom5-background-grey};
@@ -188,6 +209,8 @@ $custom5-white: #ffffff;
   --custom5-accent: #{$custom5-accent};
   --custom5-brown-text: #{$custom5-brown-text};
   --custom5-white: #{$custom5-white};
+  --custom5-tab-icon: #{$custom5-tab-icon};
+  --custom5-carousel-control: #{$custom5-carousel-control};
 }
 
 // Theme Classes
@@ -200,6 +223,8 @@ $custom5-white: #ffffff;
   --q-info: var(--custom1-info);
   --q-warning: var(--custom1-warning);
   --q-white: var(--custom1-white);
+  --q-tab-icon: var(--custom1-tab-icon);
+  --q-color-carousel-control: var(--custom1-carousel-control);
   background-color: var(--custom1-background-grey);
   color: var(--custom1-brown-text);
 
@@ -211,12 +236,16 @@ $custom5-white: #ffffff;
   .q-tab-panels {
     background-color: var(--custom1-background-grey-2);
   }
+
   .q-tab {
     background-color: var(--custom1-background-grey-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom1-secondary);
   }
+  .q-tab-icon{
+    color: var(--custom1-tab-icon);
+  }
   .q-tab--active {
     background-color: darken($custom1-secondary, 2%);
   }
@@ -224,6 +253,15 @@ $custom5-white: #ffffff;
   //   border-left: 1px solid var(--custom1-secondary);
   //   border-right: 1px solid var(--custom1-secondary);
   // }
+  .q-carousel {
+    &__navigation-icon,
+    &__arrow {
+      .q-btn,
+      .q-icon {
+        color: var(--custom1-carousel-control);
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom1-background-grey-2);
   }
@@ -251,6 +289,8 @@ $custom5-white: #ffffff;
   --q-info: var(--custom2-info);
   --q-warning: var(--custom2-warning);
   --q-white: var(--custom2-white);
+  --q-tab-icon: var(--custom2-tab-icon);
+  --q-carousel-control: var(--custom2-carousel-control);
   background-color: var(--custom2-background-grey);
   color: var(--custom2-brown-text);
 
@@ -271,6 +311,15 @@ $custom5-white: #ffffff;
   .q-tab--active {
     background-color: darken($custom2-secondary, 2%);
   }
+  .q-carousel {
+    &__navigation-icon,
+    &__arrow {
+      .q-btn,
+      .q-icon {
+        color: var(--custom2-carousel-control);
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom2-background-grey-2);
   }
@@ -297,6 +346,8 @@ $custom5-white: #ffffff;
   --q-info: var(--custom3-info);
   --q-warning: var(--custom3-warning);
   --q-white: var(--custom3-white);
+  --q-tab-icon: var(--custom3-tab-icon);
+  --q-carousel-control: var(--custom3-carousel-control);
   background-color: var(--custom3-background-grey);
   color: var(--custom3-brown-text);
 
@@ -317,6 +368,15 @@ $custom5-white: #ffffff;
   .q-tab--active {
     background-color: darken($custom3-secondary, 2%);
   }
+  .q-carousel {
+    &__navigation-icon,
+    &__arrow {
+      .q-btn,
+      .q-icon {
+        color: var(--custom3-carousel-control);
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom3-background-grey-2);
   }
@@ -343,6 +403,8 @@ $custom5-white: #ffffff;
   --q-info: var(--custom4-info);
   --q-warning: var(--custom4-warning);
   --q-white: var(--custom4-white);
+  --q-tab-icon: var(--custom4-tab-icon);
+  --q-carousel-control: var(--custom4-carousel-control);
   background-color: var(--custom4-background-grey);
   color: var(--custom4-brown-text);
 
@@ -363,6 +425,15 @@ $custom5-white: #ffffff;
   .q-tab--active {
     background-color: darken($custom4-secondary, 2%);
   }
+  .q-carousel {
+    &__navigation-icon,
+    &__arrow {
+      .q-btn,
+      .q-icon {
+        color: var(--custom4-carousel-control);
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom4-background-grey-2);
   }
@@ -389,12 +460,21 @@ $custom5-white: #ffffff;
   --q-info: var(--custom5-info);
   --q-warning: var(--custom5-warning);
   --q-white: var(--custom5-white);
+  --q-tab-icon: var(--custom5-tab-icon);
+  --q-carousel-control: var(--custom5-carousel-control);
   background-color: var(--custom5-background-grey);
   color: var(--custom5-brown-text);
 
   .q-header {
     background-color: var(--custom5-background-grey-2);
-    color: var(--custom5-brown-text);
+
+  }
+  html body.q-theme--custom5 {
+    color: var(--custom5-white);
+  }
+
+  .q-theme--custom5 .q-layout {
+    background-color: var(--custom5-white);
   }
 
   .q-tab-panels {
@@ -409,11 +489,39 @@ $custom5-white: #ffffff;
   .q-tab--active {
     background-color: darken($custom5-secondary, 10%);
   }
+  .q-carousel {
+    &__navigation-icon,
+    &__arrow {
+      .q-btn,
+      .q-icon {
+        color: var(--custom5-carousel-control);
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom5-background-grey-2);
+    color: var(--custom5-white) ;
   }
   .q-card {
     background-color: var(--custom5-secondary);
+    color: var(--custom5-white) ;
+  }
+
+  .q-expansion-item__toggle-icon {
+    color: var(--custom5-white);
+  }
+  .q-field__label {
+    color: var(--custom5-white);
+  }
+  input {
+    color: var(--custom5-white);
+  }
+
+  .q-placeholder {
+    color: var(--custom5-white);
+  }
+  .q-material-icons {
+    color: var(--custom5-white);
   }
   .q-list {
     background-color: var(--custom5-background-grey-2);
@@ -425,3 +533,4 @@ $custom5-white: #ffffff;
     background-color: currentColor;
   }
 }
+
diff --git a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
index 0bddf4cee5..07da44a004 100644
--- a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
@@ -8,13 +8,13 @@
     <!-- Navigation Tabs -->
     <q-tabs v-model="tab" dense class="q-tabs__content--align-justify">
       <q-tab name="charge-points" title="Ladepunkte">
-        <q-icon name="ev_station" size="md" color="primary" />
+        <q-icon name="ev_station" size="md" color="primary"/>
       </q-tab>
       <q-tab name="batteries" title="Speicher">
         <q-icon name="battery_full" size="md" color="primary" />
       </q-tab>
       <q-tab name="smartHome" title="SmartHome">
-        <q-icon name="home" size="md" color="primary" />
+        <q-icon name="home" size="md" color="primary"/>
       </q-tab>
     </q-tabs>
     <!-- Tab Panels -->

From e3eec3e6e3d539e219eaef881c58e07765eaa632 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 27 Nov 2024 18:26:18 +0100
Subject: [PATCH 03/23] Formatting fixes

---
 .../source/src/components/BaseCarousel.vue    |  2 +-
 .../src/components/BatteryModeButtons.vue     |  1 -
 .../src/components/ChargePointModeButtons.vue |  7 +--
 .../source/src/composables/useThemeManager.ts |  2 +-
 .../source/src/css/quasar.variables.scss      | 56 ++++---------------
 .../source/src/layouts/MainLayout.vue         | 17 +++---
 .../standard/source/src/pages/TestPage.vue    |  4 +-
 7 files changed, 25 insertions(+), 64 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
index 03adfc77b3..669c4e707e 100644
--- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
@@ -3,7 +3,7 @@
     v-model="currentSlide"
     swipeable
     :animated="animated"
-     control-color="primary"
+    control-color="primary"
     infinite
     padding
     :navigation="groupedItems.length > 1"
diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
index fee3e753cb..fe4ae812e2 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
@@ -6,7 +6,6 @@
       :color="batMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
       :icon="mode.icon"
-
       size="sm"
       @click="batMode.value = mode.value"
     >
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
index f8d8841f58..34f6aa5094 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
@@ -1,18 +1,13 @@
 <template>
-  <q-btn-group  class="q-mt-md">
+  <q-btn-group class="q-mt-md">
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
-
       :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
-
       :label="mode.label"
-
       size="sm"
       @click="chargeMode.value = mode.value"
     />
-
-
   </q-btn-group>
 </template>
 
diff --git a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
index 9ecdf8d974..334f3db20d 100644
--- a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
+++ b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
@@ -19,7 +19,7 @@ export function useThemeManager() {
     );
     document.body.classList.add(`q-theme--${theme}`);
 
-    if (theme === 'dark' ) {
+    if (theme === 'dark') {
       $q.dark.set(true);
     } else {
       $q.dark.set(false);
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index f152838429..9dbfd4da25 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -26,41 +26,9 @@ $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
 
-
 /////////////////////////////////////////////////////////////////////
 
-// Define variables for your custom theme
-// $custom1-background-grey: #f3f3f7;
-// $custom1-background-grey-2: #eeeef3;
-// $custom1-primary: #5c93d1;
-// $custom1-secondary: #d2d2d7;
-
-// $custom1-positive: #66bd7a;
-// $custom1-negative: #db4f5f;
-// $custom1-info: #7dc5d4;
-// $custom1-warning: #f7b267;
-
-// $custom1-accent: #b691bd;
-
-// $custom1-brown-text: #524f57;
-// $custom1-white: #ffffff;
-
-
-// Default Quasar variables remain unchanged at the top
-
-$primary: #1976d2;
-$secondary: #26a69a;
-$accent: #9c27b0;
-$dark: #1d1d1d;
-$dark-page: #121212;
-$positive: #21ba45;
-$negative: #c10015;
-$info: #31ccec;
-$warning: #f2c037;
-
-
-
-// Custom Theme 1 (existing)
+// Custom Theme 1 (light)
 $custom1-background-grey: #eeeef3;
 $custom1-background-grey-2: #eeeef3;
 $custom1-primary: #5c93d1;
@@ -75,8 +43,7 @@ $custom1-white: #ffffff;
 $custom1-tab-icon: #5c93d1;
 $custom1-carousel-control: #5c93d1;
 
-
-// Custom Theme 2 (Slate Grey)
+// Custom Theme 2
 $custom2-background-grey: #f7f8f9;
 $custom2-background-grey-2: #ebeef1;
 $custom2-primary: #445975;
@@ -91,7 +58,7 @@ $custom2-white: #ffffff;
 $custom2-tab-icon: #445975;
 $custom2-carousel-control: #445975;
 
-// Custom Theme 3 (Steel Blue)
+// Custom Theme 3
 $custom3-background-grey: #f8f9fb;
 $custom3-background-grey-2: #edf0f5;
 $custom3-primary: #4878b7;
@@ -106,7 +73,7 @@ $custom3-white: #ffffff;
 $custom3-tab-icon: #4878b7;
 $custom3-carousel-control: #4878b7;
 
-// Custom Theme 4 (Modern Grey)
+// Custom Theme 4
 $custom4-background-grey: #f5f6f8;
 $custom4-background-grey-2: #e8eaef;
 $custom4-primary: #556785;
@@ -121,11 +88,11 @@ $custom4-white: #ffffff;
 $custom4-tab-icon: #556785;
 $custom4-carousel-control: #556785;
 
-// Custom Theme 5 (Modern Grey)
+// Custom Theme 5 (dark)
 $custom5-background-grey: #010322;
 $custom5-background-grey-2: #010322;
 $custom5-primary: #3874db;
-$custom5-secondary: #28293D;
+$custom5-secondary: #28293d;
 $custom5-positive: #3e8f5e;
 $custom5-negative: #c54d57;
 $custom5-info: #4b89aa;
@@ -134,7 +101,7 @@ $custom5-accent: #7a7a9c;
 $custom5-brown-text: #2c3645;
 $custom5-white: #ffffff;
 $custom5-tab-icon: #ffffff;
-$custom5-carousel-control: #FFFFFF;
+$custom5-carousel-control: #8b8f9f;
 
 :root {
   // Custom Theme 1
@@ -243,7 +210,7 @@ $custom5-carousel-control: #FFFFFF;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom1-secondary);
   }
-  .q-tab-icon{
+  .q-tab-icon {
     color: var(--custom1-tab-icon);
   }
   .q-tab--active {
@@ -277,7 +244,6 @@ $custom5-carousel-control: #FFFFFF;
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
-
 }
 
 .q-theme--custom2 {
@@ -467,7 +433,6 @@ $custom5-carousel-control: #FFFFFF;
 
   .q-header {
     background-color: var(--custom5-background-grey-2);
-
   }
   html body.q-theme--custom5 {
     color: var(--custom5-white);
@@ -500,11 +465,11 @@ $custom5-carousel-control: #FFFFFF;
   }
   .q-carousel__slide {
     background-color: var(--custom5-background-grey-2);
-    color: var(--custom5-white) ;
+    color: var(--custom5-white);
   }
   .q-card {
     background-color: var(--custom5-secondary);
-    color: var(--custom5-white) ;
+    color: var(--custom5-white);
   }
 
   .q-expansion-item__toggle-icon {
@@ -533,4 +498,3 @@ $custom5-carousel-control: #FFFFFF;
     background-color: currentColor;
   }
 }
-
diff --git a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
index 00ad143b5c..3f44f563a1 100644
--- a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
@@ -3,12 +3,7 @@
     <q-header elevated class="centered-container">
       <q-toolbar>
         <q-toolbar-title>openWB</q-toolbar-title>
-        <q-btn
-          dense
-          flat
-          round
-          icon="menu"
-        >
+        <q-btn dense flat round icon="menu">
           <q-menu>
             <q-list dense>
               <q-item clickable v-close-popup>
@@ -20,7 +15,15 @@
                 <q-menu anchor="top end" self="top start">
                   <q-list dense>
                     <q-item
-                      v-for="theme in ['light', 'dark', 'custom1', 'custom2', 'custom3', 'custom4', 'custom5']"
+                      v-for="theme in [
+                        'light',
+                        'dark',
+                        'custom1',
+                        'custom2',
+                        'custom3',
+                        'custom4',
+                        'custom5',
+                      ]"
                       :key="theme"
                       clickable
                       @click="setTheme(theme)"
diff --git a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
index 07da44a004..0bddf4cee5 100644
--- a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
@@ -8,13 +8,13 @@
     <!-- Navigation Tabs -->
     <q-tabs v-model="tab" dense class="q-tabs__content--align-justify">
       <q-tab name="charge-points" title="Ladepunkte">
-        <q-icon name="ev_station" size="md" color="primary"/>
+        <q-icon name="ev_station" size="md" color="primary" />
       </q-tab>
       <q-tab name="batteries" title="Speicher">
         <q-icon name="battery_full" size="md" color="primary" />
       </q-tab>
       <q-tab name="smartHome" title="SmartHome">
-        <q-icon name="home" size="md" color="primary"/>
+        <q-icon name="home" size="md" color="primary" />
       </q-tab>
     </q-tabs>
     <!-- Tab Panels -->

From a4ad625b71216d67c4cd08837ee962d88810e425 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 28 Nov 2024 12:51:06 +0100
Subject: [PATCH 04/23] Prevent settings menu jutting out (right side of
 centered page by width > 1000px)

---
 .../standard/source/src/layouts/MainLayout.vue         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
index 3f44f563a1..da33efa968 100644
--- a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
@@ -4,7 +4,7 @@
       <q-toolbar>
         <q-toolbar-title>openWB</q-toolbar-title>
         <q-btn dense flat round icon="menu">
-          <q-menu>
+          <q-menu anchor="bottom right" self="top right">
             <q-list dense>
               <q-item clickable v-close-popup>
                 <q-item-section>Konfiguration</q-item-section>
@@ -12,7 +12,7 @@
 
               <q-item clickable>
                 <q-item-section>Darstellung</q-item-section>
-                <q-menu anchor="top end" self="top start">
+                <q-menu anchor="top left" self="top right">
                   <q-list dense>
                     <q-item
                       v-for="theme in [
@@ -35,7 +35,6 @@
                   </q-list>
                 </q-menu>
               </q-item>
-
               <q-item clickable v-close-popup>
                 <q-item-section>Hilfe</q-item-section>
               </q-item>
@@ -44,7 +43,6 @@
         </q-btn>
       </q-toolbar>
     </q-header>
-
     <q-page-container class="column flex">
       <router-view />
     </q-page-container>
@@ -66,5 +64,9 @@ const { currentTheme, setTheme } = useThemeManager();
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
+  position: relative;
+}
+.q-page-container {
+  padding-top: 0 !important;
 }
 </style>

From a75630e5a512113b26b10b640cfbd4cb570d6fbc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 2 Dec 2024 10:21:16 +0100
Subject: [PATCH 05/23] Refine custom themes CSS and colors

---
 .../ChargePointScheduledPlanDetails.vue       |   8 +-
 .../ChargePointScheduledPlanHeader.vue        |  12 +-
 .../ChargePointScheduledSettings.vue          |   4 +-
 .../source/src/css/quasar.variables.scss      | 112 ++++++++++++++++--
 4 files changed, 113 insertions(+), 23 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 797658a22c..301dd5bc31 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -34,14 +34,14 @@
           :color="planLimitSelected.value === 'soc' ? 'primary' : 'grey'"
           @click="planLimitSelected.value = 'soc'"
           label="SoC"
-          text-color="$custom1-brown-text"
+
         />
         <q-btn
           size="sm"
           :color="planLimitSelected.value === 'amount' ? 'primary' : 'grey'"
           @click="planLimitSelected.value = 'amount'"
           label="Amount"
-          text-color="$custom1-brown-text"
+
         />
       </q-btn-group>
       <div v-if="planLimitSelected.value === 'soc'" class="q-mt-md">
@@ -77,21 +77,18 @@
             :color="planFrequency.value === 'once' ? 'primary' : 'grey'"
             @click="planFrequency.value = 'once'"
             label="Einmalig"
-            text-color="$custom1-brown-text"
           />
           <q-btn
             size="sm"
             :color="planFrequency.value === 'daily' ? 'primary' : 'grey'"
             @click="planFrequency.value = 'daily'"
             label="Täglich"
-            text-color="$custom1-brown-text"
           />
           <q-btn
             size="sm"
             :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'"
             @click="planFrequency.value = 'weekly'"
             label="Wöchentlich"
-            text-color="$custom1-brown-text"
           />
         </q-btn-group>
 
@@ -157,7 +154,6 @@
             size="sm"
             icon="delete"
             :color="'primary'"
-            text-color="$custom1-brown-text"
             label="Löschen"
             @click="deletePlan(props.chargePointId, props.plan.id)"
           />
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
index 5343c3dfab..1acd36821c 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
@@ -13,8 +13,9 @@
         "
         size="sm"
         class="q-mr-xs"
+        color="white"
       />
-      <div class="q-mr-xs">
+      <div class="q-mr-xs" style="color: #ffffff;">
         {{
           plan.frequency.selected === 'daily'
             ? 'täglich'
@@ -25,17 +26,18 @@
               : 'einmalig'
         }}
       </div>
-      <q-icon name="schedule" size="sm" class="q-mr-xs" />
-      <div class="q-mr-xs">{{ plan.time }}</div>
+      <q-icon name="schedule" size="sm" class="q-mr-xs" color="white"/>
+      <div class="q-mr-xs" style="color: #ffffff;">{{ plan.time }}</div>
       <q-icon
         :name="plan.limit.selected === 'soc' ? 'battery_full' : 'bolt'"
         size="sm"
         class="q-mr-xs"
+        color="white"
       />
-      <div v-if="plan.limit.selected === 'soc'" class="q-mr-xs">
+      <div v-if="plan.limit.selected === 'soc'" class="q-mr-xs" style="color: #ffffff;">
         {{ plan.limit.soc_scheduled }}%
       </div>
-      <div v-if="plan.limit.selected === 'amount'" class="q-mr-xs">
+      <div v-if="plan.limit.selected === 'amount'" class="q-mr-xs" style="color: #ffffff;">
         {{ plan.limit.amount ? plan.limit.amount / 1000 : '' }}kWh
       </div>
     </div>
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue
index 079ed8dd65..460dece0da 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue
@@ -55,10 +55,10 @@ const plans = computed(() =>
   border-radius: 10px;
 }
 .active-border {
-  border: 2px solid var(--q-positive);
+  border: 4px solid var(--q-positive);
 }
 .inactive-border {
-  border: 2px solid var(--q-primary);
+  border: 4px solid var(--q-negative);
 }
 :deep(.q-expansion-item__container) .q-item {
   padding: 6px 6px;
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index 9dbfd4da25..ce2f7387fa 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -29,7 +29,7 @@ $warning: #f2c037;
 /////////////////////////////////////////////////////////////////////
 
 // Custom Theme 1 (light)
-$custom1-background-grey: #eeeef3;
+$custom1-background-grey: #e3e3ec;
 $custom1-background-grey-2: #eeeef3;
 $custom1-primary: #5c93d1;
 $custom1-secondary: #d2d2d7;
@@ -89,7 +89,7 @@ $custom4-tab-icon: #556785;
 $custom4-carousel-control: #556785;
 
 // Custom Theme 5 (dark)
-$custom5-background-grey: #010322;
+$custom5-background-grey: #030627;
 $custom5-background-grey-2: #010322;
 $custom5-primary: #3874db;
 $custom5-secondary: #28293d;
@@ -102,6 +102,7 @@ $custom5-brown-text: #2c3645;
 $custom5-white: #ffffff;
 $custom5-tab-icon: #ffffff;
 $custom5-carousel-control: #8b8f9f;
+$custom5-list: #3c3e5c;
 
 :root {
   // Custom Theme 1
@@ -178,6 +179,7 @@ $custom5-carousel-control: #8b8f9f;
   --custom5-white: #{$custom5-white};
   --custom5-tab-icon: #{$custom5-tab-icon};
   --custom5-carousel-control: #{$custom5-carousel-control};
+  --custom5-list: #{$custom5-list};
 }
 
 // Theme Classes
@@ -229,12 +231,31 @@ $custom5-carousel-control: #8b8f9f;
       }
     }
   }
+  .q-carousel__control {
+    .q-btn {
+      &:before {
+        box-shadow: none;
+      }
+      .q-icon {
+        color: var(--custom1-carousel-control);
+
+        &:before {
+          color: var(--custom1-carousel-control);
+          box-shadow: none;
+        }
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom1-background-grey-2);
   }
   .q-card {
     background-color: var(--custom1-secondary);
   }
+  .q-expansion-item__toggle-icon {
+    color: var(--custom1-white);
+  }
+
   .q-list {
     background-color: var(--custom1-background-grey-2);
   }
@@ -286,6 +307,21 @@ $custom5-carousel-control: #8b8f9f;
       }
     }
   }
+  .q-carousel__control {
+    .q-btn {
+      &:before {
+        box-shadow: none;
+      }
+      .q-icon {
+        color: var(--custom2-carousel-control);
+
+        &:before {
+          color: var(--custom2-carousel-control);
+          box-shadow: none;
+        }
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom2-background-grey-2);
   }
@@ -343,6 +379,21 @@ $custom5-carousel-control: #8b8f9f;
       }
     }
   }
+  .q-carousel__control {
+    .q-btn {
+      &:before {
+        box-shadow: none;
+      }
+      .q-icon {
+        color: var(--custom3-carousel-control);
+
+        &:before {
+          color: var(--custom3-carousel-control);
+          box-shadow: none;
+        }
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom3-background-grey-2);
   }
@@ -400,6 +451,21 @@ $custom5-carousel-control: #8b8f9f;
       }
     }
   }
+  .q-carousel__control {
+    .q-btn {
+      &:before {
+        box-shadow: none;
+      }
+      .q-icon {
+        color: var(--custom4-carousel-control);
+
+        &:before {
+          color: var(--custom4-carousel-control);
+          box-shadow: none;
+        }
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom4-background-grey-2);
   }
@@ -434,13 +500,13 @@ $custom5-carousel-control: #8b8f9f;
   .q-header {
     background-color: var(--custom5-background-grey-2);
   }
-  html body.q-theme--custom5 {
-    color: var(--custom5-white);
-  }
+  // html body.q-theme--custom5 {
+  //   color: var(--custom5-white);
+  // }
 
-  .q-theme--custom5 .q-layout {
-    background-color: var(--custom5-white);
-  }
+  // .q-theme--custom5 .q-layout {
+  //   background-color: var(--custom5-white);
+  // }
 
   .q-tab-panels {
     background-color: var(--custom5-background-grey-2);
@@ -452,7 +518,7 @@ $custom5-carousel-control: #8b8f9f;
     border: 1px solid var(--custom5-secondary);
   }
   .q-tab--active {
-    background-color: darken($custom5-secondary, 10%);
+    background-color: lighten($custom5-secondary, 10%);
   }
   .q-carousel {
     &__navigation-icon,
@@ -463,6 +529,21 @@ $custom5-carousel-control: #8b8f9f;
       }
     }
   }
+  .q-carousel__control {
+    .q-btn {
+      &:before {
+        box-shadow: none;
+      }
+      .q-icon {
+        color: var(--custom5-carousel-control);
+
+        &:before {
+          color: var(--custom5-carousel-control);
+          box-shadow: none;
+        }
+      }
+    }
+  }
   .q-carousel__slide {
     background-color: var(--custom5-background-grey-2);
     color: var(--custom5-white);
@@ -471,6 +552,11 @@ $custom5-carousel-control: #8b8f9f;
     background-color: var(--custom5-secondary);
     color: var(--custom5-white);
   }
+  .q-menu {
+    .q-item__section {
+      color: var(--custom5-white) !important;
+    }
+  }
 
   .q-expansion-item__toggle-icon {
     color: var(--custom5-white);
@@ -478,6 +564,12 @@ $custom5-carousel-control: #8b8f9f;
   .q-field__label {
     color: var(--custom5-white);
   }
+  .q-field__control {
+    .q-field__native::-webkit-calendar-picker-indicator {
+      filter: invert(1);
+    }
+  }
+
   input {
     color: var(--custom5-white);
   }
@@ -489,7 +581,7 @@ $custom5-carousel-control: #8b8f9f;
     color: var(--custom5-white);
   }
   .q-list {
-    background-color: var(--custom5-background-grey-2);
+    background-color: var(--custom5-list);
   }
   .q-toggle__thumb:after {
     background: #e0e0e0;

From edbc9dda80d4d6bf9cfcba13d4bda71030977ffc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 2 Dec 2024 14:21:25 +0100
Subject: [PATCH 06/23] Theme CSS cleanup / metadata

---
 .../source/src/composables/useThemeManager.ts |   2 +-
 .../source/src/css/quasar.variables.scss      | 290 +++++++++---------
 2 files changed, 144 insertions(+), 148 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
index 334f3db20d..cede57be2e 100644
--- a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
+++ b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
@@ -3,7 +3,7 @@ import { useQuasar } from 'quasar';
 
 export function useThemeManager() {
   const $q = useQuasar();
-  const currentTheme = ref('custom'); // Default theme
+  const currentTheme = ref('custom1'); // Default theme
 
   const setTheme = (theme: string) => {
     currentTheme.value = theme;
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index ce2f7387fa..4b91d5098e 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -29,8 +29,8 @@ $warning: #f2c037;
 /////////////////////////////////////////////////////////////////////
 
 // Custom Theme 1 (light)
-$custom1-background-grey: #e3e3ec;
-$custom1-background-grey-2: #eeeef3;
+$custom1-background-1: #e3e3ec;
+$custom1-background-2: #eeeef3;
 $custom1-primary: #5c93d1;
 $custom1-secondary: #d2d2d7;
 $custom1-positive: #66bd7a;
@@ -42,10 +42,11 @@ $custom1-brown-text: #524f57;
 $custom1-white: #ffffff;
 $custom1-tab-icon: #5c93d1;
 $custom1-carousel-control: #5c93d1;
+$custom1-toggle-off-position: #e0e0e0;
 
 // Custom Theme 2
-$custom2-background-grey: #f7f8f9;
-$custom2-background-grey-2: #ebeef1;
+$custom2-background-1: #f7f8f9;
+$custom2-background-2: #ebeef1;
 $custom2-primary: #445975;
 $custom2-secondary: #d5dae0;
 $custom2-positive: #427a5b;
@@ -57,10 +58,11 @@ $custom2-brown-text: #2b3541;
 $custom2-white: #ffffff;
 $custom2-tab-icon: #445975;
 $custom2-carousel-control: #445975;
+$custom2-toggle-off-position: #e0e0e0;
 
 // Custom Theme 3
-$custom3-background-grey: #f8f9fb;
-$custom3-background-grey-2: #edf0f5;
+$custom3-background-1: #f8f9fb;
+$custom3-background-2: #edf0f5;
 $custom3-primary: #4878b7;
 $custom3-secondary: #d8dde6;
 $custom3-positive: #50a567;
@@ -72,10 +74,11 @@ $custom3-brown-text: #2d3748;
 $custom3-white: #ffffff;
 $custom3-tab-icon: #4878b7;
 $custom3-carousel-control: #4878b7;
+$custom3-toggle-off-position: #e0e0e0;
 
 // Custom Theme 4
-$custom4-background-grey: #f5f6f8;
-$custom4-background-grey-2: #e8eaef;
+$custom4-background-1: #f5f6f8;
+$custom4-background-2: #e8eaef;
 $custom4-primary: #556785;
 $custom4-secondary: #cfd5de;
 $custom4-positive: #3e8f5e;
@@ -87,10 +90,11 @@ $custom4-brown-text: #2c3645;
 $custom4-white: #ffffff;
 $custom4-tab-icon: #556785;
 $custom4-carousel-control: #556785;
+$custom4-toggle-off-position: #e0e0e0;
 
 // Custom Theme 5 (dark)
-$custom5-background-grey: #030627;
-$custom5-background-grey-2: #010322;
+$custom5-background-1: #030627;
+$custom5-background-2: #010322;
 $custom5-primary: #3874db;
 $custom5-secondary: #28293d;
 $custom5-positive: #3e8f5e;
@@ -102,12 +106,13 @@ $custom5-brown-text: #2c3645;
 $custom5-white: #ffffff;
 $custom5-tab-icon: #ffffff;
 $custom5-carousel-control: #8b8f9f;
+$custom5-toggle-off-position: #e0e0e0;
 $custom5-list: #3c3e5c;
 
 :root {
   // Custom Theme 1
-  --custom1-background-grey: #{$custom1-background-grey};
-  --custom1-background-grey-2: #{$custom1-background-grey-2};
+  --custom1-background-1: #{$custom1-background-1};
+  --custom1-background-2: #{$custom1-background-2};
   --custom1-primary: #{$custom1-primary};
   --custom1-secondary: #{$custom1-secondary};
   --custom1-positive: #{$custom1-positive};
@@ -119,10 +124,11 @@ $custom5-list: #3c3e5c;
   --custom1-white: #{$custom1-white};
   --custom1-tab-icon: #{$custom1-tab-icon};
   --custom1-carousel-control: #{$custom1-carousel-control};
+  --custom1-toggle-off-position: #{$custom1-toggle-off-position};
 
   // Custom Theme 2
-  --custom2-background-grey: #{$custom2-background-grey};
-  --custom2-background-grey-2: #{$custom2-background-grey-2};
+  --custom2-background-1: #{$custom2-background-1};
+  --custom2-background-2: #{$custom2-background-2};
   --custom2-primary: #{$custom2-primary};
   --custom2-secondary: #{$custom2-secondary};
   --custom2-positive: #{$custom2-positive};
@@ -134,10 +140,11 @@ $custom5-list: #3c3e5c;
   --custom2-white: #{$custom2-white};
   --custom2-tab-icon: #{$custom2-tab-icon};
   --custom2-carousel-control: #{$custom2-carousel-control};
+  --custom2-toggle-off-position: #{$custom2-toggle-off-position};
 
   // Custom Theme 3
-  --custom3-background-grey: #{$custom3-background-grey};
-  --custom3-background-grey-2: #{$custom3-background-grey-2};
+  --custom3-background-1: #{$custom3-background-1};
+  --custom3-background-2: #{$custom3-background-2};
   --custom3-primary: #{$custom3-primary};
   --custom3-secondary: #{$custom3-secondary};
   --custom3-positive: #{$custom3-positive};
@@ -149,10 +156,11 @@ $custom5-list: #3c3e5c;
   --custom3-white: #{$custom3-white};
   --custom3-tab-icon: #{$custom3-tab-icon};
   --custom3-carousel-control: #{$custom3-carousel-control};
+  --custom3-toggle-off-position: #{$custom3-toggle-off-position};
 
   // Custom Theme 4
-  --custom4-background-grey: #{$custom4-background-grey};
-  --custom4-background-grey-2: #{$custom4-background-grey-2};
+  --custom4-background-1: #{$custom4-background-1};
+  --custom4-background-2: #{$custom4-background-2};
   --custom4-primary: #{$custom4-primary};
   --custom4-secondary: #{$custom4-secondary};
   --custom4-positive: #{$custom4-positive};
@@ -164,10 +172,11 @@ $custom5-list: #3c3e5c;
   --custom4-white: #{$custom4-white};
   --custom4-tab-icon: #{$custom4-tab-icon};
   --custom4-carousel-control: #{$custom4-carousel-control};
+  --custom4-toggle-off-position: #{$custom4-toggle-off-position};
 
   // Custom Theme 5
-  --custom5-background-grey: #{$custom5-background-grey};
-  --custom5-background-grey-2: #{$custom5-background-grey-2};
+  --custom5-background-1: #{$custom5-background-1};
+  --custom5-background-2: #{$custom5-background-2};
   --custom5-primary: #{$custom5-primary};
   --custom5-secondary: #{$custom5-secondary};
   --custom5-positive: #{$custom5-positive};
@@ -180,6 +189,7 @@ $custom5-list: #3c3e5c;
   --custom5-tab-icon: #{$custom5-tab-icon};
   --custom5-carousel-control: #{$custom5-carousel-control};
   --custom5-list: #{$custom5-list};
+  --custom5-toggle-off-position: #{$custom5-toggle-off-position};
 }
 
 // Theme Classes
@@ -194,76 +204,74 @@ $custom5-list: #3c3e5c;
   --q-white: var(--custom1-white);
   --q-tab-icon: var(--custom1-tab-icon);
   --q-color-carousel-control: var(--custom1-carousel-control);
-  background-color: var(--custom1-background-grey);
+  background-color: var(--custom1-background-1);
+  // text color
   color: var(--custom1-brown-text);
 
+  //header colors
   .q-header {
-    background-color: var(--custom1-background-grey-2);
+    background-color: var(--custom1-background-2);
     color: var(--custom1-brown-text);
   }
-
+  //Tab panel background
   .q-tab-panels {
-    background-color: var(--custom1-background-grey-2);
+    background-color: var(--custom1-background-2);
   }
-
+  //Tab CSS
   .q-tab {
-    background-color: var(--custom1-background-grey-2);
+    background-color: var(--custom1-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom1-secondary);
   }
+  // Tab icon color
   .q-tab-icon {
     color: var(--custom1-tab-icon);
   }
+  // Tab active background color
   .q-tab--active {
     background-color: darken($custom1-secondary, 2%);
   }
-  // .q-tab-panels {
-  //   border-left: 1px solid var(--custom1-secondary);
-  //   border-right: 1px solid var(--custom1-secondary);
-  // }
-  .q-carousel {
-    &__navigation-icon,
-    &__arrow {
-      .q-btn,
-      .q-icon {
-        color: var(--custom1-carousel-control);
-      }
-    }
-  }
+
+  // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none;
+        box-shadow: none; // Full screen button remove shadow
       }
       .q-icon {
         color: var(--custom1-carousel-control);
 
         &:before {
-          color: var(--custom1-carousel-control);
+          color: var(--custom1-carousel-control); // Full screen button color
           box-shadow: none;
         }
       }
     }
   }
+  // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom1-background-grey-2);
+    background-color: var(--custom1-background-2);
   }
+  //Slide background
   .q-card {
     background-color: var(--custom1-secondary);
   }
+  //Expansion item (expand arrow)
   .q-expansion-item__toggle-icon {
     color: var(--custom1-white);
   }
-
+  //List background color, for menus etc...
   .q-list {
-    background-color: var(--custom1-background-grey-2);
+    background-color: var(--custom1-background-2);
   }
+  //Toggle button color in off position
   .q-toggle__thumb:after {
-    background: #e0e0e0;
+    background: var(--custom1-toggle-off-position);
   }
+  //Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
-    background-color: currentColor;
+    background-color: currentColor; // current primary color
   }
 }
 
@@ -278,62 +286,62 @@ $custom5-list: #3c3e5c;
   --q-white: var(--custom2-white);
   --q-tab-icon: var(--custom2-tab-icon);
   --q-carousel-control: var(--custom2-carousel-control);
-  background-color: var(--custom2-background-grey);
+  background-color: var(--custom2-background-1);
+  // text color
   color: var(--custom2-brown-text);
-
+  //header colors
   .q-header {
-    background-color: var(--custom2-background-grey-2);
+    background-color: var(--custom2-background-2);
     color: var(--custom2-brown-text);
   }
-
+  //Tab panel background
   .q-tab-panels {
-    background-color: var(--custom2-background-grey-2);
+    background-color: var(--custom2-background-2);
   }
+  //Tab CSS
   .q-tab {
-    background-color: var(--custom2-background-grey-2);
+    background-color: var(--custom2-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom2-secondary);
   }
+  // Tab active background color
   .q-tab--active {
     background-color: darken($custom2-secondary, 2%);
   }
-  .q-carousel {
-    &__navigation-icon,
-    &__arrow {
-      .q-btn,
-      .q-icon {
-        color: var(--custom2-carousel-control);
-      }
-    }
-  }
+  // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none;
+        box-shadow: none; // Full screen button remove shadow
       }
       .q-icon {
         color: var(--custom2-carousel-control);
 
         &:before {
-          color: var(--custom2-carousel-control);
+          color: var(--custom2-carousel-control); // Full screen button color
           box-shadow: none;
         }
       }
     }
   }
+  // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom2-background-grey-2);
+    background-color: var(--custom2-background-2);
   }
+  //Slide background
   .q-card {
     background-color: var(--custom2-secondary);
   }
+  //List background color, for menus etc...
   .q-list {
-    background-color: var(--custom2-background-grey-2);
+    background-color: var(--custom2-background-2);
   }
+  //Toggle button color in off position
   .q-toggle__thumb:after {
-    background: #e0e0e0;
+    background: var(--custom2-toggle-off-position);
   }
+  //Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
@@ -350,62 +358,62 @@ $custom5-list: #3c3e5c;
   --q-white: var(--custom3-white);
   --q-tab-icon: var(--custom3-tab-icon);
   --q-carousel-control: var(--custom3-carousel-control);
-  background-color: var(--custom3-background-grey);
+  background-color: var(--custom3-background-1);
+  // text color
   color: var(--custom3-brown-text);
-
+  //header colors
   .q-header {
-    background-color: var(--custom3-background-grey-2);
-    color: var(--custom3-brown-text);
+    background-color: var(--custom3-background-2);
+    color: var(--custom3-brown-text); //text
   }
-
+  //Tab panel background
   .q-tab-panels {
-    background-color: var(--custom3-background-grey-2);
+    background-color: var(--custom3-background-2);
   }
+  //Tab CSS
   .q-tab {
-    background-color: var(--custom3-background-grey-2);
+    background-color: var(--custom3-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom3-secondary);
   }
+  // Tab active background color
   .q-tab--active {
     background-color: darken($custom3-secondary, 2%);
   }
-  .q-carousel {
-    &__navigation-icon,
-    &__arrow {
-      .q-btn,
-      .q-icon {
-        color: var(--custom3-carousel-control);
-      }
-    }
-  }
+  // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none;
+        box-shadow: none; // Full screen button remove shadow
       }
       .q-icon {
         color: var(--custom3-carousel-control);
 
         &:before {
-          color: var(--custom3-carousel-control);
+          color: var(--custom3-carousel-control); // Full screen button color
           box-shadow: none;
         }
       }
     }
   }
+  // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom3-background-grey-2);
+    background-color: var(--custom3-background-2);
   }
+  //Slide background
   .q-card {
     background-color: var(--custom3-secondary);
   }
+  //List background color, for menus etc...
   .q-list {
-    background-color: var(--custom3-background-grey-2);
+    background-color: var(--custom3-background-2);
   }
+  //Toggle button color in off position
   .q-toggle__thumb:after {
-    background: #e0e0e0;
+    background: var(--custom3-toggle-off-position);
   }
+  //Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
@@ -422,62 +430,62 @@ $custom5-list: #3c3e5c;
   --q-white: var(--custom4-white);
   --q-tab-icon: var(--custom4-tab-icon);
   --q-carousel-control: var(--custom4-carousel-control);
-  background-color: var(--custom4-background-grey);
+  background-color: var(--custom4-background-1);
+  // text color
   color: var(--custom4-brown-text);
-
+  //header colors
   .q-header {
-    background-color: var(--custom4-background-grey-2);
+    background-color: var(--custom4-background-2);
     color: var(--custom4-brown-text);
   }
-
+  //Tab panel background
   .q-tab-panels {
-    background-color: var(--custom4-background-grey-2);
+    background-color: var(--custom4-background-2);
   }
+  //Tab CSS
   .q-tab {
-    background-color: var(--custom4-background-grey-2);
+    background-color: var(--custom4-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom4-secondary);
   }
+  // Tab active background color
   .q-tab--active {
     background-color: darken($custom4-secondary, 2%);
   }
-  .q-carousel {
-    &__navigation-icon,
-    &__arrow {
-      .q-btn,
-      .q-icon {
-        color: var(--custom4-carousel-control);
-      }
-    }
-  }
+  // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none;
+        box-shadow: none; // Full screen button remove shadow
       }
       .q-icon {
         color: var(--custom4-carousel-control);
 
         &:before {
-          color: var(--custom4-carousel-control);
+          color: var(--custom4-carousel-control); // Full screen button color
           box-shadow: none;
         }
       }
     }
   }
+  // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom4-background-grey-2);
+    background-color: var(--custom4-background-2);
   }
+  //Slide background
   .q-card {
     background-color: var(--custom4-secondary);
   }
+  //List background color, for menus etc...
   .q-list {
-    background-color: var(--custom4-background-grey-2);
+    background-color: var(--custom4-background-2);
   }
+  //Toggle button color in off position
   .q-toggle__thumb:after {
-    background: #e0e0e0;
+    background: var(--custom4-toggle-off-position);
   }
+  //Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
@@ -494,25 +502,20 @@ $custom5-list: #3c3e5c;
   --q-white: var(--custom5-white);
   --q-tab-icon: var(--custom5-tab-icon);
   --q-carousel-control: var(--custom5-carousel-control);
-  background-color: var(--custom5-background-grey);
+  background-color: var(--custom5-background-1);
+  //Text color
   color: var(--custom5-brown-text);
-
+  //Header background color
   .q-header {
-    background-color: var(--custom5-background-grey-2);
+    background-color: var(--custom5-background-2);
   }
-  // html body.q-theme--custom5 {
-  //   color: var(--custom5-white);
-  // }
-
-  // .q-theme--custom5 .q-layout {
-  //   background-color: var(--custom5-white);
-  // }
-
+  //Tab panel background
   .q-tab-panels {
-    background-color: var(--custom5-background-grey-2);
+    background-color: var(--custom5-background-2);
   }
+  //Tab CSS
   .q-tab {
-    background-color: var(--custom5-background-grey-2);
+    background-color: var(--custom5-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border: 1px solid var(--custom5-secondary);
@@ -520,72 +523,65 @@ $custom5-list: #3c3e5c;
   .q-tab--active {
     background-color: lighten($custom5-secondary, 10%);
   }
-  .q-carousel {
-    &__navigation-icon,
-    &__arrow {
-      .q-btn,
-      .q-icon {
-        color: var(--custom5-carousel-control);
-      }
-    }
-  }
+  // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none;
+        box-shadow: none; // Full screen button remove shadow
       }
       .q-icon {
         color: var(--custom5-carousel-control);
 
         &:before {
-          color: var(--custom5-carousel-control);
+          color: var(--custom5-carousel-control); // Full screen button color
           box-shadow: none;
         }
       }
     }
   }
+  // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom5-background-grey-2);
+    background-color: var(--custom5-background-2);
     color: var(--custom5-white);
   }
+  //Slide background
   .q-card {
     background-color: var(--custom5-secondary);
     color: var(--custom5-white);
   }
-  .q-menu {
-    .q-item__section {
-      color: var(--custom5-white) !important;
-    }
-  }
-
+  //Expansion item (expand arrow)
   .q-expansion-item__toggle-icon {
     color: var(--custom5-white);
   }
+  //Input field text label color
   .q-field__label {
     color: var(--custom5-white);
   }
+  //Input field icon color
   .q-field__control {
     .q-field__native::-webkit-calendar-picker-indicator {
       filter: invert(1);
     }
   }
-
-  input {
-    color: var(--custom5-white);
-  }
-
+  //Input field placeholder text color
   .q-placeholder {
     color: var(--custom5-white);
   }
-  .q-material-icons {
-    color: var(--custom5-white);
-  }
+  //List background color, for menus etc...
   .q-list {
     background-color: var(--custom5-list);
   }
+  //Menu text color
+  .q-menu {
+    .q-item__section {
+      color: var(--custom5-white) !important;
+    }
+  }
+  //Toggle button color in off position
   .q-toggle__thumb:after {
-    background: #e0e0e0;
+    background: var(--custom5-toggle-off-position);
   }
+  //Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }

From 038940996badcbf42e3578cfac3953788602172f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 3 Dec 2024 15:26:47 +0100
Subject: [PATCH 07/23] Make devServer available on local WiFi network to view
 on mobile devices

---
 packages/modules/web_themes/standard/source/quasar.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/quasar.config.ts b/packages/modules/web_themes/standard/source/quasar.config.ts
index 1d3860cd60..446dd671e5 100644
--- a/packages/modules/web_themes/standard/source/quasar.config.ts
+++ b/packages/modules/web_themes/standard/source/quasar.config.ts
@@ -17,7 +17,6 @@ export default configure((/* ctx */) => {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
-    cssAddon: true,
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
@@ -79,9 +78,10 @@ export default configure((/* ctx */) => {
     devServer: {
       // https: true
       open: true, // opens browser window automatically
+      host: '0.0.0.0', // Allow external access
       proxy: {
         '/ws': {
-          target: 'ws://localhost:9001',
+          target: 'ws://0.0.0.0:9001', // Changed from localhost
           ws: true,
         },
       },

From d3ca39b348541e9cee248cb8f22b552eaafb5b5c Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 3 Dec 2024 16:19:38 +0100
Subject: [PATCH 08/23] Fix Set function and nomenclature

---
 .../source/src/components/ChargePoint.vue     |  4 +--
 .../ChargePointScheduledPlanDetails.vue       | 22 ++++-----------
 .../ChargePointScheduledPlanHeader.vue        | 28 ++++++++++++-------
 .../source/src/components/SliderDouble.vue    |  1 -
 .../source/src/css/quasar.variables.scss      | 13 +++++----
 .../standard/source/src/stores/mqtt-store.ts  |  6 ++--
 6 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
index 0e199454ac..b6f4032176 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
@@ -46,7 +46,7 @@
         :readonly="true"
         :connected-vehicle-soc="connectedVehicleSoc"
         :target-soc="targetSoc"
-        :target-time="targeTime"
+        :target-time="targetTime"
       />
     </q-card-section>
   </q-card>
@@ -105,7 +105,7 @@ const targetSoc = computed(
     mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value?.soc,
 );
 
-const targeTime = computed(() => {
+const targetTime = computed(() => {
   const target = mqttStore.vehicleScheduledChargingTarget(
     props.chargePointId,
   ).value;
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 301dd5bc31..7d02eed62a 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -6,11 +6,7 @@
       </div>
       <div class="row items-center">
         <div class="text-subtitle2 q-mr-sm">Aktiv</div>
-        <ToggleStandard
-          v-model="togglePlanActive"
-          :size="'sm'"
-          color="positive"
-        />
+        <ToggleStandard v-model="planActive" :size="'sm'" color="positive" />
       </div>
       <div class="row items-center q-mb-md">
         <q-input
@@ -34,14 +30,12 @@
           :color="planLimitSelected.value === 'soc' ? 'primary' : 'grey'"
           @click="planLimitSelected.value = 'soc'"
           label="SoC"
-
         />
         <q-btn
           size="sm"
           :color="planLimitSelected.value === 'amount' ? 'primary' : 'grey'"
           @click="planLimitSelected.value = 'amount'"
           label="Amount"
-
         />
       </q-btn-group>
       <div v-if="planLimitSelected.value === 'soc'" class="q-mt-md">
@@ -179,22 +173,18 @@ const mqttStore = useMqttStore();
 
 const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
 
-const togglePlanActive = computed({
+const planActive = computed({
   get() {
-    return mqttStore.vehicleToggleScheduledChargingPlanActive(
+    return mqttStore.vehicleScheduledChargingPlanActive(
       props.chargePointId,
       props.plan.id,
     ).value;
   },
-  set() {
-    const currentValue = mqttStore.vehicleToggleScheduledChargingPlanActive(
+  set(newValue: boolean) {
+    mqttStore.vehicleScheduledChargingPlanActive(
       props.chargePointId,
       props.plan.id,
-    ).value;
-    mqttStore.vehicleToggleScheduledChargingPlanActive(
-      props.chargePointId,
-      props.plan.id,
-    ).value = !currentValue;
+    ).value = newValue;
   },
 });
 
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
index 1acd36821c..28ad53f7a2 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
@@ -2,7 +2,7 @@
   <div
     class="row items-center justify-between text-subtitle2 full-width no-wrap"
   >
-    <div class="row" @click="togglePlanActive = !togglePlanActive">
+    <div class="row" @click="planActive = !planActive">
       <q-icon
         :name="
           plan.frequency.selected === 'daily'
@@ -15,7 +15,7 @@
         class="q-mr-xs"
         color="white"
       />
-      <div class="q-mr-xs" style="color: #ffffff;">
+      <div class="q-mr-xs" style="color: #ffffff">
         {{
           plan.frequency.selected === 'daily'
             ? 'täglich'
@@ -26,18 +26,26 @@
               : 'einmalig'
         }}
       </div>
-      <q-icon name="schedule" size="sm" class="q-mr-xs" color="white"/>
-      <div class="q-mr-xs" style="color: #ffffff;">{{ plan.time }}</div>
+      <q-icon name="schedule" size="sm" class="q-mr-xs" color="white" />
+      <div class="q-mr-xs" style="color: #ffffff">{{ plan.time }}</div>
       <q-icon
         :name="plan.limit.selected === 'soc' ? 'battery_full' : 'bolt'"
         size="sm"
         class="q-mr-xs"
         color="white"
       />
-      <div v-if="plan.limit.selected === 'soc'" class="q-mr-xs" style="color: #ffffff;">
+      <div
+        v-if="plan.limit.selected === 'soc'"
+        class="q-mr-xs"
+        style="color: #ffffff"
+      >
         {{ plan.limit.soc_scheduled }}%
       </div>
-      <div v-if="plan.limit.selected === 'amount'" class="q-mr-xs" style="color: #ffffff;">
+      <div
+        v-if="plan.limit.selected === 'amount'"
+        class="q-mr-xs"
+        style="color: #ffffff"
+      >
         {{ plan.limit.amount ? plan.limit.amount / 1000 : '' }}kWh
       </div>
     </div>
@@ -56,19 +64,19 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
-const togglePlanActive = computed({
+const planActive = computed({
   get() {
-    return mqttStore.vehicleToggleScheduledChargingPlanActive(
+    return mqttStore.vehicleScheduledChargingPlanActive(
       props.chargePointId,
       props.plan.id,
     ).value;
   },
   set() {
-    const currentValue = mqttStore.vehicleToggleScheduledChargingPlanActive(
+    const currentValue = mqttStore.vehicleScheduledChargingPlanActive(
       props.chargePointId,
       props.plan.id,
     ).value;
-    mqttStore.vehicleToggleScheduledChargingPlanActive(
+    mqttStore.vehicleScheduledChargingPlanActive(
       props.chargePointId,
       props.plan.id,
     ).value = !currentValue;
diff --git a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
index 2f8d7e3d52..7dae854acb 100644
--- a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
@@ -79,7 +79,6 @@ const props = defineProps({
 const currentCharge = computed(() => props.connectedVehicleSoc);
 const targetCharge = computed(() => props.targetSoc);
 </script>
-import { ref } from 'vue';
 
 <style scoped>
 .my-card {
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index 4b91d5098e..919d1b0b1d 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -12,6 +12,9 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
+// Import SASS color module
+@use 'sass:color' as color;
+
 // Default colors
 
 $primary: #1976d2;
@@ -230,7 +233,7 @@ $custom5-list: #3c3e5c;
   }
   // Tab active background color
   .q-tab--active {
-    background-color: darken($custom1-secondary, 2%);
+    background-color: color.scale($custom1-secondary, $lightness: -2%);
   }
 
   // Carousel control arrows and buttons
@@ -307,7 +310,7 @@ $custom5-list: #3c3e5c;
   }
   // Tab active background color
   .q-tab--active {
-    background-color: darken($custom2-secondary, 2%);
+    background-color: color.scale($custom2-secondary, $lightness: -2%);
   }
   // Carousel control arrows and buttons
   .q-carousel__control {
@@ -379,7 +382,7 @@ $custom5-list: #3c3e5c;
   }
   // Tab active background color
   .q-tab--active {
-    background-color: darken($custom3-secondary, 2%);
+    background-color: color.scale($custom3-secondary, $lightness: -2%);
   }
   // Carousel control arrows and buttons
   .q-carousel__control {
@@ -451,7 +454,7 @@ $custom5-list: #3c3e5c;
   }
   // Tab active background color
   .q-tab--active {
-    background-color: darken($custom4-secondary, 2%);
+    background-color: color.scale($custom4-secondary, $lightness: -2%);
   }
   // Carousel control arrows and buttons
   .q-carousel__control {
@@ -521,7 +524,7 @@ $custom5-list: #3c3e5c;
     border: 1px solid var(--custom5-secondary);
   }
   .q-tab--active {
-    background-color: lighten($custom5-secondary, 10%);
+    background-color: color.scale($custom5-secondary, $lightness: 10%);
   }
   // Carousel control arrows and buttons
   .q-carousel__control {
diff --git a/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
index 60387db9e6..15dd4b4a4f 100644
--- a/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
@@ -1568,12 +1568,12 @@ export const useMqttStore = defineStore('mqtt', () => {
   };
 
   /**
-   * Toggle the active state of the scheduled charging plan identified by the scheduled charge plan id
+   * Get or set the active state of the scheduled charging plan identified by the scheduled charge plan id
    * @param chargePointId charge point id
    * @param planId scheduled plan id
    * @returns boolean | undefined
    */
-  const vehicleToggleScheduledChargingPlanActive = (
+  const vehicleScheduledChargingPlanActive = (
     chargePointId: number,
     planId: string,
   ) => {
@@ -1952,7 +1952,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     vehicleAddScheduledChargingPlan,
     vehicleDeleteScheduledChargingPlan,
     vehicleScheduledChargingPlans,
-    vehicleToggleScheduledChargingPlanActive,
+    vehicleScheduledChargingPlanActive,
     vehicleScheduledChargingTarget,
     vehicleScheduledChargingPlanCurrent,
     vehicleScheduledChargingPlanLimitSelected,

From 0dcc65b47c39877da0d17a19e308e594d490ddce Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 4 Dec 2024 10:16:04 +0100
Subject: [PATCH 09/23] Fix: changes to config not necessary for viewing on
 mobile device in local WiFi network

---
 packages/modules/web_themes/standard/source/quasar.config.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/quasar.config.ts b/packages/modules/web_themes/standard/source/quasar.config.ts
index 446dd671e5..ed378f0203 100644
--- a/packages/modules/web_themes/standard/source/quasar.config.ts
+++ b/packages/modules/web_themes/standard/source/quasar.config.ts
@@ -78,10 +78,9 @@ export default configure((/* ctx */) => {
     devServer: {
       // https: true
       open: true, // opens browser window automatically
-      host: '0.0.0.0', // Allow external access
       proxy: {
         '/ws': {
-          target: 'ws://0.0.0.0:9001', // Changed from localhost
+          target: 'ws://localhost:9001',
           ws: true,
         },
       },

From e613785ed144a2ae8cf4c2522452cdf4feee4976 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 11:13:44 +0100
Subject: [PATCH 10/23] Define two main system themes light and dark, remove
 unnecessary menu

---
 .../source/src/composables/useThemeManager.ts |  38 --
 .../source/src/css/quasar.variables.scss      | 610 ++++--------------
 .../source/src/layouts/MainLayout.vue         |  72 +--
 3 files changed, 161 insertions(+), 559 deletions(-)
 delete mode 100644 packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts

diff --git a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts b/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
deleted file mode 100644
index cede57be2e..0000000000
--- a/packages/modules/web_themes/standard/source/src/composables/useThemeManager.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ref, onMounted } from 'vue';
-import { useQuasar } from 'quasar';
-
-export function useThemeManager() {
-  const $q = useQuasar();
-  const currentTheme = ref('custom1'); // Default theme
-
-  const setTheme = (theme: string) => {
-    currentTheme.value = theme;
-    localStorage.setItem('selectedTheme', theme);
-    document.body.classList.remove(
-      'q-theme--light',
-      'q-theme--dark',
-      'q-theme--custom1',
-      'q-theme--custom2',
-      'q-theme--custom3',
-      'q-theme--custom4',
-      'q-theme--custom5',
-    );
-    document.body.classList.add(`q-theme--${theme}`);
-
-    if (theme === 'dark') {
-      $q.dark.set(true);
-    } else {
-      $q.dark.set(false);
-    }
-  };
-
-  onMounted(() => {
-    const savedTheme = localStorage.getItem('selectedTheme');
-    setTheme(savedTheme || currentTheme.value);
-  });
-
-  return {
-    currentTheme,
-    setTheme,
-  };
-}
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index 919d1b0b1d..b105321224 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -17,236 +17,85 @@
 
 // Default colors
 
-$primary: #1976d2;
-$secondary: #26a69a;
-$accent: #9c27b0;
-
-$dark: #1d1d1d;
-$dark-page: #121212;
-
-$positive: #21ba45;
-$negative: #c10015;
-$info: #31ccec;
-$warning: #f2c037;
+// $primary: #1976d2;
+// $secondary: #26a69a;
+// $accent: #9c27b0;
+// $dark: #1d1d1d;
+// $dark-page: #121212;
+// $positive: #21ba45;
+// $negative: #c10015;
+// $info: #31ccec;
+// $warning: #f2c037;
 
 /////////////////////////////////////////////////////////////////////
 
-// Custom Theme 1 (light)
-$custom1-background-1: #e3e3ec;
-$custom1-background-2: #eeeef3;
-$custom1-primary: #5c93d1;
-$custom1-secondary: #d2d2d7;
-$custom1-positive: #66bd7a;
-$custom1-negative: #db4f5f;
-$custom1-info: #7dc5d4;
-$custom1-warning: #f7b267;
-$custom1-accent: #b691bd;
-$custom1-brown-text: #524f57;
-$custom1-white: #ffffff;
-$custom1-tab-icon: #5c93d1;
-$custom1-carousel-control: #5c93d1;
-$custom1-toggle-off-position: #e0e0e0;
-
-// Custom Theme 2
-$custom2-background-1: #f7f8f9;
-$custom2-background-2: #ebeef1;
-$custom2-primary: #445975;
-$custom2-secondary: #d5dae0;
-$custom2-positive: #427a5b;
-$custom2-negative: #a94955;
-$custom2-info: #4a7a98;
-$custom2-warning: #b87d43;
-$custom2-accent: #6e788c;
-$custom2-brown-text: #2b3541;
-$custom2-white: #ffffff;
-$custom2-tab-icon: #445975;
-$custom2-carousel-control: #445975;
-$custom2-toggle-off-position: #e0e0e0;
-
-// Custom Theme 3
-$custom3-background-1: #f8f9fb;
-$custom3-background-2: #edf0f5;
-$custom3-primary: #4878b7;
-$custom3-secondary: #d8dde6;
-$custom3-positive: #50a567;
-$custom3-negative: #d1495b;
-$custom3-info: #3d8cb5;
-$custom3-warning: #e89d4b;
-$custom3-accent: #8c7daf;
-$custom3-brown-text: #2d3748;
-$custom3-white: #ffffff;
-$custom3-tab-icon: #4878b7;
-$custom3-carousel-control: #4878b7;
-$custom3-toggle-off-position: #e0e0e0;
-
-// Custom Theme 4
-$custom4-background-1: #f5f6f8;
-$custom4-background-2: #e8eaef;
-$custom4-primary: #556785;
-$custom4-secondary: #cfd5de;
-$custom4-positive: #3e8f5e;
-$custom4-negative: #c54d57;
-$custom4-info: #4b89aa;
-$custom4-warning: #d98e44;
-$custom4-accent: #7a7a9c;
-$custom4-brown-text: #2c3645;
-$custom4-white: #ffffff;
-$custom4-tab-icon: #556785;
-$custom4-carousel-control: #556785;
-$custom4-toggle-off-position: #e0e0e0;
-
-// Custom Theme 5 (dark)
-$custom5-background-1: #030627;
-$custom5-background-2: #010322;
-$custom5-primary: #3874db;
-$custom5-secondary: #28293d;
-$custom5-positive: #3e8f5e;
-$custom5-negative: #c54d57;
-$custom5-info: #4b89aa;
-$custom5-warning: #d98e44;
-$custom5-accent: #7a7a9c;
-$custom5-brown-text: #2c3645;
-$custom5-white: #ffffff;
-$custom5-tab-icon: #ffffff;
-$custom5-carousel-control: #8b8f9f;
-$custom5-toggle-off-position: #e0e0e0;
-$custom5-list: #3c3e5c;
-
+// Default Light Theme Base Colors
+$primary: #5c93d1;
+$secondary: #d2d2d7;
+$accent: #b691bd;
+$positive: #66bd7a;
+$negative: #db4f5f;
+$info: #7dc5d4;
+$warning: #f7b267;
+$background-1: #e3e3ec;
+$background-2: #eeeef3;
+$brown-text: #524f57;
+$white: #ffffff;
+$toggle-off: #e0e0e0;
+
+// Light theme (default)
 :root {
-  // Custom Theme 1
-  --custom1-background-1: #{$custom1-background-1};
-  --custom1-background-2: #{$custom1-background-2};
-  --custom1-primary: #{$custom1-primary};
-  --custom1-secondary: #{$custom1-secondary};
-  --custom1-positive: #{$custom1-positive};
-  --custom1-negative: #{$custom1-negative};
-  --custom1-info: #{$custom1-info};
-  --custom1-warning: #{$custom1-warning};
-  --custom1-accent: #{$custom1-accent};
-  --custom1-brown-text: #{$custom1-brown-text};
-  --custom1-white: #{$custom1-white};
-  --custom1-tab-icon: #{$custom1-tab-icon};
-  --custom1-carousel-control: #{$custom1-carousel-control};
-  --custom1-toggle-off-position: #{$custom1-toggle-off-position};
-
-  // Custom Theme 2
-  --custom2-background-1: #{$custom2-background-1};
-  --custom2-background-2: #{$custom2-background-2};
-  --custom2-primary: #{$custom2-primary};
-  --custom2-secondary: #{$custom2-secondary};
-  --custom2-positive: #{$custom2-positive};
-  --custom2-negative: #{$custom2-negative};
-  --custom2-info: #{$custom2-info};
-  --custom2-warning: #{$custom2-warning};
-  --custom2-accent: #{$custom2-accent};
-  --custom2-brown-text: #{$custom2-brown-text};
-  --custom2-white: #{$custom2-white};
-  --custom2-tab-icon: #{$custom2-tab-icon};
-  --custom2-carousel-control: #{$custom2-carousel-control};
-  --custom2-toggle-off-position: #{$custom2-toggle-off-position};
-
-  // Custom Theme 3
-  --custom3-background-1: #{$custom3-background-1};
-  --custom3-background-2: #{$custom3-background-2};
-  --custom3-primary: #{$custom3-primary};
-  --custom3-secondary: #{$custom3-secondary};
-  --custom3-positive: #{$custom3-positive};
-  --custom3-negative: #{$custom3-negative};
-  --custom3-info: #{$custom3-info};
-  --custom3-warning: #{$custom3-warning};
-  --custom3-accent: #{$custom3-accent};
-  --custom3-brown-text: #{$custom3-brown-text};
-  --custom3-white: #{$custom3-white};
-  --custom3-tab-icon: #{$custom3-tab-icon};
-  --custom3-carousel-control: #{$custom3-carousel-control};
-  --custom3-toggle-off-position: #{$custom3-toggle-off-position};
-
-  // Custom Theme 4
-  --custom4-background-1: #{$custom4-background-1};
-  --custom4-background-2: #{$custom4-background-2};
-  --custom4-primary: #{$custom4-primary};
-  --custom4-secondary: #{$custom4-secondary};
-  --custom4-positive: #{$custom4-positive};
-  --custom4-negative: #{$custom4-negative};
-  --custom4-info: #{$custom4-info};
-  --custom4-warning: #{$custom4-warning};
-  --custom4-accent: #{$custom4-accent};
-  --custom4-brown-text: #{$custom4-brown-text};
-  --custom4-white: #{$custom4-white};
-  --custom4-tab-icon: #{$custom4-tab-icon};
-  --custom4-carousel-control: #{$custom4-carousel-control};
-  --custom4-toggle-off-position: #{$custom4-toggle-off-position};
-
-  // Custom Theme 5
-  --custom5-background-1: #{$custom5-background-1};
-  --custom5-background-2: #{$custom5-background-2};
-  --custom5-primary: #{$custom5-primary};
-  --custom5-secondary: #{$custom5-secondary};
-  --custom5-positive: #{$custom5-positive};
-  --custom5-negative: #{$custom5-negative};
-  --custom5-info: #{$custom5-info};
-  --custom5-warning: #{$custom5-warning};
-  --custom5-accent: #{$custom5-accent};
-  --custom5-brown-text: #{$custom5-brown-text};
-  --custom5-white: #{$custom5-white};
-  --custom5-tab-icon: #{$custom5-tab-icon};
-  --custom5-carousel-control: #{$custom5-carousel-control};
-  --custom5-list: #{$custom5-list};
-  --custom5-toggle-off-position: #{$custom5-toggle-off-position};
-}
-
-// Theme Classes
-.q-theme--custom1 {
-  --q-primary: var(--custom1-primary);
-  --q-secondary: var(--custom1-secondary);
-  --q-accent: var(--custom1-accent);
-  --q-positive: var(--custom1-positive);
-  --q-negative: var(--custom1-negative);
-  --q-info: var(--custom1-info);
-  --q-warning: var(--custom1-warning);
-  --q-white: var(--custom1-white);
-  --q-tab-icon: var(--custom1-tab-icon);
-  --q-color-carousel-control: var(--custom1-carousel-control);
-  background-color: var(--custom1-background-1);
-  // text color
-  color: var(--custom1-brown-text);
-
-  //header colors
+  --q-primary: #{$primary};
+  --q-secondary: #{$secondary};
+  --q-accent: #{$accent};
+  --q-positive: #{$positive};
+  --q-negative: #{$negative};
+  --q-info: #{$info};
+  --q-warning: #{$warning};
+  --q-background-1: #{$background-1};
+  --q-background-2: #{$background-2};
+  --q-brown-text: #{$brown-text};
+  --q-white: #{$white};
+  --q-toggle-off: #{$toggle-off};
+
+  // Main background
+  background-color: var(--q-background-1);
+  // Text color
+  color: var(--q-brown-text);
+  // Header colors
   .q-header {
-    background-color: var(--custom1-background-2);
-    color: var(--custom1-brown-text);
+    background-color: var(--q-background-2);
+    color: var(--q-brown-text);
   }
-  //Tab panel background
+  // Tab panel background
   .q-tab-panels {
-    background-color: var(--custom1-background-2);
+    background-color: var(--q-background-2);
   }
-  //Tab CSS
+  // Tab CSS
   .q-tab {
-    background-color: var(--custom1-background-2);
+    background-color: var(--q-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    border: 1px solid var(--custom1-secondary);
+    border: 1px solid var(--q-secondary);
   }
   // Tab icon color
   .q-tab-icon {
-    color: var(--custom1-tab-icon);
+    color: var(--q-primary);
   }
   // Tab active background color
   .q-tab--active {
-    background-color: color.scale($custom1-secondary, $lightness: -2%);
+    background-color: color.scale($secondary, $lightness: -2%);
   }
-
   // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none; // Full screen button remove shadow
+        box-shadow: none;
       }
       .q-icon {
-        color: var(--custom1-carousel-control);
-
+        color: var(--q-primary);
         &:before {
-          color: var(--custom1-carousel-control); // Full screen button color
+          color: var(--q-primary);
           box-shadow: none;
         }
       }
@@ -254,289 +103,106 @@ $custom5-list: #3c3e5c;
   }
   // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom1-background-2);
+    background-color: var(--q-background-2);
   }
-  //Slide background
+  // Slide background
   .q-card {
-    background-color: var(--custom1-secondary);
+    background-color: var(--q-secondary);
   }
-  //Expansion item (expand arrow)
+  // Expansion item (expand arrow)
   .q-expansion-item__toggle-icon {
-    color: var(--custom1-white);
+    color: var(--q-white);
   }
-  //List background color, for menus etc...
+  // List background color, for menus etc
   .q-list {
-    background-color: var(--custom1-background-2);
+    background-color: var(--q-background-2);
   }
-  //Toggle button color in off position
+  // Toggle button color in off position
   .q-toggle__thumb:after {
-    background: var(--custom1-toggle-off-position);
+    background: var(--q-toggle-off);
   }
-  //Toggle button color in on position
-  .q-toggle__inner--truthy .q-toggle__thumb:after {
-    background-color: currentColor; // current primary color
-  }
-}
-
-.q-theme--custom2 {
-  --q-primary: var(--custom2-primary);
-  --q-secondary: var(--custom2-secondary);
-  --q-accent: var(--custom2-accent);
-  --q-positive: var(--custom2-positive);
-  --q-negative: var(--custom2-negative);
-  --q-info: var(--custom2-info);
-  --q-warning: var(--custom2-warning);
-  --q-white: var(--custom2-white);
-  --q-tab-icon: var(--custom2-tab-icon);
-  --q-carousel-control: var(--custom2-carousel-control);
-  background-color: var(--custom2-background-1);
-  // text color
-  color: var(--custom2-brown-text);
-  //header colors
-  .q-header {
-    background-color: var(--custom2-background-2);
-    color: var(--custom2-brown-text);
-  }
-  //Tab panel background
-  .q-tab-panels {
-    background-color: var(--custom2-background-2);
-  }
-  //Tab CSS
-  .q-tab {
-    background-color: var(--custom2-background-2);
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border: 1px solid var(--custom2-secondary);
-  }
-  // Tab active background color
-  .q-tab--active {
-    background-color: color.scale($custom2-secondary, $lightness: -2%);
-  }
-  // Carousel control arrows and buttons
-  .q-carousel__control {
-    .q-btn {
-      &:before {
-        box-shadow: none; // Full screen button remove shadow
-      }
-      .q-icon {
-        color: var(--custom2-carousel-control);
-
-        &:before {
-          color: var(--custom2-carousel-control); // Full screen button color
-          box-shadow: none;
-        }
-      }
-    }
-  }
-  // Slide container background
-  .q-carousel__slide {
-    background-color: var(--custom2-background-2);
-  }
-  //Slide background
-  .q-card {
-    background-color: var(--custom2-secondary);
-  }
-  //List background color, for menus etc...
-  .q-list {
-    background-color: var(--custom2-background-2);
-  }
-  //Toggle button color in off position
-  .q-toggle__thumb:after {
-    background: var(--custom2-toggle-off-position);
-  }
-  //Toggle button color in on position
+  // Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
 }
 
-.q-theme--custom3 {
-  --q-primary: var(--custom3-primary);
-  --q-secondary: var(--custom3-secondary);
-  --q-accent: var(--custom3-accent);
-  --q-positive: var(--custom3-positive);
-  --q-negative: var(--custom3-negative);
-  --q-info: var(--custom3-info);
-  --q-warning: var(--custom3-warning);
-  --q-white: var(--custom3-white);
-  --q-tab-icon: var(--custom3-tab-icon);
-  --q-carousel-control: var(--custom3-carousel-control);
-  background-color: var(--custom3-background-1);
-  // text color
-  color: var(--custom3-brown-text);
-  //header colors
+// Dark Theme Base Colors
+$dark-page: #030627; // This overrides Quasar's default dark page color
+$dark-primary: #3874db;
+$dark-secondary: #28293d;
+$dark-accent: #7a7a9c;
+$dark-positive: #3e8f5e;
+$dark-negative: #c54d57;
+$dark-info: #4b89aa;
+$dark-warning: #d98e44;
+$dark-background-1: #030627;
+$dark-background-2: #010322;
+$dark-list: #3c3e5c;
+$dark-carousel: #8b8f9f;
+$dark-tab-icon: #d7d9e0;
+
+// Dark theme
+.body--dark {
+  --q-primary: #{$dark-primary};
+  --q-secondary: #{$dark-secondary};
+  --q-accent: #{$dark-accent};
+  --q-positive: #{$dark-positive};
+  --q-negative: #{$dark-negative};
+  --q-info: #{$dark-info};
+  --q-warning: #{$dark-warning};
+  --q-background-1: #{$dark-background-1};
+  --q-background-2: #{$dark-background-2};
+  --q-white: #{$white};
+  --q-carousel-control: #{$dark-carousel};
+  --q-toggle-off: #{$toggle-off};
+  --q-list: #{$dark-list};
+  --q-tab-icon: #{$dark-tab-icon};
+  // Main background
+  background-color: var($dark-page);
+  // Text color
+  color: var(--q-white);
+
+  // Override default dark theme background
+  body.body--dark {
+    background: var($dark-page) !important;
+  }
+  // Header colors
   .q-header {
-    background-color: var(--custom3-background-2);
-    color: var(--custom3-brown-text); //text
+    background-color: var(--q-background-2);
+    color: var(--q-white);
   }
-  //Tab panel background
-  .q-tab-panels {
-    background-color: var(--custom3-background-2);
-  }
-  //Tab CSS
+  // Tab icon color
   .q-tab {
-    background-color: var(--custom3-background-2);
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border: 1px solid var(--custom3-secondary);
-  }
-  // Tab active background color
-  .q-tab--active {
-    background-color: color.scale($custom3-secondary, $lightness: -2%);
-  }
-  // Carousel control arrows and buttons
-  .q-carousel__control {
-    .q-btn {
-      &:before {
-        box-shadow: none; // Full screen button remove shadow
-      }
-      .q-icon {
-        color: var(--custom3-carousel-control);
-
-        &:before {
-          color: var(--custom3-carousel-control); // Full screen button color
-          box-shadow: none;
-        }
-      }
+    .q-icon {
+      color: var(--q-tab-icon) !important;
     }
   }
-  // Slide container background
-  .q-carousel__slide {
-    background-color: var(--custom3-background-2);
-  }
-  //Slide background
-  .q-card {
-    background-color: var(--custom3-secondary);
-  }
-  //List background color, for menus etc...
-  .q-list {
-    background-color: var(--custom3-background-2);
-  }
-  //Toggle button color in off position
-  .q-toggle__thumb:after {
-    background: var(--custom3-toggle-off-position);
-  }
-  //Toggle button color in on position
-  .q-toggle__inner--truthy .q-toggle__thumb:after {
-    background-color: currentColor;
-  }
-}
-
-.q-theme--custom4 {
-  --q-primary: var(--custom4-primary);
-  --q-secondary: var(--custom4-secondary);
-  --q-accent: var(--custom4-accent);
-  --q-positive: var(--custom4-positive);
-  --q-negative: var(--custom4-negative);
-  --q-info: var(--custom4-info);
-  --q-warning: var(--custom4-warning);
-  --q-white: var(--custom4-white);
-  --q-tab-icon: var(--custom4-tab-icon);
-  --q-carousel-control: var(--custom4-carousel-control);
-  background-color: var(--custom4-background-1);
-  // text color
-  color: var(--custom4-brown-text);
-  //header colors
-  .q-header {
-    background-color: var(--custom4-background-2);
-    color: var(--custom4-brown-text);
-  }
-  //Tab panel background
+  // Tab panel background
   .q-tab-panels {
-    background-color: var(--custom4-background-2);
+    background-color: var(--q-background-2);
   }
-  //Tab CSS
+  // Tab CSS
   .q-tab {
-    background-color: var(--custom4-background-2);
+    background-color: var(--q-background-2);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    border: 1px solid var(--custom4-secondary);
+    border: 1px solid var(--q-secondary);
   }
   // Tab active background color
   .q-tab--active {
-    background-color: color.scale($custom4-secondary, $lightness: -2%);
-  }
-  // Carousel control arrows and buttons
-  .q-carousel__control {
-    .q-btn {
-      &:before {
-        box-shadow: none; // Full screen button remove shadow
-      }
-      .q-icon {
-        color: var(--custom4-carousel-control);
-
-        &:before {
-          color: var(--custom4-carousel-control); // Full screen button color
-          box-shadow: none;
-        }
-      }
-    }
-  }
-  // Slide container background
-  .q-carousel__slide {
-    background-color: var(--custom4-background-2);
-  }
-  //Slide background
-  .q-card {
-    background-color: var(--custom4-secondary);
-  }
-  //List background color, for menus etc...
-  .q-list {
-    background-color: var(--custom4-background-2);
-  }
-  //Toggle button color in off position
-  .q-toggle__thumb:after {
-    background: var(--custom4-toggle-off-position);
-  }
-  //Toggle button color in on position
-  .q-toggle__inner--truthy .q-toggle__thumb:after {
-    background-color: currentColor;
-  }
-}
-
-.q-theme--custom5 {
-  --q-primary: var(--custom5-primary);
-  --q-secondary: var(--custom5-secondary);
-  --q-accent: var(--custom5-accent);
-  --q-positive: var(--custom5-positive);
-  --q-negative: var(--custom5-negative);
-  --q-info: var(--custom5-info);
-  --q-warning: var(--custom5-warning);
-  --q-white: var(--custom5-white);
-  --q-tab-icon: var(--custom5-tab-icon);
-  --q-carousel-control: var(--custom5-carousel-control);
-  background-color: var(--custom5-background-1);
-  //Text color
-  color: var(--custom5-brown-text);
-  //Header background color
-  .q-header {
-    background-color: var(--custom5-background-2);
-  }
-  //Tab panel background
-  .q-tab-panels {
-    background-color: var(--custom5-background-2);
-  }
-  //Tab CSS
-  .q-tab {
-    background-color: var(--custom5-background-2);
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border: 1px solid var(--custom5-secondary);
-  }
-  .q-tab--active {
-    background-color: color.scale($custom5-secondary, $lightness: 10%);
+    background-color: color.scale($dark-secondary, $lightness: 10%);
   }
   // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
       &:before {
-        box-shadow: none; // Full screen button remove shadow
+        box-shadow: none;
       }
       .q-icon {
-        color: var(--custom5-carousel-control);
-
+        color: var(--q-carousel-control);
         &:before {
-          color: var(--custom5-carousel-control); // Full screen button color
+          color: var(--q-carousel-control);
           box-shadow: none;
         }
       }
@@ -544,47 +210,43 @@ $custom5-list: #3c3e5c;
   }
   // Slide container background
   .q-carousel__slide {
-    background-color: var(--custom5-background-2);
-    color: var(--custom5-white);
+    background-color: var(--q-background-2);
+    color: var(--q-white);
   }
-  //Slide background
+  // Slide background
   .q-card {
-    background-color: var(--custom5-secondary);
-    color: var(--custom5-white);
-  }
-  //Expansion item (expand arrow)
-  .q-expansion-item__toggle-icon {
-    color: var(--custom5-white);
+    background-color: var(--q-secondary);
+    color: var(--q-white);
   }
-  //Input field text label color
+  // Input field text label color
   .q-field__label {
-    color: var(--custom5-white);
+    color: var(--q-white);
   }
-  //Input field icon color
+  // Input field icon color
   .q-field__control {
     .q-field__native::-webkit-calendar-picker-indicator {
       filter: invert(1);
     }
   }
-  //Input field placeholder text color
+  // Input field placeholder text color
   .q-placeholder {
-    color: var(--custom5-white);
+    color: var(--q-white);
   }
-  //List background color, for menus etc...
+  // List background color, for menus etc
   .q-list {
-    background-color: var(--custom5-list);
+    background-color: var(--q-list);
   }
-  //Menu text color
+  // Menu text color
   .q-menu {
     .q-item__section {
-      color: var(--custom5-white) !important;
+      color: var(--q-white) !important;
     }
   }
-  //Toggle button color in off position
+  // Toggle button color in off position
   .q-toggle__thumb:after {
-    background: var(--custom5-toggle-off-position);
+    background: var(--q-toggle-off);
   }
-  //Toggle button color in on position
+  // Toggle button color in on position
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
diff --git a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
index da33efa968..01ba929eef 100644
--- a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
@@ -1,48 +1,19 @@
 <template>
   <q-layout view="lHh Lpr lFf" class="centered-container">
-    <q-header elevated class="centered-container">
+    <q-header elevated>
       <q-toolbar>
         <q-toolbar-title>openWB</q-toolbar-title>
-        <q-btn dense flat round icon="menu">
-          <q-menu anchor="bottom right" self="top right">
-            <q-list dense>
-              <q-item clickable v-close-popup>
-                <q-item-section>Konfiguration</q-item-section>
-              </q-item>
-
-              <q-item clickable>
-                <q-item-section>Darstellung</q-item-section>
-                <q-menu anchor="top left" self="top right">
-                  <q-list dense>
-                    <q-item
-                      v-for="theme in [
-                        'light',
-                        'dark',
-                        'custom1',
-                        'custom2',
-                        'custom3',
-                        'custom4',
-                        'custom5',
-                      ]"
-                      :key="theme"
-                      clickable
-                      @click="setTheme(theme)"
-                      :active="currentTheme === theme"
-                      dense
-                    >
-                      <q-item-section>{{ theme }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-item>
-              <q-item clickable v-close-popup>
-                <q-item-section>Hilfe</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
+        <q-btn
+          flat
+          round
+          :icon="colorModeIcon"
+          @click="toggleColorMode()"
+          aria-label="Color-Mode"
+        />
       </q-toolbar>
     </q-header>
+
+    <!-- Page container that takes the remaining height -->
     <q-page-container class="column flex">
       <router-view />
     </q-page-container>
@@ -50,13 +21,24 @@
 </template>
 
 <script setup lang="ts">
-import { useThemeManager } from 'src/composables/useThemeManager.ts';
-
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+const $q = useQuasar();
 defineOptions({
   name: 'MainLayout',
 });
-
-const { currentTheme, setTheme } = useThemeManager();
+/**
+ * Computed property that returns the icon name for the color mode button.
+ */
+const colorModeIcon = computed(() => {
+  return $q.dark.isActive ? 'dark_mode' : 'light_mode';
+});
+/**
+ * Toggles the color mode of the application.
+ */
+function toggleColorMode() {
+  $q.dark.toggle();
+}
 </script>
 
 <style scoped>
@@ -64,9 +46,5 @@ const { currentTheme, setTheme } = useThemeManager();
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
-  position: relative;
-}
-.q-page-container {
-  padding-top: 0 !important;
 }
 </style>

From f161b4e7fab8c66ca5ed566acd334c13493f6c61 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 11:19:14 +0100
Subject: [PATCH 11/23] Add custom charge mode button for mobile view

---
 .../src/components/ChargePointModeButtons.vue | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
index 34f6aa5094..bff837c3d0 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-btn-group class="q-mt-md">
+  <q-btn-group class="q-mt-md" v-if="isDesktop">
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
@@ -9,16 +9,51 @@
       @click="chargeMode.value = mode.value"
     />
   </q-btn-group>
+  <div class="q-pt-md full-width" v-if="isMobile">
+    <q-btn-dropdown
+      transition-show="scale"
+      transition-hide="scale"
+      transition-duration="500"
+      class="full-width"
+      color="primary"
+      :label="currentModeLabel"
+      size="lg"
+      dropdown-icon="none"
+      cover
+      push
+    >
+      <q-list>
+        <template v-for="(mode, index) in chargeModes" :key="mode.value">
+          <q-item
+            clickable
+            v-close-popup
+            @click="chargeMode.value = mode.value"
+            :active="chargeMode.value === mode.value"
+            active-class="bg-primary text-white"
+          >
+            <q-item-section class="text-center text-weight-bold">
+              <q-item-label>{{ mode.label.toLocaleUpperCase() }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-separator v-if="index < chargeModes.length - 1" />
+        </template>
+      </q-list>
+    </q-btn-dropdown>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
+import { Platform } from 'quasar';
 
 const props = defineProps<{
   chargePointId: number;
 }>();
 
+const isDesktop = computed(() => Platform.is.desktop);
+const isMobile = computed(() => Platform.is.mobile);
+
 const mqttStore = useMqttStore();
 
 const chargeModes = [
@@ -32,4 +67,16 @@ const chargeModes = [
 const chargeMode = computed(() =>
   mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId),
 );
+
+const currentModeLabel = computed(
+  () =>
+    chargeModes.find((mode) => mode.value === chargeMode.value.value)?.label
+);
 </script>
+
+<style lang="scss" scoped>
+:deep(.q-btn-dropdown__arrow-container) {
+  width: 0;
+  padding: 0;
+}
+</style>

From f642594c5070705858344cce83b2babff3d345e4 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 11:20:31 +0100
Subject: [PATCH 12/23] Custom button styles for mobile view (larger buttons)

---
 .../components/ChargePointInstantSettings.vue | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue
index 0dd53bdfa2..8e39f93bc7 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue
@@ -82,3 +82,24 @@ const instantEnergy = computed(() =>
   ),
 );
 </script>
+
+<style lang="scss" scoped>
+body.desktop {
+  .q-btn-group {
+    .q-btn {
+      min-width: 100px !important;
+    }
+  }
+}
+
+body.mobile {
+  .q-btn-group {
+    .q-btn {
+      padding: 4px 8px;
+      font-size: 12px !important;
+      min-height: 30px;
+      min-width: 100px !important;
+    }
+  }
+}
+</style>

From d0eecd0bbb1376377208313807f5168ef58a7219 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 11:22:46 +0100
Subject: [PATCH 13/23] Dropdown menu instead of toggles for weekday selection

---
 .../ChargePointScheduledPlanDetails.vue       | 226 ++++++++++++------
 1 file changed, 152 insertions(+), 74 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 7d02eed62a..6cc899a6dc 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -63,8 +63,8 @@
         label="Ziel-Energy (kWh)"
         class="col"
       />
-      <div class="q-mb-md">
-        <div class="text-subtitle2 q-mb-sm q-mt-md">Wiederholungen</div>
+
+      <div class="q-mb-md q-mt-md">
         <q-btn-group spread>
           <q-btn
             size="sm"
@@ -78,80 +78,75 @@
             @click="planFrequency.value = 'daily'"
             label="Täglich"
           />
-          <q-btn
-            size="sm"
-            :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'"
-            @click="planFrequency.value = 'weekly'"
-            label="Wöchentlich"
-          />
-        </q-btn-group>
-
-        <div v-if="planFrequency.value === 'once'" class="q-mt-sm">
-          <q-input
-            v-model="planOnceDate.value"
-            type="date"
-            label="Datum"
-            :min="new Date().toISOString().split('T')[0]"
-          />
-        </div>
-
-        <!-- Weekly toggles -->
-        <div v-if="planFrequency.value === 'weekly'" class="q-mt-sm">
-          <!-- First row: Monday-Friday -->
-          <div class="row items-center q-gutter-sm q-mb-sm">
-            <div
-              v-for="(day, index) in weekDays.slice(0, 5)"
-              :key="day"
-              class="column items-center"
+          <div>
+            <q-btn
+              size="sm"
+              :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'"
+              @click="(e: Event) => showWeeklyMenu(e)"
+              label="Wöchentlich"
+              :model-value="weeklyMenuOpen && !isDialogScrolled"
+            />
+            <q-menu
+              v-model="weeklyMenuOpen"
+              anchor="bottom left"
+              transition-show="scale"
+              transition-hide="scale"
+              fit
             >
-              <div class="text-caption">{{ day }}</div>
-              <ToggleStandard
-                :model-value="selectedWeekDays[index]"
-                @update:model-value="
-                  (val: boolean) => {
-                    const newArray = [...selectedWeekDays];
-                    newArray[index] = val;
-                    selectedWeekDays = newArray;
-                  }
-                "
-                color="positive"
-                :size="'sm'"
-              />
-            </div>
+              <q-list>
+                <template v-for="(day, index) in weekDays" :key="day">
+                  <q-item
+                    clickable
+                    :active="selectedWeekDays[index]"
+                    active-class="bg-primary text-white"
+                    @click="toggleDay(index)"
+                  >
+                    <q-item-section class="text-center">{{
+                      day
+                    }}</q-item-section>
+                  </q-item>
+                  <q-separator v-if="index < weekDays.length - 1" />
+                </template>
+              </q-list>
+            </q-menu>
           </div>
+        </q-btn-group>
 
-          <!-- Second row: Saturday-Sunday -->
-          <div class="row items-center q-gutter-sm">
-            <div
-              v-for="(day, index) in weekDays.slice(5)"
-              :key="day"
-              class="column items-center"
-            >
-              <div class="text-caption">{{ day }}</div>
-              <ToggleStandard
-                :model-value="selectedWeekDays[index + 5]"
-                @update:model-value="
-                  (val: boolean) => {
-                    const newArray = [...selectedWeekDays];
-                    newArray[index + 5] = val;
-                    selectedWeekDays = newArray;
-                  }
-                "
-                color="positive"
-                :size="'sm'"
-              />
-            </div>
+        <div v-if="planFrequency.value === 'weekly'" class="q-mt-md">
+          <div class="row items-center">
+            <q-icon name="calendar_month" class="q-mr-sm" size="sm" />
+            <div class="text-bold">Werktage:</div>
+          </div>
+          <div class="row q-mt-xs">
+            <div class="text-subtitle2">{{ getSelectedWeekdaysText }}</div>
+          </div>
+          <div class="row items-center q-mt-md">
+            <q-icon name="calendar_month" class="q-mr-sm" size="sm" />
+            <div class="text-bold">Wochenendtag:</div>
+          </div>
+          <div class="row q-mt-xs">
+            <div class="text-subtitle2">{{ getSelectedWeekendText }}</div>
           </div>
         </div>
-        <div class="q-mt-lg row justify-end">
-          <q-btn
-            size="sm"
-            icon="delete"
-            :color="'primary'"
-            label="Löschen"
-            @click="deletePlan(props.chargePointId, props.plan.id)"
-          />
-        </div>
+      </div>
+
+      <div v-if="planFrequency.value === 'once'" class="q-mt-sm">
+        <q-input
+          v-model="planOnceDate.value"
+          type="date"
+          label="Datum"
+          :min="new Date().toISOString().split('T')[0]"
+        />
+      </div>
+
+      <div class="q-mt-lg row justify-end">
+        <q-btn
+          size="sm"
+          icon="delete"
+          :color="'primary'"
+          label="Löschen"
+          @click="deletePlan(props.chargePointId, props.plan.id)"
+        />
       </div>
     </q-card-section>
   </q-card>
@@ -161,7 +156,7 @@
 import { useMqttStore } from 'src/stores/mqtt-store';
 import SliderStandard from './SliderStandard.vue';
 import ToggleStandard from './ToggleStandard.vue';
-import { computed } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
 
 const props = defineProps<{
@@ -171,7 +166,58 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
-const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+const weeklyMenuOpen = ref<boolean>(false);
+
+// Inject boolean value from the parent component
+const isDialogScrolled = inject('isDialogScrolled', ref(false));
+
+watch(
+  isDialogScrolled,
+  () => {
+    weeklyMenuOpen.value = false;
+  },
+  {
+    immediate: true,
+    flush: 'sync',
+  },
+);
+
+const weekDays = [
+  'Montag',
+  'Dienstag',
+  'Mittwoch',
+  'Donnerstag',
+  'Freitag',
+  'Samstag',
+  'Sonntag',
+];
+
+const getSelectedWeekdaysText = computed(() => {
+  return weekDays
+    .slice(0, 5)
+    .filter((_, index) => selectedWeekDays.value[index])
+    .join(', ') || 'Keine Werktage ausgewählt';
+});
+
+const getSelectedWeekendText = computed(() => {
+  return weekDays
+    .slice(5)
+    .filter((_, index) => selectedWeekDays.value[index + 5])
+    .join(', ') || 'Keine Wochenendtag ausgewählt';
+});
+
+const showWeeklyMenu = (event: Event) => {
+  isDialogScrolled.value = false;
+  planFrequency.value.value = 'weekly';
+  weeklyMenuOpen.value = !weeklyMenuOpen.value;
+  event.stopPropagation();
+};
+
+const toggleDay = (index: number) => {
+  const newArray = [...selectedWeekDays.value];
+  newArray[index] = !newArray[index];
+  selectedWeekDays.value = newArray;
+};
 
 const planActive = computed({
   get() {
@@ -237,7 +283,7 @@ const planOnceDate = computed(() =>
   ),
 );
 
-const selectedWeekDays = computed({
+const selectedWeekDays = computed<boolean[]>({
   get() {
     return (
       mqttStore.vehicleScheduledChargingPlanWeeklyDays(
@@ -271,3 +317,35 @@ const planSocScheduled = computed(() =>
 const deletePlan = (chargePointId: number, planId: string) =>
   mqttStore.vehicleDeleteScheduledChargingPlan(props.chargePointId, planId);
 </script>
+
+<style lang="scss" scoped>
+.q-btn-group > div > .q-btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+body.desktop {
+  .q-btn-group {
+    .q-btn {
+      min-width: 100px !important;
+    }
+  }
+}
+
+body.mobile {
+  .q-btn {
+    padding: 4px 8px;
+    font-size: 12px !important;
+    min-height: 30px;
+    min-width: 100px !important;
+  }
+  .q-btn-group {
+    .q-btn {
+      padding: 4px 8px;
+      font-size: 12px !important;
+      min-height: 30px;
+      min-width: 100px !important;
+    }
+  }
+}
+</style>

From d3df6bacffcc97817356e03927bc98a300e20bf0 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 11:30:28 +0100
Subject: [PATCH 14/23] Make settings dialog full screen in mobile view, pass
 scroll behavior to child component

---
 .../src/components/ChargePointSettings.vue    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
index ae56ccfbdd..0352fa8389 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
@@ -1,12 +1,16 @@
 <template>
   <q-dialog
     v-model="visible"
-    :maximized="$q.screen.width < 385"
+    :maximized="$q.platform.is.mobile"
     :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
   >
-    <q-card>
+    <q-card @scroll.capture="handleScroll">
       <q-card-section>
-        <div class="text-h6">Einstellungen {{ name }}</div>
+        <div class="row">
+          <div class="text-h6">Einstellungen {{ name }}</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </div>
       </q-card-section>
       <q-card-section class="q-pt-none">
         <div class="row items-center q-ma-none q-pa-none">
@@ -36,18 +40,15 @@
         <div class="row items-center q-ma-none q-pa-none no-wrap">
           <ChargePointModeButtons :charge-point-id="props.chargePointId" />
         </div>
-
         <!-- ///////////////// Instant charge settings /////////////////// -->
         <div v-if="chargeMode.value === 'instant_charging'">
           <ChargePointInstantSettings :charge-point-id="props.chargePointId" />
         </div>
-
         <!-- ///////////////// PV charge settings /////////////////// -->
         <div v-if="chargeMode.value === 'pv_charging'">
           <ChargePointPVSettings :charge-point-id="props.chargePointId" />
         </div>
         <!-- /////////////////  scheduled charging settings /////////////////// -->
-
         <div v-if="chargeMode.value === 'scheduled_charging'">
           <ChargePointScheduledSettings
             :charge-point-id="props.chargePointId"
@@ -62,9 +63,9 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar';
+import { useQuasar, QDialog } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, provide } from 'vue';
 import ChargePointInstantSettings from './ChargePointInstantSettings.vue';
 import ChargePointPVSettings from './ChargePointPVSettings.vue';
 import ChargePointScheduledSettings from './ChargePointScheduledSettings.vue';
@@ -81,6 +82,15 @@ const props = defineProps<{
   modelValue: boolean;
 }>();
 
+const isDialogScrolled = ref(false);
+
+const handleScroll = () => {
+  isDialogScrolled.value = true;
+  console.log('Dialog scrolled');
+};
+
+provide('isDialogScrolled', isDialogScrolled);
+
 const emit = defineEmits<{
   'update:model-value': [value: boolean];
 }>();

From d8943251849238e3bdd960302ed8cf2f097b04db Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 11:32:02 +0100
Subject: [PATCH 15/23] Minor fixes, formatting

---
 .../src/components/ChargePointModeButtons.vue |  2 +-
 .../ChargePointScheduledPlanDetails.vue       | 20 +++++++++++--------
 .../source/src/components/SliderDouble.vue    |  2 --
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
index bff837c3d0..2bd861f46a 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointModeButtons.vue
@@ -70,7 +70,7 @@ const chargeMode = computed(() =>
 
 const currentModeLabel = computed(
   () =>
-    chargeModes.find((mode) => mode.value === chargeMode.value.value)?.label
+    chargeModes.find((mode) => mode.value === chargeMode.value.value)?.label,
 );
 </script>
 
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 6cc899a6dc..490f387bc8 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -193,17 +193,21 @@ const weekDays = [
 ];
 
 const getSelectedWeekdaysText = computed(() => {
-  return weekDays
-    .slice(0, 5)
-    .filter((_, index) => selectedWeekDays.value[index])
-    .join(', ') || 'Keine Werktage ausgewählt';
+  return (
+    weekDays
+      .slice(0, 5)
+      .filter((_, index) => selectedWeekDays.value[index])
+      .join(', ') || 'Keine Werktage ausgewählt'
+  );
 });
 
 const getSelectedWeekendText = computed(() => {
-  return weekDays
-    .slice(5)
-    .filter((_, index) => selectedWeekDays.value[index + 5])
-    .join(', ') || 'Keine Wochenendtag ausgewählt';
+  return (
+    weekDays
+      .slice(5)
+      .filter((_, index) => selectedWeekDays.value[index + 5])
+      .join(', ') || 'Keine Wochenendtag ausgewählt'
+  );
 });
 
 const showWeeklyMenu = (event: Event) => {
diff --git a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
index 7dae854acb..360d975462 100644
--- a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
@@ -35,7 +35,6 @@
       <div class="col">
         <div>Ladestand</div>
         <div>{{ currentCharge }}%</div>
-        <div>--- km</div>
       </div>
       <div class="col text-center">
         <div>Zielzeit</div>
@@ -44,7 +43,6 @@
       <div class="col text-right">
         <div>Ladeziel</div>
         <div>{{ targetCharge }}%</div>
-        <div>--- km</div>
       </div>
     </div>
   </div>

From fba682609359ca813c105d678963a240b32cbcdd Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 6 Dec 2024 14:01:25 +0100
Subject: [PATCH 16/23] Only display battery carousel if there is more than one
 battery

---
 .../web_themes/standard/source/src/pages/TestPage.vue       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
index 0bddf4cee5..8beb4c8785 100644
--- a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
@@ -30,7 +30,7 @@
         <div class="row justify-center">
           <BatteryOverview />
         </div>
-        <BaseCarousel :items="batteryIds">
+        <BaseCarousel :items="batteryIds" v-if="showBatteryCarousel">
           <template #item="{ item }">
             <BatteryInformation :battery-id="item" />
           </template>
@@ -59,6 +59,10 @@ defineOptions({
 
 const tab = ref<string>('charge-points');
 
+const showBatteryCarousel = computed(() => {
+  return mqttStore.batteryIds.length > 1
+})
+
 const mqttStore = useMqttStore();
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const batteryIds = computed(() => mqttStore.batteryIds);

From eb7d5998cc5c42128a157bc855f7bc51d5846f6a Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 08:41:20 +0100
Subject: [PATCH 17/23] Rename function

---
 .../source/src/components/ChargePointScheduledPlanDetails.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 490f387bc8..4ecb049af5 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -99,7 +99,7 @@
                     clickable
                     :active="selectedWeekDays[index]"
                     active-class="bg-primary text-white"
-                    @click="toggleDay(index)"
+                    @click="selectDay(index)"
                   >
                     <q-item-section class="text-center">{{
                       day
@@ -217,7 +217,7 @@ const showWeeklyMenu = (event: Event) => {
   event.stopPropagation();
 };
 
-const toggleDay = (index: number) => {
+const selectDay = (index: number) => {
   const newArray = [...selectedWeekDays.value];
   newArray[index] = !newArray[index];
   selectedWeekDays.value = newArray;

From 4cb5c7a769db09c5cb3b4e3ec463f08319b57479 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 09:19:29 +0100
Subject: [PATCH 18/23] Adjust scheduled plan button size for mobile

---
 .../src/components/ChargePointScheduledPlanHeader.vue  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
index 28ad53f7a2..34c63d152b 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="row items-center justify-between text-subtitle2 full-width no-wrap"
+    class="row items-center justify-between text-subtitle2 full-width no-wrap height"
   >
     <div class="row" @click="planActive = !planActive">
       <q-icon
@@ -83,3 +83,11 @@ const planActive = computed({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+body.mobile {
+  .height {
+    height: 2.5em;
+  }
+}
+</style>

From 9469e3531329235dcf5a1f65dda30940f73d9e9e Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 09:21:51 +0100
Subject: [PATCH 19/23] Add CSS for different browser types

---
 .../source/src/components/BaseCarousel.vue    | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
index 669c4e707e..fcbab3bd96 100644
--- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
@@ -90,4 +90,29 @@ watch(
 .carousel-height {
   min-height: fit-content;
 }
+
+/* firefox */
+@-moz-document url-prefix() {
+  .carousel-height {
+    min-height: 0;
+    height: fit-content;
+  }
+  .carousel-slide {
+    padding: 0;
+  }
+}
+
+/* Safari */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  _::-webkit-full-page-media,
+  _:future,
+  :root .carousel-height {
+    height: fit-content;
+  }
+  _::-webkit-full-page-media,
+  _:future,
+  :root .carousel-slide {
+    height: fit-content;
+  }
+}
 </style>

From 1a2602b687461e44eeba6df73bca7e5cf5023d48 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 09:22:25 +0100
Subject: [PATCH 20/23] Formatting

---
 .../modules/web_themes/standard/source/src/pages/TestPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
index 8beb4c8785..f5c8f12d08 100644
--- a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
@@ -60,8 +60,8 @@ defineOptions({
 const tab = ref<string>('charge-points');
 
 const showBatteryCarousel = computed(() => {
-  return mqttStore.batteryIds.length > 1
-})
+  return mqttStore.batteryIds.length > 1;
+});
 
 const mqttStore = useMqttStore();
 const chargePointIds = computed(() => mqttStore.chargePointIds);

From 6e6c91e8ffa92dd2011abdcdd1de18bc0e52f4a9 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 11:48:33 +0100
Subject: [PATCH 21/23] Fix base carousel CSS classes

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

diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
index fcbab3bd96..923745a22d 100644
--- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
@@ -8,7 +8,7 @@
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems && $q.screen.gt.xs"
-    class="full-width carousel-height q-mt-md"
+    class="carousel-height q-mt-md"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent

From 4da99e9f331c037611e4a6a04949995add5a4afb Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 11:49:31 +0100
Subject: [PATCH 22/23] Set charge target based on charge mode

---
 .../standard/source/src/components/ChargePoint.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
index b6f4032176..4fc96799de 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
@@ -100,10 +100,16 @@ const connectedVehicleSoc = computed(() =>
   ),
 );
 
-const targetSoc = computed(
-  () =>
-    mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value?.soc,
-);
+const targetSoc = computed<number | undefined>(() => {
+  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId).value;
+  if (chargeMode === 'scheduled_charging') {
+    return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value?.soc;
+  } else if (chargeMode === 'instant_charging') {
+    return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(props.chargePointId)?.value;
+  } else {
+    return undefined;
+  }
+});
 
 const targetTime = computed(() => {
   const target = mqttStore.vehicleScheduledChargingTarget(

From 35645fc09b575bfab578f157b961733a8f05222b Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 9 Dec 2024 12:16:01 +0100
Subject: [PATCH 23/23] Take instant charge mode limits into account when
 displaying soc

---
 .../source/src/components/ChargePoint.vue       | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
index 4fc96799de..80d5424fca 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
@@ -101,11 +101,20 @@ const connectedVehicleSoc = computed(() =>
 );
 
 const targetSoc = computed<number | undefined>(() => {
-  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId).value;
+  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(
+    props.chargePointId,
+  ).value;
+  const instantLimitMode =
+    mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+      props.chargePointId,
+    ).value;
   if (chargeMode === 'scheduled_charging') {
-    return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value?.soc;
-  } else if (chargeMode === 'instant_charging') {
-    return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(props.chargePointId)?.value;
+    return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
+      ?.soc;
+  } else if (chargeMode === 'instant_charging' && instantLimitMode === 'soc') {
+    return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
+      props.chargePointId,
+    )?.value;
   } else {
     return undefined;
   }