From 88a603175d709e7e409070c63a08636855b6d1b0 Mon Sep 17 00:00:00 2001 From: BrettS Date: Fri, 19 Dec 2025 13:52:22 +0100 Subject: [PATCH 1/3] Adjust Battery soc fill color in flow chart - more contrast --- .../components/charts/energyFlowChart/EnergyFlowChart.vue | 3 ++- .../web_themes/koala/source/src/css/quasar.variables.scss | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue index ea1200dd8a..22162b516d 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue @@ -992,9 +992,10 @@ text .fill-dark { } .battery circle:not(.soc) { - fill: var(--q-battery-fill); + fill: var(--q-battery-fill-flow-diagram); } + :root { .home text { fill: var(--q-brown-text); /* Brown text in light theme */ 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 0c0d3f7f87..6886b9a555 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 @@ -46,9 +46,10 @@ $pv-fill: #90ee9033; $battery: #ba7128; $battery-stroke: #ba7128; $battery-fill: #ba712833; +$battery-fill-flow-diagram: #c6a583; $charge-point-stroke: #5c93d1; $charge-point-fill: #5c93d14D; -// Light theme (default) +// Light theme (default). #c6a583 :root { --q-primary: #{$primary}; --q-secondary: #{$secondary}; @@ -74,6 +75,7 @@ $charge-point-fill: #5c93d14D; --q-pv-fill: #{$pv-fill}; --q-battery-stroke: #{$battery-stroke}; --q-battery-fill: #{$battery-fill}; + --q-battery-fill-flow-diagram: #{$battery-fill-flow-diagram}; --q-charge-point-stroke: #{$charge-point-stroke}; --q-charge-point-fill: #{$charge-point-fill}; @@ -255,6 +257,7 @@ $dark-background-2: #010322; $dark-list: rgb(40, 42, 62); $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; +$battery-fill-flow-diagram: #b2885f; $dark-daily-totals-grid-fill: #a13a41; $dark-daily-totals-grid-stroke: #da959a; $dark-daily-totals-battery-fill: #b97a1f; @@ -292,6 +295,7 @@ $dark-daily-totals-chargepoint-fill: #254a8c; --q-battery-fill: #{$battery-fill}; --q-charge-point-stroke: #{$charge-point-stroke}; --q-charge-point-fill: #{$charge-point-fill}; + --q-battery-fill-flow-diagram: #{$battery-fill-flow-diagram}; --q-dark-daily-totals-grid-fill: #{$dark-daily-totals-grid-fill}; --q-dark-daily-totals-grid-stroke: #{$dark-daily-totals-grid-stroke}; --q-dark-daily-totals-battery-fill: #{$dark-daily-totals-battery-fill}; From 9ea8eef9a69f69c9152c01682636188941d5a8ac Mon Sep 17 00:00:00 2001 From: benderl Date: Mon, 22 Dec 2025 08:31:50 +0100 Subject: [PATCH 2/3] Update quasar.variables.scss --- .../web_themes/koala/source/src/css/quasar.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6886b9a555..dcb7348fef 100644 --- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss +++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss @@ -49,7 +49,7 @@ $battery-fill: #ba712833; $battery-fill-flow-diagram: #c6a583; $charge-point-stroke: #5c93d1; $charge-point-fill: #5c93d14D; -// Light theme (default). #c6a583 +// Light theme (default) :root { --q-primary: #{$primary}; --q-secondary: #{$secondary}; From 18fe0d9424046a3484b8225ea53e2dbacc544514 Mon Sep 17 00:00:00 2001 From: benderl Date: Mon, 22 Dec 2025 08:32:31 +0100 Subject: [PATCH 3/3] Apply suggestion from @benderl --- .../src/components/charts/energyFlowChart/EnergyFlowChart.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue index 22162b516d..6288983368 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue @@ -995,7 +995,6 @@ text .fill-dark { fill: var(--q-battery-fill-flow-diagram); } - :root { .home text { fill: var(--q-brown-text); /* Brown text in light theme */