Koala user defined custom colors by Brett-S-OWB · Pull Request #3361 · openWB/core

Brett-S-OWB · 2026-05-11T14:06:02Z

Benutzerdefinierte Farben im Koala Theme implementiert und konsistent über mehrere UI-Komponenten hinweg integriert.

Die Farben können nun individuell für verschiedene Entitäten (z. B. Ladepunkte, Fahrzeuge, Komponenten) definiert werden (in ui-settings project) und werden automatisch in der gesamten Oberfläche verwendet.

Diagramme

Unterstützung benutzerdefinierter Farben im:
- Energy Flow Chart
- History Chart
- Daily Totals Chart

Daily Totals Chart

Erweiterung der Batterie-Anzeige:
- Dropdown bei mehreren Batterien
- Trennlinie zwischen einzelnen Einträgen
Erweiterung der Ladepunkt-Anzeige:
- Trennlinie zwischen einzelnen Einträgen
Verbesserung der Darstellung:
- Ellipsis (Textverkürzung) für lange Namen bei Batterien und Ladepunkten

Karten (Carousel)
Benutzerdefinierte Farben wurden ergänzt für:

Charge Point Cards
Vehicle Cards
Battery Cards

Tabellenansichten

Integration der Farben in:
- Charge Point Tabelle
- Vehicle Tabelle
Darstellung als visuelle Farbmarkierung pro Zeile

Änderungen an BaseTable
Die bisherige Implementierung der Tabelle hatte zwei unterschiedliche Render-Pfade:
(ChargePointInformation.vue)

