npm - signalk-underkeel - Versions diffs - 0.6.0 → 0.6.2 - Mend

signalk-underkeel 0.6.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,34 @@
 All notable changes to signalk-underkeel are documented here.
+## [0.6.2] - 2026-11-13
+### Fixed
+- Closing the details panel no longer logs an error in the Signal K server log. The panel
+  subscribed to `notifications.navigation.underKeel` itself, and on close Freeboard sent
+  Signal K an unsubscribe for that one path, which Signal K refuses (it takes only an
+  unsubscribe of everything). The background page, which never closes, now holds that
+  subscription and passes the message to the panel.
+## [0.6.1] - 2026-11-13
+### Fixed
+- The details panel reads in dark mode (#67): it had fixed light-theme colours and no
+  background of its own, so on Freeboard's dark background most of its text was dark grey on
+  dark. The status chip and widget also put white on amber (Alert, 2.4:1) and on green
+  (Normal, 3.7:1), below the 4.5:1 that small text needs.
+- The SignalK plugin CI workflow is pinned to a commit again. Without the `@ref`, GitHub could
+  not read the workflow file, so no plugin CI ran for 0.6.0 and the plugin registry took 10
+  points from its score.
+### Changed
+- The widget, the details panel and the setup steps share one set of colours in three
+  schemes: day, dusk (the device's dark mode) and night (Freeboard's night mode: black, and
+  nothing brighter than a dim grey). Every text colour reads at WCAG AA in each scheme.
 ## [0.6.0] - 2026-11-10
 ### Changed

package/README.md CHANGED Viewed

@@ -275,6 +275,11 @@ Extensions API shows it without any change to Freeboard:
 | Widget grid                     | Under-keel status: state colour, minimum clearance, time to shoal and the reason                                                           |
 | Toolbar button (boat icon)      | details panel: state, water level and source, a leg table per route, and **Open setup** for boat, water level and warning style (Settings) |
+The widget, the panel and the setup steps follow Freeboard's look: light by day, dark when the
+device is in dark mode, and a dim night scheme, black with nothing brighter than a dim grey,
+while Freeboard's night mode is on, so a glance at the panel keeps the eyes adapted to the
+dark. Every text colour reads at WCAG AA in each scheme.
 Routes shown on the chart are checked 1 s after each edit and every minute; the panel shows
 each result's age and marks it "out of date" after 3 minutes, when the chart draws its legs
 `unverified`. Stale status is shown as Unknown,
@@ -502,7 +507,10 @@ panel with its toolbar button, a hidden background page and the experimental
 - `runtime.js`, the background page, keeps the envelope, route results and tiles current;
 - `widget.js` and `panel.js` render the status and the route legs;
 - `ukc-shared.js` holds their pure logic (freshness, badges, labels), the part the Jest tests
-  cover.
+  cover;
+- `theme.css` holds every colour of the pages in the day, dusk and night schemes, and
+  `theme.js` picks the scheme from Freeboard's night mode (`nightMode`) or the device's dark
+  mode; a test holds each text colour to WCAG AA contrast in every scheme.
 The pages talk to the host through the vendored `signalk-plotterext-bus` client, copied into
 `public/vendor/` by the build. The [Plotter Extensions services RFC](docs/rfcs/plotter-extensions-services.md)

package/lib/api/manifest.js CHANGED Viewed

@@ -155,6 +155,7 @@ function buildManifest(version) {
                 "signalk.stream",
                 "routes",
                 "units",
+                "nightMode",
                 "ui",
                 "events.publish",
                 "x-freeboard.services.navigationSafety"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "signalk-underkeel",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Under-keel clearance awareness for Signal K: look-ahead grounding risk, route checks and a living chart.",
   "main": "lib/index.js",
   "files": [

package/public/panel.html CHANGED Viewed

@@ -3,18 +3,26 @@
   <head>
     <meta charset="utf-8" />
     <title>Under-keel details</title>
+    <link rel="stylesheet" href="theme.css" />
     <style>
-      body { margin: 0; padding: 10px 12px; font: 14px/1.4 system-ui, sans-serif; }
+      body { margin: 0; padding: 10px 12px; font: 14px/1.4 system-ui, sans-serif; color: var(--ink); background: var(--page); }
       h2 { font-size: 15px; margin: 14px 0 6px; }
-      .advisory { font-size: 12px; padding: 6px 8px; background: #fff3cd; border-radius: 4px; }
-      #state { display: inline-block; padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: 700; }
+      .advisory { font-size: 12px; padding: 6px 8px; border-radius: 4px; color: var(--note-ink); background: var(--note); border: 1px solid var(--note-line); }
+      #state { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: 700; color: var(--on-st-unknown); background: var(--st-unknown); }
+      #state[data-state="normal"] { color: var(--on-st-normal); background: var(--st-normal); }
+      #state[data-state="alert"] { color: var(--on-st-alert); background: var(--st-alert); }
+      #state[data-state="warn"] { color: var(--on-st-warn); background: var(--st-warn); }
+      #state[data-state="alarm"] { color: var(--on-st-alarm); background: var(--st-alarm); }
       #message { margin-top: 6px; }
       table { border-collapse: collapse; width: 100%; font-size: 13px; }
-      td, th { text-align: left; padding: 3px 4px; border-bottom: 1px solid #ddd; }
-      .ok { color: #1a9850; } .marginal { color: #b35806; } .fail { color: #d7301f; } .unverified { color: #6a51a3; }
-      button { margin-top: 8px; }
-      .muted { color: #666; font-size: 12px; }
+      td, th { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--line); }
+      th { color: var(--muted); font-weight: 600; }
+      .ok { color: var(--ok); } .marginal { color: var(--warn); } .fail { color: var(--todo); } .unverified { color: var(--unverified); }
+      button { margin-top: 8px; min-height: 32px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--field); border-radius: 6px; cursor: pointer; }
+      button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+      .muted { color: var(--muted); font-size: 12px; }
     </style>
+    <script src="theme.js"></script>
     <script src="ukc-shared.js"></script>
     <script type="module" src="panel.js"></script>
   </head>

package/public/panel.js CHANGED Viewed

@@ -3,11 +3,16 @@
 import { connectExtension } from "./vendor/plotterext-bus/extension.js";
 const UKC = globalThis.UKC;
+const THEME = globalThis.UKC_THEME;
+/** The host's night mode as this page shows it; setup opens in the same scheme. */
+let scheme = null;
 // Setup opens in this panel rather than one of its own, so the toolbar keeps one button.
 document.getElementById("open-setup").addEventListener("click", () => {
-  location.assign("setup.html?from=details");
+  location.assign(`setup.html?from=details${scheme ? `&scheme=${scheme}` : ""}`);
 });
 const client = await connectExtension();
+// Not awaited: a host that offers night mode but never answers must not hold back the status.
+void THEME.followHost(client, document, (s) => (scheme = s));
 let unit = "m";
 if (client.hasCapability("units")) {
@@ -19,11 +24,15 @@ function text(id, value) {
   document.getElementById(id).textContent = value;
 }
-function showUnknownStatus(why) {
-  const style = UKC.stateStyle("unknown");
+/** The state chip: its label, and its colours from theme.css for the state. */
+function showState(state) {
   const chip = document.getElementById("state");
-  chip.textContent = style.label;
-  chip.style.background = style.colour;
+  chip.textContent = UKC.stateStyle(state).label;
+  chip.dataset.state = UKC.stateKey(state);
+}
+function showUnknownStatus(why) {
+  showState("unknown");
   text("source", `Under-keel status unavailable: ${why}`);
 }
@@ -53,10 +62,7 @@ async function refreshStatus() {
       return;
     }
     statusAt = Date.now();
-    const style = UKC.stateStyle(s.engine.state);
-    const chip = document.getElementById("state");
-    chip.textContent = style.label;
-    chip.style.background = style.colour;
+    showState(s.engine.state);
     text("source", UKC.statusLines(s, unit).join(" · "));
   } catch (err) {
     if (id !== statusRequest) {
@@ -139,19 +145,45 @@ async function refreshRoutes() {
   }
 }
-if (client.hasCapability("signalk.stream")) {
-  await client.signalk.subscribe(["notifications.navigation.underKeel"], (ev) => {
-    text("message", ev.value && typeof ev.value === "object" ? ev.value.message : "");
-    if (!document.hidden) {
-      void refreshStatus();
+/** Reads overlap as the status ones do: only the latest may update the message. */
+let noticeRequest = 0;
+/** The notification's message, which the background page keeps in the extension state. */
+async function refreshNotice() {
+  const id = ++noticeRequest;
+  try {
+    const { ukcNotice } = await client.state.get(["ukcNotice"], "extension");
+    if (id !== noticeRequest) {
+      return;
+    }
+    text("message", ukcNotice && typeof ukcNotice.message === "string" ? ukcNotice.message : "");
+  } catch (err) {
+    if (id !== noticeRequest) {
+      return;
     }
-  });
+    // An old message left on screen could say normal over a warning; the poll reads it again.
+    text("message", "Under-keel message unavailable: the chart host did not answer.");
+    console.warn("under-keel notice", err);
+  }
 }
+// No Signal K subscription of its own: the host would unsubscribe it path by path when the
+// panel closes, which Signal K refuses and logs as an error. The background page relays it.
 await client.subscribe(["state.changed"], (_name, params) => {
-  if (params && params.scope === "extension" && params.keys.includes("routeCheck")) {
+  if (!params || params.scope !== "extension") {
+    return;
+  }
+  if (params.keys.includes("routeCheck")) {
     void refreshRoutes();
   }
+  if (params.keys.includes("ukcNotice")) {
+    void refreshNotice();
+    if (!document.hidden) {
+      void refreshStatus();
+    }
+  }
 });
+void refreshNotice();
 // The background runtime answers the button, over an event the host must carry.
 const recheck = document.getElementById("recheck");
 recheck.hidden = !["events.publish", "routes", "background.iframe"].every((c) => client.hasCapability(c));
@@ -170,6 +202,7 @@ function checkStatusAge() {
 function poll() {
   void refreshStatus();
   void refreshRoutes();
+  void refreshNotice();
 }
 // A hidden page polls nothing; back on screen an old status reads unknown until the poll answers.

package/public/runtime.js CHANGED Viewed

@@ -427,11 +427,64 @@ if (has("routes")) {
   }, RECHECK_MS);
 }
+// ---- the notification, relayed to the details panel ----
+/**
+ * The panel opens and closes, and the chart host unsubscribes a closed page's Signal K paths
+ * one by one, which Signal K refuses: it only takes an unsubscribe of everything, and logs the
+ * rest as errors. So this page, which never closes, holds the notification's subscription and
+ * keeps its message in the extension state, where the panel reads it.
+ */
+const NOTICE = "notifications.navigation.underKeel";
+/** A write that fails is tried again this many times, each wait longer by this much. */
+const NOTICE_RETRIES = 5;
+const NOTICE_RETRY_MS = 2000;
+/** The last notice received and not given up on, as JSON; a newer one replaces a retry of an older one. */
+let latestNotice;
+let noticeRetry;
+function relayNotice(value) {
+  const n = value && typeof value === "object" ? value : {};
+  const notice = { message: typeof n.message === "string" ? n.message : "", state: n.state };
+  const key = JSON.stringify(notice);
+  if (key === latestNotice) {
+    return;
+  }
+  latestNotice = key;
+  clearTimeout(noticeRetry);
+  void writeNotice(notice, key, 0);
+}
+/**
+ * Writes the notice to the extension state. A notification is sent only when it changes, so
+ * a write that fails is tried again rather than left until the next one.
+ */
+async function writeNotice(notice, key, tries) {
+  try {
+    await client.state.set({ ukcNotice: notice }, "extension");
+  } catch (err) {
+    if (key !== latestNotice) {
+      return;
+    }
+    if (tries < NOTICE_RETRIES) {
+      noticeRetry = setTimeout(() => void writeNotice(notice, key, tries + 1), NOTICE_RETRY_MS * (tries + 1));
+    } else {
+      // Given up: the same notice, sent again on a reconnect, is written rather than dropped.
+      latestNotice = undefined;
+      console.warn("under-keel notice", err);
+    }
+  }
+}
 /** Without the Signal K stream, or when subscribing to it fails, the envelope is polled. */
 let streaming = false;
 if (has("signalk.stream")) {
   try {
-    await client.signalk.subscribe(Object.keys(onPath), (ev) => {
+    await client.signalk.subscribe([...Object.keys(onPath), NOTICE], (ev) => {
+      // A notification is sent only when it changes, so its age says nothing about the plugin.
+      if (ev.path === NOTICE) {
+        relayNotice(ev.value);
+        return;
+      }
       const left = fresh(ev.path, ev.timestamp, Date.now());
       if (left > 0) {
         onPath[ev.path](ev.value, left);

package/public/setup.html CHANGED Viewed

@@ -4,21 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Under-keel setup</title>
+    <link rel="stylesheet" href="theme.css" />
     <style>
-      :root {
-        --ink: #12233a; --muted: #4a5b70; --line: #d5dce5; --field: #b8c3d1; --accent: #1f5fa8;
-        --accent-soft: #eaf2fb; --page: #ffffff; --panel: #f6f8fb; --water: #dcebf7; --bed: #b9a98f;
-        --ok: #1a7340; --warn: #8a4b00; --todo: #b5261a; --margin: #e66101; --margin-ink: #a84300;
-        --note: #fff4e5; --note-line: #f0c27a; --note-ink: #5c3300; --on-accent: #ffffff;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --ink: #e6edf5; --muted: #a9b6c6; --line: #33414f; --field: #4b5b6c; --accent: #6ea8ef;
-          --accent-soft: #1b2c42; --page: #121a23; --panel: #1a2430; --water: #173049; --bed: #5d5243;
-          --ok: #6fcf97; --warn: #f2b25c; --todo: #ff8a80; --margin: #ff9d4d; --margin-ink: #ffb27a;
-          --note: #3a2a12; --note-line: #7a5420; --note-ink: #f6d7a8; --on-accent: #0b1520;
-        }
-      }
       * { box-sizing: border-box; }
       body { margin: 0; font: 14px/1.4 system-ui, sans-serif; color: var(--ink); background: var(--page); }
       .back { padding: 10px 16px 0; font-size: 14px; }
@@ -64,7 +51,10 @@
       .seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
       .levels { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
       .levels div { display: flex; gap: 10px; align-items: center; }
-      .chip { width: 60px; flex: none; text-align: center; border-radius: 4px; font-size: 12px; font-weight: 600; padding: 3px 0; color: #fff; }
+      .chip { width: 60px; flex: none; text-align: center; border-radius: 4px; font-size: 12px; font-weight: 600; padding: 3px 0; }
+      .chip.alert { color: var(--on-st-alert); background: var(--st-alert); }
+      .chip.warn { color: var(--on-st-warn); background: var(--st-warn); }
+      .chip.alarm { color: var(--on-st-alarm); background: var(--st-alarm); }
       .switches { border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
       .switches label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-bottom: 1px solid var(--line); }
       .switches label:last-child { border-bottom: 0; }
@@ -83,6 +73,7 @@
       a { color: var(--accent); }
       :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
     </style>
+    <script src="theme.js"></script>
     <script src="setup-model.js"></script>
     <script type="module" src="setup.js"></script>
   </head>

package/public/setup.js CHANGED Viewed

@@ -4,12 +4,6 @@ const M = globalThis.UKC_SETUP;
 const SVG_NS = "http://www.w3.org/2000/svg";
 const ADMIN_PAGE = "/admin/#/serverConfiguration/plugins/signalk-underkeel";
 const STEPS = ["Boat", "Water level", "Warnings"];
-/** The plugin's state colours, each with a text colour that reads on it. */
-const STATE_COLOURS = {
-  alert: ["#d4a000", "#12233a"],
-  warn: ["#e66101", "#12233a"],
-  alarm: ["#b5261a", "#ffffff"]
-};
 const REFERENCE_KNOTS = 6;
 const s = { data: null, patch: {}, step: 0, saving: false, dragScale: undefined };
@@ -493,7 +487,7 @@ function warningsStep() {
       "div",
       { class: "levels" },
       ["alert", "warn", "alarm"].map((k) =>
-        h("div", {}, h("span", { class: "chip", style: `background:${STATE_COLOURS[k][0]};color:${STATE_COLOURS[k][1]}` }, k[0].toUpperCase() + k.slice(1)), lines[k])
+        h("div", {}, h("span", { class: `chip ${k}` }, k[0].toUpperCase() + k.slice(1)), lines[k])
       ),
       h("span", { class: "hint" }, lines.ahead),
       custom.length > 0 ? h("span", { class: "hint" }, `Your own values for ${custom.join(", ")} still apply; change them in the admin page.`) : null
@@ -646,4 +640,6 @@ async function readBack(sent, tries = 5) {
 // Opened from the details panel, the page offers the way back to it.
 document.getElementById("back").hidden = new URLSearchParams(location.search).get("from") !== "details";
+// Opened from the details panel, setup shows the scheme the panel had from the host's night mode.
+globalThis.UKC_THEME.applyScheme(document, globalThis.UKC_THEME.schemeFromUrl(location.href));
 await load();

package/public/theme.css ADDED Viewed

@@ -0,0 +1,59 @@
+/*
+ * Colours of the extension pages, one set per scheme. The pages use these tokens only, so a
+ * colour is changed here once; __tests__/ext/theme.test.ts holds every text colour to WCAG
+ * contrast against the surfaces it is drawn on, in every scheme.
+ *
+ * day:   light, the default.
+ * dusk:  dark, when the OS prefers it (prefers-color-scheme) or the page is told to.
+ * night: the chart host's night mode (`nightMode`): black, and nothing brighter than a dim
+ *        grey, so the helmsman's eyes stay adapted to the dark (theme.js sets it).
+ */
+:root {
+  color-scheme: light;
+  --page: #ffffff; --panel: #f6f8fb; --ink: #12233a; --muted: #4a5b70; --line: #d5dce5;
+  --field: #b8c3d1; --accent: #1f5fa8; --accent-soft: #eaf2fb; --on-accent: #ffffff;
+  --water: #dcebf7; --bed: #b9a98f; --margin: #e66101; --margin-ink: #a84300;
+  --ok: #1a7340; --warn: #8a4b00; --todo: #b5261a; --unverified: #5b3f9e;
+  --note: #fff4e5; --note-line: #f0c27a; --note-ink: #5c3300;
+  --st-normal: #1a7340; --on-st-normal: #ffffff; --st-alert: #d4a000; --on-st-alert: #12233a;
+  --st-warn: #e66101; --on-st-warn: #12233a; --st-alarm: #b5261a; --on-st-alarm: #ffffff;
+  --st-unknown: #5f6b78; --on-st-unknown: #ffffff;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-scheme]) {
+    color-scheme: dark;
+    --page: #121a23; --panel: #1a2430; --ink: #e6edf5; --muted: #a9b6c6; --line: #33414f;
+    --field: #4b5b6c; --accent: #6ea8ef; --accent-soft: #1b2c42; --on-accent: #0b1520;
+    --water: #173049; --bed: #5d5243; --margin: #ff9d4d; --margin-ink: #ffb27a;
+    --ok: #6fcf97; --warn: #f2b25c; --todo: #ff8a80; --unverified: #c3b0f7;
+    --note: #3a2a12; --note-line: #7a5420; --note-ink: #f6d7a8;
+    --st-normal: #6fcf97; --on-st-normal: #0b1520; --st-alert: #f2c94c; --on-st-alert: #0b1520;
+    --st-warn: #ff9d4d; --on-st-warn: #0b1520; --st-alarm: #ff6f61; --on-st-alarm: #0b1520;
+    --st-unknown: #8a96a3; --on-st-unknown: #0b1520;
+  }
+}
+:root[data-scheme="dusk"] {
+  color-scheme: dark;
+  --page: #121a23; --panel: #1a2430; --ink: #e6edf5; --muted: #a9b6c6; --line: #33414f;
+  --field: #4b5b6c; --accent: #6ea8ef; --accent-soft: #1b2c42; --on-accent: #0b1520;
+  --water: #173049; --bed: #5d5243; --margin: #ff9d4d; --margin-ink: #ffb27a;
+  --ok: #6fcf97; --warn: #f2b25c; --todo: #ff8a80; --unverified: #c3b0f7;
+  --note: #3a2a12; --note-line: #7a5420; --note-ink: #f6d7a8;
+  --st-normal: #6fcf97; --on-st-normal: #0b1520; --st-alert: #f2c94c; --on-st-alert: #0b1520;
+  --st-warn: #ff9d4d; --on-st-warn: #0b1520; --st-alarm: #ff6f61; --on-st-alarm: #0b1520;
+  --st-unknown: #8a96a3; --on-st-unknown: #0b1520;
+}
+:root[data-scheme="night"] {
+  color-scheme: dark;
+  --page: #000000; --panel: #0d0807; --ink: #b8786c; --muted: #a86f63; --line: #2a1814;
+  --field: #3a221d; --accent: #b9805a; --accent-soft: #1a0e08; --on-accent: #000000;
+  --water: #0a1014; --bed: #1c140e; --margin: #b9805a; --margin-ink: #b9805a;
+  --ok: #6f9160; --warn: #b08a45; --todo: #e0675a; --unverified: #9c809b;
+  --note: #1a0e08; --note-line: #3a221d; --note-ink: #b8786c;
+  --st-normal: #1d2a14; --on-st-normal: #7c9a69; --st-alert: #2b220c; --on-st-alert: #ad8e47;
+  --st-warn: #2e1909; --on-st-warn: #c07f4c; --st-alarm: #3a0c08; --on-st-alarm: #e66e61;
+  --st-unknown: #1c1716; --on-st-unknown: #9a817b;
+}
+:root[data-scheme="day"] {
+  color-scheme: light;
+}

package/public/theme.js ADDED Viewed

@@ -0,0 +1,75 @@
+// Which colour scheme of theme.css a page shows. Plain script: the pages load it with
+// <script>, the tests require() it.
+//
+// The chart host's night mode wins: on, the page is "night"; off, or not offered, the page
+// follows the OS preference (day, or dusk when it prefers dark), with no data-scheme set.
+(function (root) {
+  "use strict";
+  const SCHEMES = ["day", "dusk", "night"];
+  /** Shows `scheme` on `doc`; null or an unknown name follows the OS preference. */
+  function applyScheme(doc, scheme) {
+    const el = doc.documentElement;
+    if (SCHEMES.includes(scheme)) {
+      el.setAttribute("data-scheme", scheme);
+    } else {
+      el.removeAttribute("data-scheme");
+    }
+  }
+  /** The scheme a host night-mode state asks for: night when enabled, else none (the OS's). */
+  function schemeOf(state) {
+    return state && state.enabled === true ? "night" : null;
+  }
+  /** The scheme named in a page URL's `scheme` parameter, or null. */
+  function schemeFromUrl(href) {
+    try {
+      const s = new URL(href).searchParams.get("scheme");
+      return SCHEMES.includes(s) ? s : null;
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Follows the host's night mode on `doc` while the page lives, when the host offers it
+   * (capability `nightMode`). Resolves with the scheme shown; a host that does not answer
+   * leaves the page following the OS.
+   */
+  async function followHost(client, doc, onChange) {
+    if (!client.hasCapability("nightMode")) {
+      return null;
+    }
+    const show = (state) => {
+      const scheme = schemeOf(state);
+      applyScheme(doc, scheme);
+      if (onChange) {
+        onChange(scheme);
+      }
+      return scheme;
+    };
+    try {
+      // Subscribed first, so a change while the state is read is not missed.
+      await client.subscribe(["nightMode.changed"], (_name, params) => show(params));
+      return show(await client.call("nightMode.get"));
+    } catch (err) {
+      console.warn("under-keel night mode", err);
+      return null;
+    }
+  }
+  const api = {
+    SCHEMES: SCHEMES,
+    applyScheme: applyScheme,
+    schemeOf: schemeOf,
+    schemeFromUrl: schemeFromUrl,
+    followHost: followHost
+  };
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = api;
+  } else {
+    root.UKC_THEME = api;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : this);

package/public/ukc-shared.js CHANGED Viewed

@@ -6,19 +6,25 @@
   /** Plugin REST base; the pages are same-origin with the Signal K server. */
   const API = "/plugins/signalk-underkeel/v1";
+  /** Each state's label; its colours are theme.css's `--st-<state>` tokens. */
   const STATES = {
-    normal: { label: "Normal", colour: "#1a9850" },
-    alert: { label: "Alert", colour: "#d4a000" },
-    warn: { label: "Warning", colour: "#e66101" },
-    alarm: { label: "ALARM", colour: "#d7301f" },
-    unknown: { label: "Unknown", colour: "#808080" },
-    off: { label: "Off", colour: "#808080" }
+    normal: { label: "Normal" },
+    alert: { label: "Alert" },
+    warn: { label: "Warning" },
+    alarm: { label: "ALARM" },
+    unknown: { label: "Unknown" },
+    off: { label: "Off" }
   };
   function stateStyle(state) {
     return STATES[state] || STATES.unknown;
   }
+  /** The state a page colours: one of STATES, unknown for anything else (theme.css `--st-*`). */
+  function stateKey(state) {
+    return Object.prototype.hasOwnProperty.call(STATES, state) ? state : "unknown";
+  }
   /** Metres in the user's depth unit ("m" or "foot"); "—" when there is no number. */
   function depth(metres, unit) {
     if (typeof metres !== "number" || !isFinite(metres)) {
@@ -35,16 +41,17 @@
   }
   /**
-   * The status widget's texts and colour at `now`. A stale view, or one past
+   * The status widget's texts and state at `now` (`key`, whose colours theme.css holds). A stale view, or one past
    * its `freshUntil`, reads Unknown with no numbers, whatever values it last
    * held: a timer can fire late in a hidden page, the clock cannot.
    */
   function widgetView(view, unit, now) {
     const stale = view.stale || (typeof view.freshUntil === "number" && !(now < view.freshUntil));
-    const s = stateStyle(stale ? "unknown" : view.state);
+    const key = stateKey(stale ? "unknown" : view.state);
+    const s = stateStyle(key);
     const tts = stale ? "" : timeToShoal(view.timeToShoal);
     return {
-      colour: s.colour,
+      key: key,
       state: "UKC " + s.label,
       line: "min " + depth(stale ? null : view.clearance, unit) + (tts ? " · shoal " + tts : ""),
       reason: stale ? "no data from the under-keel plugin" : reason(view.message)
@@ -422,6 +429,7 @@
     retryAfterMs: retryAfterMs,
     STALE_MS: STALE_MS,
     widgetValue: widgetValue,
+    stateKey: stateKey,
     freshFor: freshFor,
     freshness: freshness,
     routeBadge: routeBadge,

package/public/widget.html CHANGED Viewed

@@ -3,14 +3,20 @@
   <head>
     <meta charset="utf-8" />
     <title>Under-keel status</title>
+    <link rel="stylesheet" href="theme.css" />
     <style>
       html, body { margin: 0; height: 100%; font: 13px/1.25 system-ui, sans-serif; }
-      body { box-sizing: border-box; padding: 6px 8px; cursor: pointer; color: #fff; background: #808080; }
+      body { box-sizing: border-box; padding: 6px 8px; cursor: pointer; color: var(--on-st-unknown); background: var(--st-unknown); }
+      body[data-state="normal"] { color: var(--on-st-normal); background: var(--st-normal); }
+      body[data-state="alert"] { color: var(--on-st-alert); background: var(--st-alert); }
+      body[data-state="warn"] { color: var(--on-st-warn); background: var(--st-warn); }
+      body[data-state="alarm"] { color: var(--on-st-alarm); background: var(--st-alarm); }
       #state { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; }
       #line { margin-top: 2px; }
-      #reason { margin-top: 2px; font-size: 11px; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      #advisory { margin-top: 2px; font-size: 10px; opacity: 0.8; }
+      #reason { margin-top: 2px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      #advisory { margin-top: 2px; font-size: 10px; }
     </style>
+    <script src="theme.js"></script>
     <script src="ukc-shared.js"></script>
     <script type="module" src="widget.js"></script>
   </head>

package/public/widget.js CHANGED Viewed

@@ -3,6 +3,8 @@ import { connectExtension } from "./vendor/plotterext-bus/extension.js";
 const UKC = globalThis.UKC;
 const client = await connectExtension();
+// Not awaited: a host that offers night mode but never answers must not hold back the status.
+void globalThis.UKC_THEME.followHost(client, document);
 const view = { state: "unknown", clearance: null, timeToShoal: null, message: "", stale: false };
 let unit = "m";
 /** A state not seen for this long is shown as unknown (the liveness contract in UKC.STALE_MS). */
@@ -25,8 +27,8 @@ function render() {
     return;
   }
   const next = UKC.widgetView(view, unit, Date.now());
-  if (next.colour !== shown.colour) {
-    document.body.style.background = next.colour;
+  if (next.key !== shown.key) {
+    document.body.dataset.state = next.key;
   }
   for (const id of ["state", "line", "reason"]) {
     if (next[id] !== shown[id]) {