From 91bb2ddcc473271ce1af56b3ea8a47f4f77617ad Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Sun, 12 Dec 2021 14:10:30 +0100
Subject: [PATCH] Make energy graph colors brighter in dark mode (#10789)

---
 .../cards/energy/hui-energy-gas-graph-card.ts | 13 ++-
 .../energy/hui-energy-solar-graph-card.ts     | 47 +++++----
 .../energy/hui-energy-sources-table-card.ts   | 96 ++++++++++++-------
 .../energy/hui-energy-usage-graph-card.ts     | 20 ++--
 4 files changed, 107 insertions(+), 69 deletions(-)

diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
index 5e19672487..da21cc8004 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
@@ -26,7 +26,7 @@ import {
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
 import {
   EnergyData,
   getEnergyDataCollection,
@@ -247,10 +247,15 @@ export class HuiEnergyGasGraphCard
       const data: ChartDataset<"bar" | "line">[] = [];
       const entity = this.hass.states[source.stat_energy_from];
 
-      const borderColor =
+      const modifiedColor =
         idx > 0
-          ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx)))
-          : gasColor;
+          ? this.hass.themes.darkMode
+            ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
+            : labDarken(rgb2lab(hex2rgb(gasColor)), idx)
+          : undefined;
+      const borderColor = modifiedColor
+        ? rgb2hex(lab2rgb(modifiedColor))
+        : gasColor;
 
       let prevValue: number | null = null;
       let prevStart: string | null = null;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
index 98305f7c2a..584da90561 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
@@ -1,9 +1,3 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import memoizeOne from "memoize-one";
-import { classMap } from "lit/directives/class-map";
-import "../../../../components/ha-card";
 import {
   ChartData,
   ChartDataset,
@@ -17,16 +11,26 @@ import {
   isToday,
   startOfToday,
 } from "date-fns";
-import { HomeAssistant } from "../../../../types";
-import { LovelaceCard } from "../../types";
-import { EnergySolarGraphCardConfig } from "../types";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import {
   hex2rgb,
   lab2rgb,
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
+import { formatTime } from "../../../../common/datetime/format_time";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import {
+  formatNumber,
+  numberFormatToLocale,
+} from "../../../../common/number/format_number";
+import "../../../../components/chart/ha-chart-base";
+import "../../../../components/ha-card";
 import {
   EnergyData,
   EnergySolarForecasts,
@@ -34,15 +38,11 @@ import {
   getEnergySolarForecasts,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import "../../../../components/chart/ha-chart-base";
-import {
-  formatNumber,
-  numberFormatToLocale,
-} from "../../../../common/number/format_number";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { FrontendLocaleData } from "../../../../data/translation";
-import { formatTime } from "../../../../common/datetime/format_time";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCard } from "../../types";
+import { EnergySolarGraphCardConfig } from "../types";
 
 @customElement("hui-energy-solar-graph-card")
 export class HuiEnergySolarGraphCard
@@ -258,10 +258,15 @@ export class HuiEnergySolarGraphCard
       const data: ChartDataset<"bar" | "line">[] = [];
       const entity = this.hass.states[source.stat_energy_from];
 
-      const borderColor =
+      const modifiedColor =
         idx > 0
-          ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx)))
-          : solarColor;
+          ? this.hass.themes.darkMode
+            ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
+            : labDarken(rgb2lab(hex2rgb(solarColor)), idx)
+          : undefined;
+      const borderColor = modifiedColor
+        ? rgb2hex(lab2rgb(modifiedColor))
+        : solarColor;
 
       let prevValue: number | null = null;
       let prevStart: string | null = null;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
index bd6a0f3756..5c1b21a992 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
@@ -17,7 +17,7 @@ import {
   rgb2lab,
   hex2rgb,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/statistics-chart";
@@ -170,12 +170,17 @@ export class HuiEnergySourcesTableCard
                     this._data!.stats[source.stat_energy_from]
                   ) || 0;
                 totalSolar += energy;
-                const color =
+
+                const modifiedColor =
                   idx > 0
