Repository navigation
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Diese PR aktualisiert das Koala-Web-Theme auf ein überarbeitetes, moderneres Design und erweitert die Unterstützung für benutzerdefinierte Farben (u. a. konsistentere Theme-Variablen, Card/List-Hintergründe, Outline-Buttons und überarbeitete Chart-/Diagramm-Styles inkl. Energiefluss-Animation).
Changes:
- Überarbeitung der globalen Theme-Variablen und Einführung/Normalisierung zusätzlicher CSS Custom Properties (z. B.
--q-background,--q-card-background,--q-text,--q-shadow,--q-table-hover) inkl. Light/Dark-Äquivalente. - UI-Anpassungen in mehreren Komponenten (mehr Outline-/Flat-Buttons/Chips, vereinheitlichte Card-Radien/Shadow, Dropdown/Active-States).
- Energiefluss- und Diagramm-Styles modernisiert (u. a. neue Flow-Animation mit „Dots“, SoC-Gradienten/Shadow, Chart-Container-Card-Look).
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts | Anpassung der Farblogik für Battery-Colors (Custom-Color vs. Default). |
| packages/modules/web_themes/koala/source/src/css/quasar.variables.scss | Große Theme-Überarbeitung: neue CSS-Variablen, globale Styles für Cards/Lists/Toggles/Carousel, Light/Dark-Angleichungen. |
| packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue | Chips auf Outline-Variante umgestellt. |
| packages/modules/web_themes/koala/source/src/components/VehicleCard.vue | Card-Radius erhöht. |
| packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue | Legend-List transparent gemacht, damit Chart-Container-Hintergrund sichtbar bleibt. |
| packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue | Chart-Container als „Card“ (Background/Radius/Shadow) gestylt. |
| packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue | Energiefluss-Diagramm modernisiert (Flow-Animation, Shadow, SoC-Fill/Gradient, Color-Handling). |
| packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue | DailyTotals-Layout/Styles vereinheitlicht (Card-Look, Shadow, Padding) und Color-Handling angepasst. |
| packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue | Quasar control-color entfernt (Steuerung über Theme-CSS). |
| packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue | Dropdown-Design modernisiert (Outline, Active-State-Styles, Icon-Farben). |
| packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanDetails.vue | Button-Gruppen auf Outline/Active-Outline-Logik umgestellt. |
| packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanButton.vue | Scheduled-Plan-Button visuell neu (Flat + eigener State-/Tint-Stil). |
| packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue | Outline-Buttons + Info-Box auf tinted-box umgestellt. |
| packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue | Scheduled-Plan-Button auf tinted-box (positive/negative Accent) umgestellt. |
| packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue | Outline-Button-Gruppen + Active-Outline-Logik. |
| packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue | Outline-Button-Gruppe + Active-State-Styling für Dropdown-Menü. |
| packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue | Outline-Button-Gruppe + Active-Outline-Logik. |
| packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue | Outline-Button-Gruppe + Active-Outline-Logik. |
| packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue | Outline-Button-Gruppe + vereinheitlichte Outline-Logik. |
| packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue | Card-Radius erhöht. |
| packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue | Button-Gruppe auf Outline + Active-Outline-Logik. |
| packages/modules/web_themes/koala/source/src/components/BatteryCard.vue | Card-Radius erhöht. |
| packages/modules/web_themes/koala/source/src/components/BaseMessage.vue | Message-Bar auf tinted-box-Pattern umgestellt (Theme-aware Colors). |
| packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue | Quasar control-color entfernt (Steuerung über Theme-CSS). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
2926
to
2930
| * @returns string | ||
| */ | ||
| const batteryColor = computed(() => { | ||
| return (batteryId: number): string => { | ||
| return (batteryId: number): string | null => { | ||
| const DEFAULT_COLOR = '#ffc107'; |
Contributor
Author
There was a problem hiding this comment.
JSDoc wurde angepasst
benderl
pushed a commit
that referenced
this pull request
Jun 25, 2026
* 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
benderl
added a commit
that referenced
this pull request
Jun 25, 2026
* 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
pushed a commit
that referenced
this pull request
Jul 2, 2026
* 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
benderl
added a commit
that referenced
this pull request
Jul 2, 2026
* 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]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implementiert ein überarbeitetes Design für das Koala-Theme und ermöglicht Benutzern die Auswahl benutzerdefinierter Farben für verschiedene Komponenten.
Änderungen:
Weißer Hintergrund für Karten
Mehr Outline-Buttons statt gefüllter Buttons
Allgemein moderneres Look & Feel
Energiefluss-Diagramm: Animierte Punkte entlang der Verbindungslinien ersetzen die bisherigen gestrichelten Linien
Diagramme mit modernerem Design aktualisiert
Dark Theme entsprechend dem neuen Design aktualisiert