From daa368a1f8443bb82d01df6091a5199df321e66b Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 11:43:27 +0200 Subject: [PATCH 1/7] remove border from daily-totals chart --- .../source/src/components/charts/dailyTotals/DailyTotals.vue | 3 +-- .../web_themes/koala/source/src/css/quasar.variables.scss | 3 +++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue index 5cb5eb473d..a460ff999f 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue @@ -587,12 +587,11 @@ watch( border-radius: 0.5rem; background: var(--q-card-background); filter: drop-shadow(0 0 0.15rem var(--q-shadow)); - border: 0.125rem solid var(--q-primary); margin-bottom: 0.25rem; } .sub-row { - border-top: 0.12rem solid var(--q-primary); + border-top: 0.12rem solid var(--q-grey-4); } .rotate-180 { transform: rotate(180deg); diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss index 6d975cd66d..7760019cba 100644 --- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss +++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss @@ -35,6 +35,7 @@ $background-2: #eeeef3; $brown-text: #524f57; $white: #ffffff; $grey: #9e9e9e; // Quasar's default grey +$grey-4: #EEEEEE; // Quasar's default grey-4 $toggle-off: #e0e0e0; $grid-stroke: #dc1629; $grid-fill: #efb6bc33; @@ -72,6 +73,7 @@ $table-hover: #f9f8f8; --q-text: #{$brown-text}; --q-white: #{$white}; --q-grey: #{$grey}; + --q-grey-4: #{$grey-4}; --q-carousel-control: #{$primary}; --q-toggle-off: #{$toggle-off}; --q-grid-fill: #{$grid-fill}; @@ -256,6 +258,7 @@ $dark-table-hover: #ffffff12; --q-text: #{$white}; --q-white: #{$white}; --q-grey: #{$grey}; + --q-grey-4: #{$grey-4}; --q-carousel-control: #{$dark-primary}; --q-toggle-off: #{$toggle-off}; --q-grid-fill: #{$grid-fill}; From 3eb5497647094451298ccd71c1ba7b124396ca30 Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 11:59:59 +0200 Subject: [PATCH 2/7] edit navigation / control buttons --- .../koala/source/src/css/quasar.variables.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss index 7760019cba..fd0afc65d4 100644 --- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss +++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss @@ -394,6 +394,18 @@ $dark-table-hover: #ffffff12; .q-carousel__control > .q-btn { background: var(--q-card-background) !important; color: var(--q-carousel-control) !important; + // Soft shadow matching the cards (same token as .card's drop-shadow). + filter: drop-shadow(0 0 0.15rem var(--q-shadow)); + + // Tinted hover so the controls stay distinguishable from the slide + // background (arrows, fullscreen and legend buttons). + &:hover { + background: color-mix( + in srgb, + var(--q-carousel-control) 12%, + var(--q-card-background) + ) !important; + } } // Every control button (arrows, dots, fullscreen): strip Quasar's default From 011f01412628dbf604fe159fc5e7d4a9f4243ceb Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 14:36:42 +0200 Subject: [PATCH 3/7] Edit vehicle dropdown list to include vehicle color --- .../components/ChargePointVehicleSelect.vue | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue index a7a8da4f42..2ef1a4dcac 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue @@ -29,6 +29,11 @@ v-close-popup @click="connectedVehicle = vehicle" :active="connectedVehicle?.id === vehicle.id" + class="vehicle-item" + :style="{ + '--vehicle-color': + mqttStore.vehicleColor(vehicle.id) || 'var(--q-vehicle-stroke)', + }" > {{ @@ -63,6 +68,11 @@ dense :active="connectedVehicle?.id === vehicle.id" @click="connectedVehicle = vehicle" + class="vehicle-item vehicle-item--desktop" + :style="{ + '--vehicle-color': + mqttStore.vehicleColor(vehicle.id) || 'var(--q-vehicle-stroke)', + }" > {{ @@ -110,4 +120,21 @@ const vehicles = computed(() => mqttStore.vehicleList); .vehicle-select-dropdown-menu .q-item--active { color: var(--q-primary) !important; } +.vehicle-item { + position: relative; +} +.vehicle-item::before { + content: ''; + position: absolute; + left: 0; + top: 0.2rem; + bottom: 0.2rem; + width: 4px; + border-radius: 2px; + background: var(--vehicle-color, var(--q-vehicle-stroke)); +} +/* Reduce default Quasar item left padding on desktop */ +.vehicle-item--desktop { + padding-left: 0.6rem; +} From 33ce52f32eb00e5195f3771773644be89ac68a7c Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 16:21:17 +0200 Subject: [PATCH 4/7] update quasar color palette --- .../source/src/css/quasar.variables.scss | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss index fd0afc65d4..00720c3a82 100644 --- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss +++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss @@ -22,7 +22,7 @@ // $warning: #F2C037; ///////////////////////////////////////////////////////////////////// // Default Light Theme Base Colors -$primary: #153357; +$primary: #00336e; $secondary: #d2d2d7; $accent: #546e7a; $positive: #66bd7a; @@ -31,24 +31,25 @@ $info: #7dc5d4; $warning: #d98e44; $background: #ffffff; $background-1: #e3e3ec; -$background-2: #eeeef3; -$brown-text: #524f57; +$background-2: #eceef3; +$light-text: #2c3440; $white: #ffffff; $grey: #9e9e9e; // Quasar's default grey -$grey-4: #EEEEEE; // Quasar's default grey-4 +$grey-4: #e0e0e0; // Quasar's default grey-4 +$grey-7: #757575; // Quasar's default grey-7 $toggle-off: #e0e0e0; -$grid-stroke: #dc1629; +$grid-stroke: #ff3b40; $grid-fill: #efb6bc33; $secondary-counter-stroke: #ffa9a8; $secondary-counter-fill: #ffa9a833; -$home-stroke: #717171; +$home-stroke: #5a6472; $home-fill: #949aa133; -$pv-stroke: #66bd7a; +$pv-stroke: #15c45a; $pv-fill: #90ee9033; $battery: #ba7128; -$battery-stroke: #ff9740; +$battery-stroke: #ff9100; $battery-fill: #ba712833; -$charge-point-stroke: #153357; +$charge-point-stroke: #00336E; $charge-point-fill: #5c93d14d; $vehicle-stroke: #38bbb4; $vehicle-fill: #4f99af; @@ -70,10 +71,11 @@ $table-hover: #f9f8f8; --q-card-background: #{$background}; --q-list: color-mix(in srgb, var(--q-grey) 5%, transparent); --q-shadow: #{$secondary}; - --q-text: #{$brown-text}; + --q-text: #{$light-text}; --q-white: #{$white}; --q-grey: #{$grey}; --q-grey-4: #{$grey-4}; + --q-grey-7: #{$grey-7}; --q-carousel-control: #{$primary}; --q-toggle-off: #{$toggle-off}; --q-grid-fill: #{$grid-fill}; @@ -93,7 +95,7 @@ $table-hover: #f9f8f8; --q-charge-plan-link-button: #{$charge-plan-link-button}; --q-diagram-icon: #{$diagram-icon}; --q-table-hover: #{$table-hover}; - --q-tab-icon: #{$primary}; + --q-tab-icon: #{$grey-7}; // Main background background-color: var(--q-background-1); @@ -223,9 +225,9 @@ $table-hover: #f9f8f8; } } // Dark Theme Base Colors -$dark-page: #18191a; // This overrides Quasar's default dark page color - outer background -$dark-primary: #3874db; -$dark-secondary: #3a3b3c; //cards - tabs background tables +$dark-page: #242526; // This overrides Quasar's default dark page color - outer background +$dark-primary: #2aa8ff; +$dark-secondary: #3b3b3d; //cards - tabs background tables $dark-shadow: #7a7c80; // shadow color for dark theme $dark-accent: #546e7a; $dark-positive: #3e8f5e; @@ -235,8 +237,9 @@ $dark-warning: #d98e44; $dark-background: #242526; $dark-background-1: #242526; $dark-background-2: #242526; +$dark-text: #e8eaee; $dark-tab-icon: #d7d9e0; -$dark-charge-point-stroke: #3874db; +$dark-charge-point-stroke: #2aa8ff; $dark-charge-plan-link-button: #75787a; $dark-table-hover: #ffffff12; @@ -255,10 +258,11 @@ $dark-table-hover: #ffffff12; --q-card-background: #{$dark-secondary}; --q-list: #{$dark-secondary}; // drawer, list background --q-shadow: #{$dark-shadow}; - --q-text: #{$white}; + --q-text: #{$dark-text}; --q-white: #{$white}; --q-grey: #{$grey}; --q-grey-4: #{$grey-4}; + --q-grey-7: #{$grey-7}; --q-carousel-control: #{$dark-primary}; --q-toggle-off: #{$toggle-off}; --q-grid-fill: #{$grid-fill}; @@ -278,7 +282,7 @@ $dark-table-hover: #ffffff12; --q-charge-plan-link-button: #{$dark-charge-plan-link-button}; --q-diagram-icon: #{$white}; --q-table-hover: #{$dark-table-hover}; - --q-tab-icon: #{$dark-tab-icon}; + --q-tab-icon: #{$grey-7}; // Main background background-color: $dark-page; @@ -344,6 +348,9 @@ $dark-table-hover: #ffffff12; .q-tab .q-icon { color: var(--q-tab-icon) !important; } +.q-tab--active .q-icon { + color: var(--q-primary) !important; +} // Theme-aware text helper — all themes (value via --q-text). .theme-text { From c8cf804ab6b17595793ef684991136c8cf5edc91 Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 16:40:10 +0200 Subject: [PATCH 5/7] add default colors to table view --- .../koala/source/src/components/ChargePointInformation.vue | 2 +- .../koala/source/src/components/VehicleInformation.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue index c67ccdad3d..3d5c2c264c 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue @@ -189,7 +189,7 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => { // typecasting necessary as chargePointChargingCurrent has a union type in store and needs to be narrowed to string const current = mqttStore.chargePointChargingCurrent(id) as string; const powerColumn = ''; - const color = mqttStore.chargePointColor(id) || undefined; + const color = mqttStore.chargePointColor(id) || 'var(--q-charge-point-stroke)'; return { id, name, diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue index 008c7c9997..b31d2b0178 100644 --- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue +++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue @@ -103,7 +103,7 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => { const model = info?.model || 'keine Angabe'; const soc = mqttStore.vehicleSocValue(id); const vehicleSocValue = soc !== undefined ? `${Math.round(soc)}%` : '–'; - const color = mqttStore.vehicleColor(id) || undefined; + const color = mqttStore.vehicleColor(id) || 'var(--q-vehicle-stroke)'; return { id, name, From 8a781d62e545396fc3be56a244324ee6f9ce3fe3 Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 17:20:45 +0200 Subject: [PATCH 6/7] fix dark theme background --- .../koala/source/src/css/quasar.variables.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss index 00720c3a82..6dcbe53559 100644 --- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss +++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss @@ -225,7 +225,6 @@ $table-hover: #f9f8f8; } } // Dark Theme Base Colors -$dark-page: #242526; // This overrides Quasar's default dark page color - outer background $dark-primary: #2aa8ff; $dark-secondary: #3b3b3d; //cards - tabs background tables $dark-shadow: #7a7c80; // shadow color for dark theme @@ -235,8 +234,13 @@ $dark-negative: #c54d57; $dark-info: #4b89aa; $dark-warning: #d98e44; $dark-background: #242526; -$dark-background-1: #242526; -$dark-background-2: #242526; +$dark-background-1: #2c2c2e; // outer back color (visible on the sides) +$dark-background-2: #242526; // inner main page color +// Quasar paints body.body--dark with var(--q-dark-page), a higher-specificity +// rule we can't override from .body--dark. It derives --q-dark-page from this +// SCSS $dark-page at compile time (in Quasar's own :root), so pointing it at the +// outer color renders the side/back background — no extra CSS var in our list. +$dark-page: $dark-background-1; $dark-text: #e8eaee; $dark-tab-icon: #d7d9e0; $dark-charge-point-stroke: #2aa8ff; @@ -285,7 +289,7 @@ $dark-table-hover: #ffffff12; --q-tab-icon: #{$grey-7}; // Main background - background-color: $dark-page; + background-color: var(--q-background-1); // Text color color: var(--q-white); // Header colors From 638413dcb0aaad154272c50be71f06367b0a8812 Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Mon, 29 Jun 2026 17:26:21 +0200 Subject: [PATCH 7/7] remove redundant props --- .../web_themes/koala/source/src/pages/IndexPage.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue index 36f6bd0ca0..f41073f613 100644 --- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue +++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue @@ -9,16 +9,16 @@
- + - + - +