@matter-server/dashboard 0.5.15 → 0.6.0

package/src/pages/network/network-utils.ts

@@ -5,6 +5,7 @@
  */
 
 import type { MatterNode } from "@matter-server/ws-client";
+import { getCssVar } from "../../util/shared-styles.js";
 import type {
     CategorizedDevices,
     NetworkType,
@@ -27,10 +28,16 @@ const SIGNAL_MEDIUM_THRESHOLD = -85;
 const LQI_STRONG_THRESHOLD = 200;
 const LQI_MEDIUM_THRESHOLD = 100;
 
-// Signal colors
-const SIGNAL_COLOR_STRONG = "#4caf50"; // Green
-const SIGNAL_COLOR_MEDIUM = "#ff9800"; // Orange
-const SIGNAL_COLOR_WEAK = "#f44336"; // Red
+// Signal colors — read from CSS variables for theme awareness
+function getSignalColorStrong(): string {
+    return getCssVar("--signal-color-strong", "#4caf50");
+}
+function getSignalColorMedium(): string {
+    return getCssVar("--signal-color-medium", "#ff9800");
+}
+function getSignalColorWeak(): string {
+    return getCssVar("--signal-color-weak", "#f44336");
+}
 
 /**
  * WiFi Diagnostics info from cluster 0x36/54.
@@ -444,6 +451,33 @@ export function findUnknownDevices(
     return Array.from(unknownMap.values());
 }
 
+export type SignalLevel = "strong" | "medium" | "weak";
+
+/** Determine signal level from a Thread neighbor's RSSI/LQI. */
+export function getSignalLevel(neighbor: ThreadNeighbor): SignalLevel {
+    const rssi = neighbor.avgRssi ?? neighbor.lastRssi;
+    if (rssi !== null) {
+        if (rssi > SIGNAL_STRONG_THRESHOLD) return "strong";
+        if (rssi > SIGNAL_MEDIUM_THRESHOLD) return "medium";
+        return "weak";
+    }
+    if (neighbor.lqi > LQI_STRONG_THRESHOLD) return "strong";
+    if (neighbor.lqi > LQI_MEDIUM_THRESHOLD) return "medium";
+    return "weak";
+}
+
+/** Map a signal level to its theme-aware color. */
+export function signalLevelToColor(level: SignalLevel): string {
+    switch (level) {
+        case "strong":
+            return getSignalColorStrong();
+        case "medium":
+            return getSignalColorMedium();
+        case "weak":
+            return getSignalColorWeak();
+    }
+}
+
 /**
  * Gets the signal color based on RSSI or LQI values.
  * Green: Strong signal
@@ -456,22 +490,22 @@ export function getSignalColor(neighbor: ThreadNeighbor): string {
 
     if (rssi !== null) {
         if (rssi > SIGNAL_STRONG_THRESHOLD) {
-            return SIGNAL_COLOR_STRONG;
+            return getSignalColorStrong();
         }
         if (rssi > SIGNAL_MEDIUM_THRESHOLD) {
-            return SIGNAL_COLOR_MEDIUM;
+            return getSignalColorMedium();
         }
-        return SIGNAL_COLOR_WEAK;
+        return getSignalColorWeak();
     }
 
     // Fallback to LQI (0-255, higher is better)
     if (neighbor.lqi > LQI_STRONG_THRESHOLD) {
-        return SIGNAL_COLOR_STRONG;
+        return getSignalColorStrong();
     }
     if (neighbor.lqi > LQI_MEDIUM_THRESHOLD) {
-        return SIGNAL_COLOR_MEDIUM;
+        return getSignalColorMedium();
     }
-    return SIGNAL_COLOR_WEAK;
+    return getSignalColorWeak();
 }
 
 /**
@@ -481,12 +515,12 @@ export function getSignalColor(neighbor: ThreadNeighbor): string {
  */
 export function getSignalColorFromLqi(lqi: number): string {
     if (lqi > LQI_STRONG_THRESHOLD) {
-        return SIGNAL_COLOR_STRONG;
+        return getSignalColorStrong();
     }
     if (lqi > LQI_MEDIUM_THRESHOLD) {
-        return SIGNAL_COLOR_MEDIUM;
+        return getSignalColorMedium();
     }
-    return SIGNAL_COLOR_WEAK;
+    return getSignalColorWeak();
 }
 
 /**
@@ -577,15 +611,15 @@ export function getWiFiDiagnostics(node: MatterNode): WiFiDiagnostics {
  */
 export function getSignalColorFromRssi(rssi: number | null): string {
     if (rssi === null) {
-        return SIGNAL_COLOR_MEDIUM; // Default to medium if unknown
+        return getSignalColorMedium(); // Default to medium if unknown
     }
     if (rssi > SIGNAL_STRONG_THRESHOLD) {
-        return SIGNAL_COLOR_STRONG;
+        return getSignalColorStrong();
     }
     if (rssi > SIGNAL_MEDIUM_THRESHOLD) {
-        return SIGNAL_COLOR_MEDIUM;
+        return getSignalColorMedium();
     }
-    return SIGNAL_COLOR_WEAK;
+    return getSignalColorWeak();
 }
 
 /**

package/src/pages/network/update-connections-dialog.ts

@@ -12,6 +12,7 @@ import type { MatterClient, MatterNode } from "@matter-server/ws-client";
 import { mdiLoading } from "@mdi/js";
 import { LitElement, css, html, nothing, svg } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { reducedMotionStyles } from "../../util/shared-styles.js";
 import { getNetworkType } from "./network-utils.js";
 
 declare global {
@@ -267,61 +268,64 @@ export class UpdateConnectionsDialog extends LitElement {
         `;
     }
 
-    static override styles = css`
-        md-dialog {
-            --md-dialog-container-color: var(--md-sys-color-surface, #fff);
-        }
-
-        [slot="content"] {
-            padding: 0 24px;
-        }
+    static override styles = [
+        reducedMotionStyles,
+        css`
+            md-dialog {
+                --md-dialog-container-color: var(--md-sys-color-surface, #fff);
+            }
 
-        [slot="content"] p {
-            margin: 0 0 16px 0;
-            font-size: 0.875rem;
-            line-height: 1.5;
-            color: var(--md-sys-color-on-surface, #333);
-        }
+            [slot="content"] {
+                padding: 0 24px;
+            }
 
-        [slot="content"] p:last-child {
-            margin-bottom: 0;
-        }
+            [slot="content"] p {
+                margin: 0 0 16px 0;
+                font-size: 0.875rem;
+                line-height: 1.5;
+                color: var(--md-sys-color-on-surface, #333);
+            }
 
-        .checkbox-row {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-            font-size: 0.875rem;
-            color: var(--md-sys-color-on-surface, #333);
-        }
+            [slot="content"] p:last-child {
+                margin-bottom: 0;
+            }
 
-        .updating-content {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
+            .checkbox-row {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                font-size: 0.875rem;
+                color: var(--md-sys-color-on-surface, #333);
+            }
 
-        .spinner {
-            animation: spin 1s linear infinite;
-            flex-shrink: 0;
-        }
+            .updating-content {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+            }
 
-        .updating-content svg {
-            color: inherit;
-        }
+            .spinner {
+                animation: spin 1s linear infinite;
+                flex-shrink: 0;
+            }
 
-        @keyframes spin {
-            from {
-                transform: rotate(0deg);
+            .updating-content svg {
+                color: inherit;
             }
-            to {
-                transform: rotate(360deg);
+
+            @keyframes spin {
+                from {
+                    transform: rotate(0deg);
+                }
+                to {
+                    transform: rotate(360deg);
+                }
             }
-        }
 
-        md-filled-button {
-            min-width: 140px;
-        }
-    `;
+            md-filled-button {
+                min-width: 140px;
+            }
+        `,
+    ];
 }

package/src/util/device-icons.ts

@@ -56,13 +56,13 @@ import {
     mdiWeatherRainy,
     mdiWifi,
 } from "@mdi/js";
-import { ThemeService } from "./theme-service.js";
+import { getCssVar } from "./shared-styles.js";
 
 /**
  * Get theme-aware default icon color.
  */
 function getDefaultIconColor(): string {
-    return ThemeService.effectiveTheme === "dark" ? "#b0b0b0" : "#666666";
+    return getCssVar("--node-color-default", "#666666");
 }
 
 /**
@@ -483,9 +483,11 @@ export function createNodeIconDataUrl(
     const iconPath = getDeviceIcon(node, threadRole);
     let color: string;
     if (isSelected) {
-        color = isOffline ? "#b71c1c" : "#1976d2"; // Dark red for selected+offline, blue for selected
+        color = isOffline
+            ? getCssVar("--node-color-selected-offline", "#b71c1c")
+            : getCssVar("--node-color-selected", "#1976d2");
     } else if (isOffline) {
-        color = "#d32f2f"; // Red for offline
+        color = getCssVar("--node-color-offline", "#d32f2f");
     } else {
         color = getDefaultIconColor(); // Theme-aware default
     }
@@ -500,7 +502,9 @@ export function createNodeIconDataUrl(
  */
 export function createUnknownDeviceIconDataUrl(isRouter: boolean = false, isSelected: boolean = false): string {
     const iconPath = isRouter ? mdiAccessPoint : mdiHelp;
-    const color = isSelected ? "#1976d2" : "#ff9800"; // Orange for unknown
+    const color = isSelected
+        ? getCssVar("--node-color-selected", "#1976d2")
+        : getCssVar("--node-color-unknown", "#ff9800");
     return createIconDataUrl(iconPath, color);
 }
 
@@ -510,6 +514,8 @@ export function createUnknownDeviceIconDataUrl(isRouter: boolean = false, isSele
  * @returns A data URL containing the SVG
  */
 export function createWiFiRouterIconDataUrl(isSelected: boolean = false): string {
-    const color = isSelected ? "#1976d2" : "#ff9800"; // Orange for external infrastructure (same as Thread unknown)
+    const color = isSelected
+        ? getCssVar("--node-color-selected", "#1976d2")
+        : getCssVar("--node-color-unknown", "#ff9800");
     return createIconDataUrl(mdiWifi, color);
 }

package/src/util/shared-styles.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { css } from "lit";
+import { ThemeService } from "./theme-service.js";
+
+// Cache resolved CSS var values — getComputedStyle() is called in graph render loops (per node/edge),
+// so we avoid repeated style lookups and invalidate on theme change.
+const cssVarCache = new Map<string, string>();
+ThemeService.subscribe(() => cssVarCache.clear());
+
+/** Read a CSS custom property value from the document body (for JS-driven rendering like vis-network). */
+export function getCssVar(name: string, fallback: string = ""): string {
+    let value = cssVarCache.get(name);
+    if (value === undefined) {
+        value = getComputedStyle(document.body).getPropertyValue(name).trim();
+        cssVarCache.set(name, value);
+    }
+    return value || fallback;
+}
+
+export const reducedMotionStyles = css`
+    @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+        }
+    }
+`;
+
+export const notFoundStyles = css`
+    .not-found {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 48px 16px;
+        gap: 16px;
+        color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .not-found ha-svg-icon {
+        --icon-primary-color: var(--md-sys-color-error);
+        width: 48px;
+        height: 48px;
+    }
+
+    .not-found p {
+        margin: 0;
+        font-size: 1.1rem;
+    }
+`;