rowExpandable = true (z. B. kleine Screens) → BaseTable hat die komplette Tabellenzeile selbst gerendert (#body Slot)
rowExpandable = false (z. B. große Screens) → QTable hat das Rendering übernommen (Default-Verhalten)
Gleichzeitig wurden Inhalte über body-cell-* Slots vom Parent bereitgestellt.

Ergebnis: Zwei unterschiedliche Rendering-Mechanismen je nach Screen-Größe, was zu Inkonsistenzen bei Layout, Spacing und Styling geführt hat.

Problem
Für die neue Funktion einer benutzerdefinierten Farbanzeige pro Zeile (farbiger Indikator / Farbstreifen) war ein konsistenter Zugriff auf die gesamte Zeilenstruktur notwendig.
Durch die unterschiedlichen Render-Pfade war es nicht möglich, diesen Farbindikator zuverlässig und einheitlich darzustellen.

Lösung
Die Tabellenstruktur wurde vereinheitlicht:

BaseTable rendert jetzt immer die komplette Tabellenzeile (#body Slot wird immer verwendet)
wird zentral in BaseTable erzeugt
Parent-Komponenten liefern nur noch den Zelleninhalt über Slots (body-cell-*)
-Klare Trennung:
Struktur & Layout → BaseTable
Inhalt → Parent

Neue Funktion: Farbindikator pro Zeile
Im Zuge der Umstellung wurde ein benutzerdefinierter Farbstreifen pro Tabellenzeile eingeführt:

Farbe wird über rowColor vom Parent geliefert
Darstellung erfolgt zentral in BaseTable
Umsetzung über ein background-image (Gradient), um:
- vertikale Zentrierung
- Abstand oben/unten
- Abstand zum linken Rand

Co-authored-by: Copilot <[email protected]>

catch corrupt log files on update Co-authored-by: Copilot <[email protected]>

Brett-S-OWB · 2026-05-15T16:53:33Z

Energy-Flow-Chart: Die SVG-Icons wurden ursprünglich als eigene Vue-Komponenten gekapselt, um sie im Flowchart einfärben zu können. Dies führte jedoch zu unnötig komplexer und tief verschachtelter Struktur.

Als Alternative wurde ein SVG-Sprite geprüft, jedoch verworfen, da die Icons dabei nicht mehr als einzelne, leicht bearbeitbare Dateien im Projekt vorliegen und die Handhabung (insbesondere für dynamische Anpassungen) unflexibel ist.

Stattdessen wurde auf den Vite SVG Loader umgestellt. Dadurch können SVGs direkt als Komponenten importiert werden (?component), bleiben als einzelne Dateien erhalten und lassen sich weiterhin einfach über currentColor dynamisch einfärben. Das reduziert die Komplexität, verbessert Wartbarkeit und Lesbarkeit.

fix redefinition of "fill"

benderl

Die Änderungen an den drei Dateien des Cards Display Themes sind aus Versehen rein gekommen?

Brett-S-OWB · 2026-05-18T11:33:51Z

Die Änderungen an den drei Dateien des Cards Display Themes sind aus Versehen rein gekommen?

Ja das sind sie, ich hatte sie gleichseitig offen, können wir ignorieren.

benderl · 2026-05-19T07:14:22Z

Die Änderungen an den drei Dateien des Cards Display Themes sind aus Versehen rein gekommen?

Ja das sind sie, ich hatte sie gleichseitig offen, können wir ignorieren.

Dann entferne die doch bitte aus dem PR.

Brett-S-OWB · 2026-05-19T07:43:07Z

Method Namen korrigiert

* Koala - Add custom colors - charge points * Koala - Add custom colors - battery * Daily totals - multiple batteries dropdown - icons: user defined colors * Add user defined colors to history chart * Add user defined colors to energy flow chart * Add user defined colors to vehicle cards * Add user defined colors to tables (vehicle & charge points) * Use vite-svg-loader for svg icons * Make CSS consistent of all components --------- Co-authored-by: Lutz Bender <[email protected]> Co-authored-by: LKuemmel <[email protected]> Co-authored-by: benderl <[email protected]> Co-authored-by: Copilot <[email protected]>

* custom vehicle and charge point colors * custom component colors * update config step 1 * fix upgrade config * fix component setup * extend setdata for new vehicle topic * use bootstrap primary color for charge points * update logfiles * rename color constants * upgrade method * update dynsec roles * update dynsec role acls for vehicle color * Apply suggestions from code review Co-authored-by: Copilot <[email protected]> * fix missing color references * Update packages/helpermodules/update_config.py catch corrupt log files on update Co-authored-by: Copilot <[email protected]> * formatting * add logging in ComponentSetup * Koala user defined custom colors (#3361) * Koala - Add custom colors - charge points * Koala - Add custom colors - battery * Daily totals - multiple batteries dropdown - icons: user defined colors * Add user defined colors to history chart * Add user defined colors to energy flow chart * Add user defined colors to vehicle cards * Add user defined colors to tables (vehicle & charge points) * Use vite-svg-loader for svg icons * Make CSS consistent of all components --------- Co-authored-by: Lutz Bender <[email protected]> Co-authored-by: LKuemmel <[email protected]> Co-authored-by: benderl <[email protected]> Co-authored-by: Copilot <[email protected]> * fix typescript errors, formatting * update dependencies * Koala new design custom colors (#3500) * Flow chart new design * DailyTotals new design * fix battery color in flow diagram * History chart new design * Flow chart drop shadows for Safari * Flow chart CCS for Safari * Charge point cards new design * Charge point & vehicle select buttons update to new design * update icon color * Vehicle Card new design * Battery card new design * Update table background * custom color card border left * Change carousel button background color * new energy flow animation * fix custom symbol color - Daily totals * formatting * Carousel control CSS global in quasar variables file * update carousel CSS * update dropdown menu CSS * new design CSS for button groups * flow chart resize soc clip to prevent overlap * formatting * update card background - dark theme * update battery mode buttons to new design * apply new design to dark theme * Adjust CSS * update global CSS * reorder global CSS color variables * cleanup global color variables light and dark themes * remove unused colors * Global CSS consolidate CSS selectors * Scheduled /Time plan buttons / plan details info-box - new design * Centralize message/info box CSS in global file * update jsdoc for store * Koala design custom colors settings build (#3512) * Flow chart new design * DailyTotals new design * fix battery color in flow diagram * History chart new design * Flow chart drop shadows for Safari * Flow chart CCS for Safari * Charge point cards new design * Charge point & vehicle select buttons update to new design * update icon color * Vehicle Card new design * Battery card new design * Update table background * custom color card border left * Change carousel button background color * new energy flow animation * fix custom symbol color - Daily totals * formatting * Carousel control CSS global in quasar variables file * update carousel CSS * update dropdown menu CSS * new design CSS for button groups * flow chart resize soc clip to prevent overlap * formatting * update card background - dark theme * update battery mode buttons to new design * apply new design to dark theme * Adjust CSS * update global CSS * reorder global CSS color variables * cleanup global color variables light and dark themes * remove unused colors * Global CSS consolidate CSS selectors * Scheduled /Time plan buttons / plan details info-box - new design * Centralize message/info box CSS in global file * update jsdoc for store * setting build custom colors * New design Koala build (#3518) * Flow chart new design * DailyTotals new design * fix battery color in flow diagram * History chart new design * Flow chart drop shadows for Safari * Flow chart CCS for Safari * Charge point cards new design * Charge point & vehicle select buttons update to new design * update icon color * Vehicle Card new design * Battery card new design * Update table background * custom color card border left * Change carousel button background color * new energy flow animation * fix custom symbol color - Daily totals * formatting * Carousel control CSS global in quasar variables file * update carousel CSS * update dropdown menu CSS * new design CSS for button groups * flow chart resize soc clip to prevent overlap * formatting * update card background - dark theme * update battery mode buttons to new design * apply new design to dark theme * Adjust CSS * update global CSS * reorder global CSS color variables * cleanup global color variables light and dark themes * remove unused colors * Global CSS consolidate CSS selectors * Scheduled /Time plan buttons / plan details info-box - new design * Centralize message/info box CSS in global file * update jsdoc for store * setting build custom colors * New design Koala build * remove user defined battery color * Always use Standard colors for PV, EVU, no user defined colors * Charge points revert back to standard color when no user defined color * update charge point default color * Update global CSS colors - new design * Update home icon color - remove q-diagram-color where not required * Make power and charge mode text same color as icons * Energy flow chart - responsive column spacing * Energy flow chart - Set font - Roboto * Energy flow chart - Change clip path for label animation * Daily totals - update secondary counter color * DailyTotals - Secondary counter custom color * reinstate custom colors for all components * Standard color displayed in charts * remove redundant store function * daily totals add dropdown for multiple pv systems * use lighter blue primary color in dark theme * centralize logic for secondary components configured * formatting * centralize settings UI colors --------- Co-authored-by: Lutz Bender <[email protected]> Co-authored-by: LKuemmel <[email protected]> Co-authored-by: benderl <[email protected]> Co-authored-by: Copilot <[email protected]>

* Koala - Add custom colors - charge points * Koala - Add custom colors - battery * Daily totals - multiple batteries dropdown - icons: user defined colors * Add user defined colors to history chart * Add user defined colors to energy flow chart * Add user defined colors to vehicle cards * Add user defined colors to tables (vehicle & charge points) * Use vite-svg-loader for svg icons * Make CSS consistent of all components --------- Co-authored-by: Lutz Bender <[email protected]> Co-authored-by: LKuemmel <[email protected]> Co-authored-by: benderl <[email protected]> Co-authored-by: Copilot <[email protected]>

* custom vehicle and charge point colors * custom component colors * update config step 1 * fix upgrade config * fix component setup * extend setdata for new vehicle topic * use bootstrap primary color for charge points * update logfiles * rename color constants * upgrade method * update dynsec roles * update dynsec role acls for vehicle color * Apply suggestions from code review Co-authored-by: Copilot <[email protected]> * fix missing color references * Update packages/helpermodules/update_config.py catch corrupt log files on update Co-authored-by: Copilot <[email protected]> * formatting * add logging in ComponentSetup * Koala user defined custom colors (#3361) * Koala - Add custom colors - charge points * Koala - Add custom colors - battery * Daily totals - multiple batteries dropdown - icons: user defined colors * Add user defined colors to history chart * Add user defined colors to energy flow chart * Add user defined colors to vehicle cards * Add user defined colors to tables (vehicle & charge points) * Use vite-svg-loader for svg icons * Make CSS consistent of all components --------- Co-authored-by: Lutz Bender <[email protected]> Co-authored-by: LKuemmel <[email protected]> Co-authored-by: benderl <[email protected]> Co-authored-by: Copilot <[email protected]> * fix typescript errors, formatting * update dependencies * Koala new design custom colors (#3500) * Flow chart new design * DailyTotals new design * fix battery color in flow diagram * History chart new design * Flow chart drop shadows for Safari * Flow chart CCS for Safari * Charge point cards new design * Charge point & vehicle select buttons update to new design * update icon color * Vehicle Card new design * Battery card new design * Update table background * custom color card border left * Change carousel button background color * new energy flow animation * fix custom symbol color - Daily totals * formatting * Carousel control CSS global in quasar variables file * update carousel CSS * update dropdown menu CSS * new design CSS for button groups * flow chart resize soc clip to prevent overlap * formatting * update card background - dark theme * update battery mode buttons to new design * apply new design to dark theme * Adjust CSS * update global CSS * reorder global CSS color variables * cleanup global color variables light and dark themes * remove unused colors * Global CSS consolidate CSS selectors * Scheduled /Time plan buttons / plan details info-box - new design * Centralize message/info box CSS in global file * update jsdoc for store * Koala design custom colors settings build (#3512) * Flow chart new design * DailyTotals new design * fix battery color in flow diagram * History chart new design * Flow chart drop shadows for Safari * Flow chart CCS for Safari * Charge point cards new design * Charge point & vehicle select buttons update to new design * update icon color * Vehicle Card new design * Battery card new design * Update table background * custom color card border left * Change carousel button background color * new energy flow animation * fix custom symbol color - Daily totals * formatting * Carousel control CSS global in quasar variables file * update carousel CSS * update dropdown menu CSS * new design CSS for button groups * flow chart resize soc clip to prevent overlap * formatting * update card background - dark theme * update battery mode buttons to new design * apply new design to dark theme * Adjust CSS * update global CSS * reorder global CSS color variables * cleanup global color variables light and dark themes * remove unused colors * Global CSS consolidate CSS selectors * Scheduled /Time plan buttons / plan details info-box - new design * Centralize message/info box CSS in global file * update jsdoc for store * setting build custom colors * New design Koala build (#3518) * Flow chart new design * DailyTotals new design * fix battery color in flow diagram * History chart new design * Flow chart drop shadows for Safari * Flow chart CCS for Safari * Charge point cards new design * Charge point & vehicle select buttons update to new design * update icon color * Vehicle Card new design * Battery card new design * Update table background * custom color card border left * Change carousel button background color * new energy flow animation * fix custom symbol color - Daily totals * formatting * Carousel control CSS global in quasar variables file * update carousel CSS * update dropdown menu CSS * new design CSS for button groups * flow chart resize soc clip to prevent overlap * formatting * update card background - dark theme * update battery mode buttons to new design * apply new design to dark theme * Adjust CSS * update global CSS * reorder global CSS color variables * cleanup global color variables light and dark themes * remove unused colors * Global CSS consolidate CSS selectors * Scheduled /Time plan buttons / plan details info-box - new design * Centralize message/info box CSS in global file * update jsdoc for store * setting build custom colors * New design Koala build * remove user defined battery color * Always use Standard colors for PV, EVU, no user defined colors * Charge points revert back to standard color when no user defined color * update charge point default color * Update global CSS colors - new design * Update home icon color - remove q-diagram-color where not required * Make power and charge mode text same color as icons * Energy flow chart - responsive column spacing * Energy flow chart - Set font - Roboto * Energy flow chart - Change clip path for label animation * Daily totals - update secondary counter color * DailyTotals - Secondary counter custom color * reinstate custom colors for all components * Standard color displayed in charts * remove redundant store function * daily totals add dropdown for multiple pv systems * use lighter blue primary color in dark theme * centralize logic for secondary components configured * formatting * centralize settings UI colors --------- Co-authored-by: Lutz Bender <[email protected]> Co-authored-by: LKuemmel <[email protected]> Co-authored-by: benderl <[email protected]> Co-authored-by: Copilot <[email protected]>

benderl and others added 30 commits May 11, 2026 12:05

custom vehicle and charge point colors

009b956

custom component colors

3f56adb

update config step 1

fa87713

fix upgrade config

443cb00

fix component setup

bc2f8a0

extend setdata for new vehicle topic

29a8c40

use bootstrap primary color for charge points

b3c983b

update logfiles

d266bcf

rename color constants

6cbddd9

upgrade method

e76417a

update dynsec roles

475bf16

update dynsec role acls for vehicle color

f29cd37

Apply suggestions from code review

ca43641

Co-authored-by: Copilot <[email protected]>

fix missing color references

1a2be37

Update packages/helpermodules/update_config.py

91149fa

catch corrupt log files on update Co-authored-by: Copilot <[email protected]>

formatting

e3f899c

add logging in ComponentSetup

2f1c65d

increment dynsec version

0d9c488

update logfiles

34d5040

Koala - Add custom colors - charge points

7a70435

Koala - Add custom colors - battery

52bbdba

Daily totals - multiple batteries dropdown - icons: user defined colors

41e0c4a

Add SVG icons as vue components

f8c3499

formatting

513fec7

formatting icon

80cbe98

Add user defined colors to history chart

67023a2

Add user defined colors to energy flow chart

bc6d4cd

energy flow chart move css to style section

ec12a71

Add user defined colors to vehicle cards

5672b8f

Add border between all expansion items/components

71d0aea

Brett-S-OWB added 13 commits May 15, 2026 14:23

Refactor battery and pv color methods in store

5cab557

Battery & pv colors use same pattern in store

0522e11

Update store method getValue

3fcfb79

remove unnecessary null in model

868dc23

Rename getComponentAttributes to getComponentConfiguration

5acd34b

Rename chargePointUserDefinedColor -- chargePointColor

c5f215e

Remove unnecessary exports

874da0e

Move style information to style section of component

11d65e5

Make CSS consistent of all components

b266186

Fix counter icon

201c3a2

Rename methods

e65e1a3

remove redundant code

a554666

Rename methods

5f0db35

Update owbVehicle.svg

2b27e56

fix redefinition of "fill"

benderl approved these changes May 18, 2026

View reviewed changes

Comment thread packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts Resolved

benderl force-pushed the feature-custom-colors branch from 0d9c488 to 9c6cce0 Compare May 18, 2026 10:41

Merge branch 'feature-custom-colors' into custom-colors-bv

8f33a3b

benderl requested changes May 18, 2026

View reviewed changes

Correct method names

0bb4c92

benderl approved these changes May 19, 2026

View reviewed changes

benderl merged commit 5935e0a into openWB:feature-custom-colors May 19, 2026
1 check passed

Navigation Menu

Repository navigation

Koala user defined custom colors - #3361

Koala user defined custom colors#3361
benderl merged 54 commits into
openWB:feature-custom-colorsfrom
Brett-S-OWB:custom-colors-bv

Brett-S-OWB commented May 11, 2026

Uh oh!

Brett-S-OWB commented May 15, 2026

Uh oh!

Uh oh!

benderl left a comment

Uh oh!

Brett-S-OWB commented May 18, 2026

Uh oh!

benderl commented May 19, 2026

Uh oh!

Brett-S-OWB commented May 19, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Brett-S-OWB commented May 11, 2026

Uh oh!

Brett-S-OWB commented May 15, 2026

Uh oh!

Uh oh!

benderl left a comment

Choose a reason for hiding this comment

Uh oh!

Brett-S-OWB commented May 18, 2026

Uh oh!

benderl commented May 19, 2026

Uh oh!

Brett-S-OWB commented May 19, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants