Fix colors in network graphs (#26397)

src/components/chart/ha-chart-base.ts

@@ -29,7 +29,6 @@ import { formatTimeLabel } from "./axis-label";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../chips/ha-assist-chip";
 import { downSampleLineData } from "./down-sample";
-import { colorVariables } from "../../resources/theme/color/color.globals";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
@@ -344,7 +343,8 @@ export class HaChartBase extends LitElement {
         echarts.use(this.extraComponents);
       }
 
-      echarts.registerTheme("custom", this._createTheme());
+      const style = getComputedStyle(this);
+      echarts.registerTheme("custom", this._createTheme(style));
 
       this.chart = echarts.init(container, "custom");
       this.chart.on("datazoom", (e: any) => {
@@ -396,7 +396,7 @@ export class HaChartBase extends LitElement {
                         ...axis.axisPointer,
                         status: "show",
                         handle: {
-                          color: colorVariables["primary-color"],
+                          color: style.getPropertyValue("primary-color"),
                           margin: 0,
                           size: 20,
                           ...axis.axisPointer?.handle,
@@ -570,8 +570,7 @@ export class HaChartBase extends LitElement {
     return options;
   }
 
-  private _createTheme() {
+  private _createTheme(style: CSSStyleDeclaration) {
-    const style = getComputedStyle(this);
     return {
       color: getAllGraphColors(style),
       backgroundColor: "transparent",

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -26,7 +26,6 @@ import {
 } from "../../../../../data/bluetooth";
 import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
 import "../../../../../layouts/hass-subpage";
-import { colorVariables } from "../../../../../resources/theme/color/color.globals";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { bluetoothAdvertisementMonitorTabs } from "./bluetooth-advertisement-monitor";
 
@@ -131,33 +130,34 @@ export class BluetoothNetworkVisualization extends LitElement {
       data: BluetoothDeviceData[],
       scanners: BluetoothScannersDetails
     ): NetworkData => {
+      const style = getComputedStyle(this);
       const categories = [
         {
           name: CORE_SOURCE_LABEL,
           symbol: "roundRect",
           itemStyle: {
-            color: colorVariables["primary-color"],
+            color: style.getPropertyValue("--primary-color"),
           },
         },
         {
           name: this.hass.localize("ui.panel.config.bluetooth.scanners"),
           symbol: "circle",
           itemStyle: {
-            color: colorVariables["cyan-color"],
+            color: style.getPropertyValue("--cyan-color"),
           },
         },
         {
           name: this.hass.localize("ui.panel.config.bluetooth.known_devices"),
           symbol: "circle",
           itemStyle: {
-            color: colorVariables["teal-color"],
+            color: style.getPropertyValue("--teal-color"),
           },
         },
         {
           name: this.hass.localize("ui.panel.config.bluetooth.unknown_devices"),
           symbol: "circle",
           itemStyle: {
-            color: colorVariables["disabled-color"],
+            color: style.getPropertyValue("--disabled-color"),
           },
         },
       ];
@@ -192,7 +192,7 @@ export class BluetoothNetworkVisualization extends LitElement {
           symbol: "none",
           lineStyle: {
             width: 3,
-            color: colorVariables["primary-color"],
+            color: style.getPropertyValue("--primary-color"),
           },
         });
       });
@@ -206,7 +206,7 @@ export class BluetoothNetworkVisualization extends LitElement {
             symbol: "none",
             lineStyle: {
               width: this._getLineWidth(node.rssi),
-              color: colorVariables["primary-color"],
+              color: style.getPropertyValue("--primary-color"),
             },
           });
           return;
@@ -227,8 +227,8 @@ export class BluetoothNetworkVisualization extends LitElement {
           lineStyle: {
             width: this._getLineWidth(node.rssi),
             color: device
-              ? colorVariables["primary-color"]
+              ? style.getPropertyValue("--primary-color")
-              : colorVariables["disabled-color"],
+              : style.getPropertyValue("--disabled-color"),
           },
         });
       });

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -16,7 +16,6 @@ import type {
 import type { ZHADevice } from "../../../../../data/zha";
 import { fetchDevices, refreshTopology } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
-import { colorVariables } from "../../../../../resources/theme/color/color.globals";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
 import { zhaTabs } from "./zha-config-dashboard";
@@ -156,10 +155,12 @@ export class ZHANetworkVisualizationPage extends LitElement {
   }
 
   private _createChartData(devices: ZHADevice[]): NetworkData {
-    const primaryColor = colorVariables["primary-color"];
+    const style = getComputedStyle(this);
-    const routerColor = colorVariables["cyan-color"];
+
-    const endDeviceColor = colorVariables["teal-color"];
+    const primaryColor = style.getPropertyValue("--primary-color");
-    const offlineColor = colorVariables["error-color"];
+    const routerColor = style.getPropertyValue("--cyan-color");
+    const endDeviceColor = style.getPropertyValue("--teal-color");
+    const offlineColor = style.getPropertyValue("--error-color");
     const nodes: NetworkNode[] = [];
     const links: NetworkLink[] = [];
     const categories = [
@@ -282,7 +283,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
                 color:
                   route.route_status === "Active"
                     ? primaryColor
-                    : colorVariables["disabled-color"],
+                    : style.getPropertyValue("--disabled-color"),
                 type: ["Child", "Parent"].includes(neighbor.relationship)
                   ? "solid"
                   : "dotted",
@@ -322,7 +323,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
             symbolSize: 5,
             lineStyle: {
               width: 1,
-              color: colorVariables["disabled-color"],
+              color: style.getPropertyValue("--disabled-color"),
               type: "dotted",
             },
             ignoreForceLayout: true,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts

@@ -25,7 +25,6 @@ import {
 } from "../../../../../data/zwave_js";
 import "../../../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
-import { colorVariables } from "../../../../../resources/theme/color/color.globals";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { configTabs } from "./zwave_js-config-router";
 
@@ -147,8 +146,10 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
       nodeStatuses: Record<number, ZWaveJSNodeStatus>,
       nodeStatistics: Record<number, ZWaveJSNodeStatisticsUpdatedMessage>
     ): NetworkData => {
+      const style = getComputedStyle(this);
       const nodes: NetworkNode[] = [];
       const links: NetworkLink[] = [];
+
       const categories = [
         {
           name: this.hass.localize(
@@ -156,7 +157,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "roundRect",
           itemStyle: {
-            color: colorVariables["primary-color"],
+            color: style.getPropertyValue("--primary-color"),
           },
         },
         {
@@ -165,7 +166,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "circle",
           itemStyle: {
-            color: colorVariables["cyan-color"],
+            color: style.getPropertyValue("--cyan-color"),
           },
         },
         {
@@ -174,7 +175,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "circle",
           itemStyle: {
-            color: colorVariables["disabled-color"],
+            color: style.getPropertyValue("--disabled-color"),
           },
         },
         {
@@ -183,7 +184,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "circle",
           itemStyle: {
-            color: colorVariables["error-color"],
+            color: style.getPropertyValue("--error-color"),
           },
         },
       ];
@@ -214,12 +215,12 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           itemStyle: {
             color:
               node.status === NodeStatus.Dead
-                ? colorVariables["error-color"]
+                ? style.getPropertyValue("--error-color")
                 : node.status === NodeStatus.Asleep
-                  ? colorVariables["disabled-color"]
+                  ? style.getPropertyValue("--disabled-color")
                   : node.is_controller_node
-                    ? colorVariables["primary-color"]
+                    ? style.getPropertyValue("--primary-color")
-                    : colorVariables["cyan-color"],
+                    : style.getPropertyValue("--cyan-color"),
           },
           polarDistance: node.is_controller_node
             ? 0
@@ -269,8 +270,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
                   width,
                   color:
                     repeater === controllerNode
-                      ? colorVariables["primary-color"]
+                      ? style.getPropertyValue("--primary-color")
-                      : colorVariables["disabled-color"],
+                      : style.getPropertyValue("--disabled-color"),
                   type: route.protocol_data_rate > 1 ? "solid" : "dotted",
                 },
                 symbolSize: width * 3,

src/resources/theme/color/color.globals.ts

@@ -1,8 +1,5 @@
 import { css } from "lit";
-import {
+import { extractVar } from "../../../common/style/derived-css-vars";
-  extractVar,
-  extractVars,
-} from "../../../common/style/derived-css-vars";
 import { coreColorVariables } from "./core.globals";
 
 export const colorStyles = css`
@@ -365,7 +362,6 @@ export const darkColorStyles = css`
     --ha-button-neutral-light-color: #6a7081;
   }
 `;
-export const colorVariables = extractVars(colorStyles);
 
 export const DefaultPrimaryColor = extractVar(
   colorStyles,