From 08e79280bb42c9ab4db62af40e763c17377db432 Mon Sep 17 00:00:00 2001 From: BrettS Date: Wed, 17 Dec 2025 10:39:17 +0100 Subject: [PATCH 1/8] light background darker black cards --- .../koala/source/src/css/quasar.variables.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 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 a6003d2408..d9ce2e078c 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 @@ -245,17 +245,17 @@ $charge-point-fill: #5c93d14d; } } // Dark Theme Base Colors -$dark-page: #000000; // This overrides Quasar's default dark page color +$dark-page: #373736; // This overrides Quasar's default dark page color - outer background $dark-primary: #3874db; -$dark-secondary: #28293d; +$dark-secondary: #2e2f3c; //cards - tabs background tables $dark-accent: #546e7a; $dark-positive: #3e8f5e; $dark-negative: #c54d57; $dark-info: #4b89aa; $dark-warning: #d98e44; -$dark-background-1: #030627; -$dark-background-2: #010322; -$dark-list: rgb(40, 42, 62); +$dark-background-1: #3D3D3C; // app background +$dark-background-2: #3D3D3C; // app background 2 +$dark-list: rgb(63, 64, 77); $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; $battery-fill-flow-diagram: #b2885f; From 1a0517d36cbd92805a8318ac2d66bfaa72ff51ad Mon Sep 17 00:00:00 2001 From: BrettS Date: Wed, 17 Dec 2025 11:42:12 +0100 Subject: [PATCH 2/8] Facebook dark color scheme --- .../koala/source/src/css/quasar.variables.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 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 d9ce2e078c..d1ae134e7c 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 @@ -245,17 +245,17 @@ $charge-point-fill: #5c93d14d; } } // Dark Theme Base Colors -$dark-page: #373736; // This overrides Quasar's default dark page color - outer background +$dark-page: #18191A; // This overrides Quasar's default dark page color - outer background $dark-primary: #3874db; -$dark-secondary: #2e2f3c; //cards - tabs background tables +$dark-secondary: #3A3B3C; //cards - tabs background tables $dark-accent: #546e7a; $dark-positive: #3e8f5e; $dark-negative: #c54d57; $dark-info: #4b89aa; $dark-warning: #d98e44; -$dark-background-1: #3D3D3C; // app background -$dark-background-2: #3D3D3C; // app background 2 -$dark-list: rgb(63, 64, 77); +$dark-background-1: #242526; // app background +$dark-background-2: #242526; // app background 2 +$dark-list: #3A3B3C; // drawer, list background $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; $battery-fill-flow-diagram: #b2885f; @@ -315,6 +315,7 @@ $dark-daily-totals-chargepoint-fill: #254a8c; // Header colors .q-header { color: var(--q-white); + background-color: var(--q-secondary); } // Drawer background .q-drawer { @@ -328,7 +329,7 @@ $dark-daily-totals-chargepoint-fill: #254a8c; } // Tab active background color .q-tab--active { - background-color: color.scale($dark-secondary, $lightness: 10%); + background-color: color.scale($dark-secondary); } // Carousel control arrows and buttons .q-carousel__control { From 4b4355d0042a30d92b9793aa1c8d45347a5de193 Mon Sep 17 00:00:00 2001 From: BrettS Date: Wed, 17 Dec 2025 12:00:31 +0100 Subject: [PATCH 3/8] Iphone dark color scheme --- .../web_themes/koala/source/src/css/quasar.variables.scss | 8 ++++---- 1 file changed, 4 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 d1ae134e7c..d07fc05469 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 @@ -245,17 +245,17 @@ $charge-point-fill: #5c93d14d; } } // Dark Theme Base Colors -$dark-page: #18191A; // This overrides Quasar's default dark page color - outer background +$dark-page: #000000; // This overrides Quasar's default dark page color - outer background $dark-primary: #3874db; -$dark-secondary: #3A3B3C; //cards - tabs background tables +$dark-secondary: #212124; //cards - tabs background tables $dark-accent: #546e7a; $dark-positive: #3e8f5e; $dark-negative: #c54d57; $dark-info: #4b89aa; $dark-warning: #d98e44; $dark-background-1: #242526; // app background -$dark-background-2: #242526; // app background 2 -$dark-list: #3A3B3C; // drawer, list background +$dark-background-2: #161618; // app background 2 +$dark-list: #212124; // drawer, list background $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; $battery-fill-flow-diagram: #b2885f; From 00077b6b5be2fe25bc1e9c8e995dd321fc34a4a5 Mon Sep 17 00:00:00 2001 From: BrettS Date: Wed, 17 Dec 2025 12:13:37 +0100 Subject: [PATCH 4/8] Youtube dark color scheme --- .../web_themes/koala/source/src/css/quasar.variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 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 d07fc05469..d667b99eb3 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 @@ -247,7 +247,7 @@ $charge-point-fill: #5c93d14d; // Dark Theme Base Colors $dark-page: #000000; // This overrides Quasar's default dark page color - outer background $dark-primary: #3874db; -$dark-secondary: #212124; //cards - tabs background tables +$dark-secondary: #3D3D3D; //cards - tabs background tables $dark-accent: #546e7a; $dark-positive: #3e8f5e; $dark-negative: #c54d57; @@ -255,7 +255,7 @@ $dark-info: #4b89aa; $dark-warning: #d98e44; $dark-background-1: #242526; // app background $dark-background-2: #161618; // app background 2 -$dark-list: #212124; // drawer, list background +$dark-list: #212121; // drawer, list background $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; $battery-fill-flow-diagram: #b2885f; From 988ea5ea70bfcab2db89f840018e225c200b5954 Mon Sep 17 00:00:00 2001 From: BrettS Date: Wed, 18 Feb 2026 17:06:52 +0100 Subject: [PATCH 5/8] Facebook color scheme selected --- .../web_themes/koala/source/src/css/quasar.variables.scss | 8 ++++---- 1 file changed, 4 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 d667b99eb3..d1ae134e7c 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 @@ -245,17 +245,17 @@ $charge-point-fill: #5c93d14d; } } // Dark Theme Base Colors -$dark-page: #000000; // This overrides Quasar's default dark page color - outer background +$dark-page: #18191A; // This overrides Quasar's default dark page color - outer background $dark-primary: #3874db; -$dark-secondary: #3D3D3D; //cards - tabs background tables +$dark-secondary: #3A3B3C; //cards - tabs background tables $dark-accent: #546e7a; $dark-positive: #3e8f5e; $dark-negative: #c54d57; $dark-info: #4b89aa; $dark-warning: #d98e44; $dark-background-1: #242526; // app background -$dark-background-2: #161618; // app background 2 -$dark-list: #212121; // drawer, list background +$dark-background-2: #242526; // app background 2 +$dark-list: #3A3B3C; // drawer, list background $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; $battery-fill-flow-diagram: #b2885f; From fc8552a6050146679c5c6a634c51b0eca3d361aa Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 19 Feb 2026 15:36:10 +0100 Subject: [PATCH 6/8] remove color.scale from active tab --- .../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 d1ae134e7c..36be984131 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 @@ -329,7 +329,7 @@ $dark-daily-totals-chargepoint-fill: #254a8c; } // Tab active background color .q-tab--active { - background-color: color.scale($dark-secondary); + background-color: $dark-secondary; } // Carousel control arrows and buttons .q-carousel__control { From 6e792124ee16347cbf0d9958a499e714f0f71ff7 Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 19 Feb 2026 15:41:37 +0100 Subject: [PATCH 7/8] make hex numbers uniform --- .../web_themes/koala/source/src/css/quasar.variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 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 36be984131..851421eacf 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 @@ -245,9 +245,9 @@ $charge-point-fill: #5c93d14d; } } // Dark Theme Base Colors -$dark-page: #18191A; // This overrides Quasar's default dark page color - outer background +$dark-page: #18191a; // This overrides Quasar's default dark page color - outer background $dark-primary: #3874db; -$dark-secondary: #3A3B3C; //cards - tabs background tables +$dark-secondary: #3a3b3c; //cards - tabs background tables $dark-accent: #546e7a; $dark-positive: #3e8f5e; $dark-negative: #c54d57; @@ -255,7 +255,7 @@ $dark-info: #4b89aa; $dark-warning: #d98e44; $dark-background-1: #242526; // app background $dark-background-2: #242526; // app background 2 -$dark-list: #3A3B3C; // drawer, list background +$dark-list: #3a3b3c; // drawer, list background $dark-carousel: #8b8f9f; $dark-tab-icon: #d7d9e0; $battery-fill-flow-diagram: #b2885f; From 7ab4873c8e345d03cb57ec5c3457dd41def3f4cb Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 19 Feb 2026 16:03:21 +0100 Subject: [PATCH 8/8] use css variable for active tab color --- .../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 851421eacf..02d3d645f0 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 @@ -329,7 +329,7 @@ $dark-daily-totals-chargepoint-fill: #254a8c; } // Tab active background color .q-tab--active { - background-color: $dark-secondary; + background-color: var(--q-secondary); } // Carousel control arrows and buttons .q-carousel__control {