-                    ? rgb2hex(
-                        lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))
-                      )
-                    : solarColor;
+                    ? this.hass.themes.darkMode
+                      ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
+                      : labDarken(rgb2lab(hex2rgb(solarColor)), idx)
+                    : undefined;
+                const color = modifiedColor
+                  ? rgb2hex(lab2rgb(modifiedColor))
+                  : solarColor;
+
                 return html`<tr class="mdc-data-table__row">
                   <td class="mdc-data-table__cell cell-bullet">
                     <div
@@ -229,22 +234,26 @@ export class HuiEnergySourcesTableCard
                     this._data!.stats[source.stat_energy_to]
                   ) || 0;
                 totalBattery += energyFrom - energyTo;
-                const fromColor =
+
+                const modifiedFromColor =
                   idx > 0
-                    ? rgb2hex(
-                        lab2rgb(
-                          labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
-                        )
-                      )
-                    : batteryFromColor;
-                const toColor =
+                    ? this.hass.themes.darkMode
+                      ? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx)
+                      : labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
+                    : undefined;
+                const fromColor = modifiedFromColor
+                  ? rgb2hex(lab2rgb(modifiedFromColor))
+                  : batteryFromColor;
+                const modifiedToColor =
                   idx > 0
-                    ? rgb2hex(
-                        lab2rgb(
-                          labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
-                        )
-                      )
-                    : batteryToColor;
+                    ? this.hass.themes.darkMode
+                      ? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
+                      : labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
+                    : undefined;
+                const toColor = modifiedToColor
+                  ? rgb2hex(lab2rgb(modifiedToColor))
+                  : batteryToColor;
+
                 return html`<tr class="mdc-data-table__row">
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
@@ -331,14 +340,17 @@ export class HuiEnergySourcesTableCard
                   if (cost !== null) {
                     totalGridCost += cost;
                   }
-                  const color =
+
+                  const modifiedColor =
                     idx > 0
-                      ? rgb2hex(
-                          lab2rgb(
-                            labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
-                          )
-                        )
-                      : consumptionColor;
+                      ? this.hass.themes.darkMode
+                        ? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
+                        : labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
+                      : undefined;
+                  const color = modifiedColor
+                    ? rgb2hex(lab2rgb(modifiedColor))
+                    : consumptionColor;
+
                   return html`<tr class="mdc-data-table__row">
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
@@ -391,12 +403,17 @@ export class HuiEnergySourcesTableCard
                   if (cost !== null) {
                     totalGridCost += cost;
                   }
-                  const color =
+
+                  const modifiedColor =
                     idx > 0
-                      ? rgb2hex(
-                          lab2rgb(labDarken(rgb2lab(hex2rgb(returnColor)), idx))
-                        )
-                      : returnColor;
+                      ? this.hass.themes.darkMode
+                        ? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
+                        : labDarken(rgb2lab(hex2rgb(returnColor)), idx)
+                      : undefined;
+                  const color = modifiedColor
+                    ? rgb2hex(lab2rgb(modifiedColor))
+                    : returnColor;
+
                   return html`<tr class="mdc-data-table__row">
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
@@ -473,12 +490,17 @@ export class HuiEnergySourcesTableCard
                 if (cost !== null) {
                   totalGasCost += cost;
                 }
-                const color =
+
+                const modifiedColor =
                   idx > 0
-                    ? rgb2hex(
-                        lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx))
-                      )
-                    : gasColor;
+                    ? this.hass.themes.darkMode
+                      ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
+                      : labDarken(rgb2lab(hex2rgb(gasColor)), idx)
+                    : undefined;
+                const color = modifiedColor
+                  ? rgb2hex(lab2rgb(modifiedColor))
+                  : gasColor;
+
                 return html`<tr class="mdc-data-table__row">
                   <td class="mdc-data-table__cell cell-bullet">
                     <div
diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
index 89bc339383..69dab35389 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
@@ -1,10 +1,10 @@
 import { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import {
-  startOfToday,
+  addHours,
+  differenceInDays,
   endOfToday,
   isToday,
-  differenceInDays,
-  addHours,
+  startOfToday,
 } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -17,7 +17,7 @@ import {
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { formatTime } from "../../../../common/datetime/format_time";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import {
@@ -477,10 +477,16 @@ export class HuiEnergyUsageGraphCard
       Object.entries(sources).forEach(([statId, source], idx) => {
         const data: ChartDataset<"bar">[] = [];
         const entity = this.hass.states[statId];
-        const borderColor =
+
+        const modifiedColor =
           idx > 0
-            ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(colors[type])), idx)))
-            : colors[type];
+            ? this.hass.themes.darkMode
+              ? labBrighten(rgb2lab(hex2rgb(colors[type])), idx)
+              : labDarken(rgb2lab(hex2rgb(colors[type])), idx)
+            : undefined;
+        const borderColor = modifiedColor
+          ? rgb2hex(lab2rgb(modifiedColor))
+          : colors[type];
 
         data.push({
           label: