homebridge-roborock-matter 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.8.0
+
+**The settings page follows Homebridge's dark theme, and the icon is in the header.**
+
+The page stayed white inside a dark Homebridge, in every version. It was not reading the operating system's setting — that would have been wrong too. Homebridge UI reaches into this plugin's iframe and puts classes on our own `<body>`: `dark-mode` when the user picks a dark theme, `config-ui-x-<theme>` when they pick a light one. The stylesheet had `color-scheme: light` hard-coded and one set of colours, so there was nothing to follow it with.
+
+Every colour is now a token, the dark set is declared once, and `index.js` decides which applies and writes it to `<html data-theme>`. Homebridge's own choice wins over the OS, because someone who picked light in Homebridge on a dark Mac meant light; the OS is the fallback for a page opened outside Homebridge. A MutationObserver keeps up when the theme changes while the page is open — the switch is one screen away, and the parent applies it by mutating our body rather than reloading us.
+
+Two details worth writing down. Homebridge also assigns `body.style.backgroundColor = "#242424 !important"`; the CSSOM rejects a value carrying `!important`, so that line has never done anything and the class is the only signal there is. And the QR tile stays white in both themes on purpose — a camera cannot read a code without a light quiet zone. It is the one colour on the page that is not a token, and the test names it so the exemption cannot grow.
+
+**The plugin's icon now sits beside the title**, as on the other plugins' settings pages. It is `assets/icon.png` byte for byte rather than a redrawing or a resize, and a test holds the two files identical, so the tile here and the tile on the Homebridge plugin list cannot drift apart.
+
+787 tests, up from 773. Verified red against 3.7.1: 14 of 14 fail.
+
 ## 3.7.1
 
 **The Matter Pairing section told you to pair the wrong thing first.**

package/homebridge-ui/public/index.html

@@ -1,11 +1,26 @@
 <link rel="stylesheet" href="styles.css" />
 
 <main class="container">
-  <header>
-    <h1>Roborock Vacuum</h1>
-    <p class="subtitle">
-      Configure account access, discovery filters, and connection diagnostics.
-    </p>
+  <header class="page-header">
+    <!-- The plugin's own icon, byte for byte the file in assets/ that npm and
+         the Homebridge plugin page show. Not a redrawing: a second copy of a
+         logo drifts from the first the moment either is touched, and then the
+         tile here and the tile on the plugin list stop matching. A test holds
+         the two files identical. -->
+    <img
+      class="brand-mark"
+      src="icon.png"
+      alt=""
+      width="54"
+      height="54"
+      decoding="async"
+    />
+    <div class="brand-text">
+      <h1>Roborock Vacuum</h1>
+      <p class="subtitle">
+        Configure account access, discovery filters, and connection diagnostics.
+      </p>
+    </div>
   </header>
 
   <section class="panel">

package/homebridge-ui/public/index.js

@@ -1647,7 +1647,80 @@ async function updatePluginConfig(patch) {
   await window.homebridge.savePluginConfig();
 }
 
+/**
+ * Follow Homebridge's theme, not the operating system's.
+ *
+ * Homebridge UI reaches into this iframe's document and puts classes on our
+ * body: `dark-mode` (plus `config-ui-x-dark-mode-<theme>`) when the user has
+ * picked a dark theme, and `config-ui-x-<theme>` when they have picked a light
+ * one. It also tries to force the background with
+ * `body.style.backgroundColor = "#242424 !important"`, which the CSSOM rejects
+ * because a property value may not carry `!important` — so that line does
+ * nothing and the class is the only signal there is.
+ *
+ * The page used to read neither, so it stayed white inside a dark Homebridge.
+ *
+ * Precedence, and the order matters: Homebridge's own choice wins whenever it
+ * has expressed one, because a user who picked light in Homebridge on a dark
+ * Mac meant light. Only when no Homebridge class is present at all — the page
+ * opened on its own, or before the parent has painted — do we fall back to the
+ * OS preference, so the first frame is never the wrong colour.
+ */
+const DARK_CLASS = "dark-mode";
+const HOMEBRIDGE_THEME_CLASS = /^config-ui-x-/;
+
+function homebridgeHasChosenATheme() {
+  return Array.from(document.body.classList).some((name) =>
+    HOMEBRIDGE_THEME_CLASS.test(name)
+  );
+}
+
+function prefersDark() {
+  return (
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+}
+
+function applyTheme() {
+  const dark = document.body.classList.contains(DARK_CLASS)
+    ? true
+    : homebridgeHasChosenATheme()
+      ? false
+      : prefersDark();
+  document.documentElement.dataset.theme = dark ? "dark" : "light";
+}
+
+/**
+ * Keep following it after the first paint.
+ *
+ * The theme can change while this page is open — the switch is in the same UI,
+ * one screen away — and the parent applies it by mutating our body's class
+ * list rather than reloading us. Without the observer the settings page is the
+ * one thing in Homebridge that stays the old colour until it is reopened.
+ */
+function watchTheme() {
+  applyTheme();
+
+  new MutationObserver(applyTheme).observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  if (typeof window.matchMedia === "function") {
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    // Only relevant while Homebridge has not chosen for us; applyTheme decides.
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", applyTheme);
+    }
+  }
+}
+
 function init() {
+  // Before anything else: a page that is briefly the wrong colour is the first
+  // thing the eye catches.
+  watchTheme();
+
   // The markup ships in the off state, but say it once here too: loadConfig()
   // can fail or find no config, and the alternative is a loud orange pairing
   // callout for a feature that is switched off.

package/homebridge-ui/public/styles.css

@@ -4,6 +4,17 @@
    also sent a request to Google from a local admin interface. The body rule
    below already falls back to the system stack. */
 
+/* Every colour on this page comes from a token below, and the dark set is
+   declared exactly once. That is a rule, not a preference: the page renders
+   inside Homebridge's own iframe, and a single hard-coded hex is all it takes
+   to put light-on-light or dark-on-dark somewhere nobody looks. The rule is
+   enforced by __tests__/the-settings-page-follows-homebridge-s-theme.test.js.
+
+   Which set applies is decided by index.js and written to
+   `<html data-theme>`, because Homebridge's theme is not the operating
+   system's: the UI reaches into this iframe and puts `dark-mode` on our body
+   when the user picks a dark theme, whatever the OS is set to. See
+   applyTheme() there for the precedence. */
 :root {
   color-scheme: light;
   --bg: #f4f6f9;
@@ -13,15 +24,72 @@
   --text: #17242f;
   --heading: #0c1a24;
   --muted: #5a6b7b;
+  --placeholder: #8a97a5;
   --primary: #0e7a6a;
   --primary-strong: #0b6357;
   --primary-text: #ffffff;
+  --primary-wash: rgba(14, 122, 106, 0.06);
+  --primary-ring: rgba(14, 122, 106, 0.16);
+  --primary-glow: rgba(14, 122, 106, 0.14);
+  --row-hover: #f1f7f5;
   --secondary: #eef2f5;
   --border: #d9e0e7;
   --shadow: 0 6px 18px rgba(15, 32, 44, 0.07);
   --warning: #9a5b00;
   --danger: #b42323;
   --link: #0e7a6a;
+
+  /* Status colours, as a face and a soft backing each. */
+  --good-line: #16a34a;
+  --good-bg: #e6f6ec;
+  --good-border: #b5e3c5;
+  --good-text: #14683a;
+  --warn-line: #d97706;
+  --warn-bg: #fdf3df;
+  --warn-border: #f0d9a8;
+  --warn-text: #8a5a00;
+  --danger-line: #dc2626;
+  --callout-border: #d9822b;
+  --callout-bg: rgba(217, 130, 43, 0.08);
+}
+
+/* The dark set. One block, same names, no extra rules — anything that needs
+   to change in dark mode changes here or it is not a token yet. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #1c1c1c;
+  --panel: #242424;
+  --panel-soft: #2a2a2a;
+  --input: #1f1f1f;
+  --text: #e4e6e8;
+  --heading: #f5f7f8;
+  --muted: #a2adb6;
+  --placeholder: #7c8790;
+  --primary: #3fb39c;
+  --primary-strong: #56c7b0;
+  --primary-text: #10201d;
+  --primary-wash: rgba(63, 179, 156, 0.08);
+  --primary-ring: rgba(63, 179, 156, 0.28);
+  --primary-glow: rgba(0, 0, 0, 0.45);
+  --row-hover: #303634;
+  --secondary: #333333;
+  --border: #3a3a3a;
+  --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  --warning: #e0a458;
+  --danger: #f0736e;
+  --link: #56c7b0;
+
+  --good-line: #3fbf76;
+  --good-bg: rgba(63, 191, 118, 0.14);
+  --good-border: rgba(63, 191, 118, 0.42);
+  --good-text: #7fdca6;
+  --warn-line: #e0a458;
+  --warn-bg: rgba(224, 164, 88, 0.14);
+  --warn-border: rgba(224, 164, 88, 0.42);
+  --warn-text: #edc088;
+  --danger-line: #f0736e;
+  --callout-border: #d9822b;
+  --callout-bg: rgba(217, 130, 43, 0.14);
 }
 
 * {
@@ -31,11 +99,7 @@
 body {
   margin: 0;
   font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
-  background: linear-gradient(
-      180deg,
-      rgba(14, 122, 106, 0.06),
-      transparent 260px
-    ),
+  background: linear-gradient(180deg, var(--primary-wash), transparent 260px),
     var(--bg);
   color: var(--text);
 }
@@ -48,6 +112,28 @@ body {
   gap: 18px;
 }
 
+/* The icon sits beside the title, the way it does on the other plugins'
+   settings pages. */
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.brand-mark {
+  flex: 0 0 auto;
+  width: 54px;
+  height: 54px;
+  /* The artwork carries its own rounded tile; this only matches the corner so
+     the edges do not show against the page. */
+  border-radius: 12px;
+  display: block;
+}
+
+.brand-text {
+  min-width: 0;
+}
+
 /* Explicit heading colors: Homebridge UI injects its own theme stylesheet
    into custom-UI iframes, so headings must not rely on inheritance or they
    can end up dark-on-dark / light-on-light. */
@@ -146,11 +232,11 @@ select:focus,
 input:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(14, 122, 106, 0.16);
+  box-shadow: 0 0 0 3px var(--primary-ring);
 }
 
 input::placeholder {
-  color: #8a97a5;
+  color: var(--placeholder);
 }
 
 .checkbox {
@@ -235,7 +321,7 @@ button {
 
 button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 10px 20px rgba(14, 122, 106, 0.14);
+  box-shadow: 0 10px 20px var(--primary-glow);
 }
 
 button:active {
@@ -292,15 +378,15 @@ select:focus-visible {
 }
 
 .toast.success {
-  border-left-color: #16a34a;
+  border-left-color: var(--good-line);
 }
 
 .toast.error {
-  border-left-color: #dc2626;
+  border-left-color: var(--danger-line);
 }
 
 .toast.warning {
-  border-left-color: #d97706;
+  border-left-color: var(--warn-line);
 }
 
 .diagnostics-summary {
@@ -363,7 +449,7 @@ select:focus-visible {
 
 .device-row:hover {
   border-color: var(--primary);
-  background: #f1f7f5;
+  background: var(--row-hover);
 }
 
 .device-row input {
@@ -403,11 +489,11 @@ select:focus-visible {
 }
 
 .local-test-card.good {
-  border-color: rgba(22, 163, 74, 0.45);
+  border-color: var(--good-border);
 }
 
 .local-test-card.warn {
-  border-color: rgba(217, 119, 6, 0.45);
+  border-color: var(--warn-border);
 }
 
 .device-header {
@@ -450,10 +536,14 @@ select:focus-visible {
   height: 180px;
   border-radius: 8px;
   border: 1px solid var(--border);
+  /* Deliberately white in both themes, and the one colour on this page that
+     is not a token. A QR code needs a light quiet zone to scan; a camera
+     pointed at a dark tile gets nothing. */
   background: #ffffff;
 }
 
 .qr-placeholder {
+  background: var(--panel-soft);
   color: var(--muted);
   display: grid;
   place-items: center;
@@ -514,15 +604,15 @@ select:focus-visible {
 }
 
 .pill.good {
-  background: #e6f6ec;
-  border-color: #b5e3c5;
-  color: #14683a;
+  background: var(--good-bg);
+  border-color: var(--good-border);
+  color: var(--good-text);
 }
 
 .pill.warn {
-  background: #fdf3df;
-  border-color: #f0d9a8;
-  color: #8a5a00;
+  background: var(--warn-bg);
+  border-color: var(--warn-border);
+  color: var(--warn-text);
 }
 
 .status-pill {
@@ -537,15 +627,15 @@ select:focus-visible {
 }
 
 .status-pill.good {
-  background: #e4f5ef;
-  border-color: #a9dfcd;
-  color: #0c6b52;
+  background: var(--good-bg);
+  border-color: var(--good-border);
+  color: var(--good-text);
 }
 
 .status-pill.warn {
-  background: #fdf3df;
-  border-color: #edd39c;
-  color: #8a5a00;
+  background: var(--warn-bg);
+  border-color: var(--warn-border);
+  color: var(--warn-text);
 }
 
 .diagnostic-device dl,
@@ -586,6 +676,11 @@ select:focus-visible {
     font-size: 1.85rem;
   }
 
+  .brand-mark {
+    width: 44px;
+    height: 44px;
+  }
+
   .container {
     padding: 22px 16px;
   }
@@ -636,10 +731,10 @@ select:focus-visible {
 .pairing-callout {
   margin: 4px 0 16px 26px;
   padding: 12px 14px;
-  border: 1px solid #d9822b;
+  border: 1px solid var(--callout-border);
   border-left-width: 4px;
   border-radius: 6px;
-  background: rgba(217, 130, 43, 0.08);
+  background: var(--callout-bg);
 }
 
 .pairing-callout h3 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-roborock-matter",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "The most complete Roborock plugin for Apple Home. Supports the entire Roborock lineup — from the classic S-series to the new 2025 Q7 series that no other plugin can control. Sign in with your Roborock account and get native start/stop, room cleaning, suction levels, battery, and live 'cleaning in the kitchen' room tracking. Verified by Homebridge.",
   "license": "MIT",
   "author": {