relmio 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -7,6 +7,48 @@ checks the registry separately after publication.
 
 ## Unreleased
 
+## [0.2.7] - 2026-08-02
+
+### Changed
+
+- Restore the original Relmio hosted layout and local browser wizard flow, with
+  the horizontal five-step Signal Spine and GitHub star/version control kept
+  visible.
+- Add Astryx's built theme and accessible segmented appearance control to the
+  hosted app, plus lightweight System/Light/Dark preference support to the
+  local wizard.
+- Add responsive dark-mode logo treatment, phone-sized controls, and matching
+  browser-wizard guidance to the GitHub and npm README variants.
+
+### Fixed
+
+- Keep the checksum-verified temporary Node.js 22 runtime on the child process
+  path so Git Bash and other Node-free systems can launch the Relmio package
+  shim without falling back to a missing or outdated system `node` command.
+
+## [0.2.6] - 2026-08-02
+
+### Added
+
+- Add a curl-based wizard bootstrap for macOS, Linux, WSL, and Git Bash that
+  reuses Node.js 22+ or downloads and checksum-verifies a temporary official
+  runtime when Node.js is not installed.
+- Add a native Windows PowerShell bootstrap for PowerShell and Command Prompt
+  that works without Git Bash or a preinstalled Node.js runtime and verifies
+  the temporary official Windows archive before execution.
+- Expand the hosted installer into an accessible macOS/Linux, PowerShell,
+  Command Prompt, and NPX terminal switcher.
+
+### Changed
+
+- Revamp the hosted Vercel experience and local browser wizard around the
+  Signal Spine composition and Patchbay Ledger design language.
+- Integrate the Astryx component system, neutral theme, CLI, and AI-readable
+  setup guidance in the hosted React application while keeping the published
+  wizard dependency-light.
+- Add persistent route context, sanitized preview status, responsive layouts,
+  reduced-motion behavior, and synchronized GitHub/npm setup documentation.
+
 ## [0.2.5] - 2026-07-31
 
 ### Added

package/README.md

@@ -72,20 +72,64 @@ installing the private n8n sidecar.
 </figure>
 
 Use the site's [Install wizard](https://relmio.vercel.app/install) page for a
-copyable command tailored to the current self-hosted n8n and Hostinger VPS
-setup path.
+clickable macOS/Linux, PowerShell, Command Prompt, and NPX command switcher
+tailored to the current self-hosted n8n and Hostinger VPS setup path.
+
+### Browser interface and theme modes
+
+The hosted site and local wizard keep the original Relmio relay layout while
+adding a compact **System / Light / Dark** appearance control. System follows
+the computer's preference; Light and Dark are remembered on that browser only.
+The local wizard keeps its horizontal five-step Signal Spine at the top of the
+flow, and the hosted site keeps the live GitHub star/version control visible.
+Both surfaces collapse their controls for narrow phone screens without
+turning the setup flow into a side rail or requiring a separate mobile app.
 
 ## Quick start
 
-Run this on your own macOS, Windows, or Linux computer—not on the VPS:
+Choose the terminal already on your own computer. Do not run these commands on
+the VPS.
+
+### macOS, Linux, WSL, or Git Bash
+
+```bash
+curl -fsSL https://relmio.vercel.app/install.sh | sh
+```
+
+### Windows PowerShell
+
+```powershell
+irm https://relmio.vercel.app/install.ps1 | iex
+```
+
+### Windows Command Prompt
+
+```bat
+powershell -NoProfile -ExecutionPolicy Bypass -Command "irm https://relmio.vercel.app/install.ps1 | iex"
+```
+
+No Node.js or Git Bash installation is required first. The
+[POSIX](https://github.com/Demonbane18/relmio/blob/main/web/public/install.sh)
+and [Windows PowerShell](https://github.com/Demonbane18/relmio/blob/main/web/public/install.ps1)
+bootstraps reuse Node.js 22 or newer when available. Otherwise they download
+the matching current official Node.js 22 runtime to a private temporary
+directory, verify its SHA-256 checksum, run Relmio with npm lifecycle scripts
+disabled, and remove the temporary runtime when the wizard closes.
+
+Users who already have Node.js 22 or newer can run the npm package directly:
+
+### NPX (requires Node.js 22+)
 
 ```bash
 npx --yes --ignore-scripts relmio@latest
 ```
 
-Requirements:
+### Requirements
 
-- Node.js 22 or newer
+- On macOS/Linux/WSL/Git Bash: `curl`, `awk`, `tar`, and either `sha256sum` or
+  `shasum`; Git Bash also needs `unzip`
+- On native Windows: Windows PowerShell 5.1 or PowerShell 7; Command Prompt can
+  launch the included PowerShell bootstrap
 - A browser and an eligible ChatGPT/Codex account
 - A self-hosted n8n Docker deployment on a VPS
 - Docker Compose v2, SSH access, and a Docker network shared with n8n

package/docs/maintenance.md

@@ -5,7 +5,19 @@ Every command on this page targets the separate
 
 ## Refresh an expired ChatGPT login
 
-The easiest method:
+The easiest method is to open the
+[hosted install page](https://relmio.vercel.app/install) and choose the local
+terminal you already have. For macOS, Linux, WSL, or Git Bash:
+
+```bash
+curl -fsSL https://relmio.vercel.app/install.sh | sh
+```
+
+For Windows PowerShell, with no Git Bash or preinstalled Node.js required:
+
+```powershell
+irm https://relmio.vercel.app/install.ps1 | iex
+```
 
 1. Start the local wizard again.
 2. Select **Refresh ChatGPT sign-in**.

package/docs/security.md

@@ -92,8 +92,14 @@ The current release pins:
 - `ssh2` `1.17.0`
 - `openai-oauth` `2.0.0`
 
-Install scripts are disabled for local dependencies. The generated sidecar
-also installs `openai-oauth` with `--ignore-scripts`.
+The POSIX and native Windows PowerShell bootstraps reuse a compatible local
+Node.js runtime or download the matching current official Node.js 22 archive
+to a private temporary directory. Each validates the archive against Node.js's
+SHA-256 manifest before execution and removes it when the wizard closes. The
+PowerShell bootstrap accepts only strict Windows x64 or ARM64 archive names,
+uses HTTPS without redirects, and enables TLS 1.2 for Windows PowerShell 5.1.
+npm lifecycle scripts are disabled when either bootstrap starts Relmio. The
+generated sidecar also installs `openai-oauth` with `--ignore-scripts`.
 
 Do not replace pinned versions with `latest` in production. Follow the upgrade
 checklist in [maintenance.md](maintenance.md).

package/docs/troubleshooting.md

@@ -30,17 +30,39 @@ it after the wizard saves the credential.
 
 ## Confirm the local package first
 
-Run these commands on your own computer, not on the VPS:
+Close every old wizard terminal and browser tab, then run the newest published
+build on your own computer, not on the VPS. Choose the command for the terminal
+you already have.
+
+macOS, Linux, WSL, or Git Bash:
 
 ```bash
-node --version
-npm view relmio version
+curl -fsSL https://relmio.vercel.app/install.sh | sh
+```
+
+Windows PowerShell:
+
+```powershell
+irm https://relmio.vercel.app/install.ps1 | iex
 ```
 
-Node must be version 22 or newer. Then close every old wizard terminal and
-browser tab and start the newest published build:
+Windows Command Prompt:
+
+```bat
+powershell -NoProfile -ExecutionPolicy Bypass -Command "irm https://relmio.vercel.app/install.ps1 | iex"
+```
+
+These commands do not require Node.js to be installed. The Windows options do
+not require Git Bash. Each bootstrap reuses Node.js 22 or newer when available,
+or downloads an official temporary runtime and verifies its SHA-256 checksum
+before execution.
+
+If you choose the existing-Node fallback, confirm Node is version 22 or newer
+and check the published package version first:
 
 ```bash
+node --version
+npm view relmio version
 npx --yes --ignore-scripts relmio@latest
 ```
 
@@ -49,7 +71,7 @@ newest printed `http://127.0.0.1:...` URL into the browser. That URL contains a
 temporary setup token: do not post it in an issue or screenshot.
 
 You do not need to sign in to npm, configure npm 2FA, or own this package to
-run its public `npx` command. npm authentication is required only for the
+run any public command. npm authentication is required only for the
 maintainer who publishes a release.
 
 ## Quick VPS checks
@@ -88,7 +110,9 @@ bypassed.
 
 | Symptom | Meaning | Fix |
 |---|---|---|
-| `node: command not found`, `node is not recognized`, or Node is older than 22 | The local runtime is missing or unsupported. | Install Node.js 22 or newer on the local computer, open a new terminal, and rerun the `@latest` command. Do not install it on the VPS for the wizard. |
+| `node: command not found`, `node is not recognized`, or Node is older than 22 | The NPX fallback cannot use the local runtime. | Use the macOS/Linux curl command or the native Windows PowerShell/Command Prompt command above. Either can run with a verified temporary runtime. Do not install Node.js on the VPS for the wizard. |
+| `curl` or `sh` is not recognized on Windows | The macOS/Linux command was pasted into a native Windows terminal. | Use the PowerShell command in PowerShell, or the longer `powershell -NoProfile ...` command in Command Prompt. Git Bash is not required. |
+| A bootstrap reports a checksum mismatch | The Node.js download did not match the official SHA-256 manifest, so it was not executed. | Retry on a trusted connection. Do not bypass the check. If it repeats, use an existing Node.js 22+ installation and report the sanitized error. |
 | The browser did not open | The automatic browser launch failed, but the local server may still be running. | Keep the newest terminal open and copy its newest `127.0.0.1` setup URL into the browser. Do not reuse a URL from a closed terminal. |
 | An old wizard page reports an invalid or expired setup session | The local server was closed or a newer wizard run created a different one-time session token. | Close the old page and use only the URL printed by the currently running terminal. |
 | `npx` appears to run an older wizard | An old terminal or tab is still active, or the package was run without an explicit tag. | Close old runs, check `npm view relmio version`, then run `npx --yes --ignore-scripts relmio@latest`. |

package/docs/video-outline.md

@@ -41,17 +41,26 @@ Use this simple explanation:
 
 On screen: the Mermaid flowchart in the README.
 
-### 2:20 — Start the npm package
+### 2:20 — Start the wizard
 
-Run locally:
+Open the hosted install page and choose the terminal already on the local
+computer. Show both the macOS/Linux and native Windows choices:
 
 ```bash
-npx --yes --ignore-scripts relmio@latest
+curl -fsSL https://relmio.vercel.app/install.sh | sh
+```
+
+```powershell
+irm https://relmio.vercel.app/install.ps1 | iex
 ```
 
 Explain that:
 
-- `npx` downloads and runs the published version for this session;
+- no preinstalled Node.js runtime is required;
+- native Windows does not require Git Bash and also has a Command Prompt option;
+- the bootstrap reuses Node.js 22+ or downloads and checksum-verifies a
+  temporary official Node.js 22 runtime;
+- npm lifecycle scripts stay disabled when it starts the published package;
 - the wizard binds to `127.0.0.1`;
 - the printed setup URL is private and temporary;
 - the terminal must remain open until the wizard finishes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relmio",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Turn a supported ChatGPT/Codex OAuth sign-in into a private OpenAI-compatible endpoint, starting with self-hosted n8n.",
   "keywords": [
     "relmio",

package/src/ui/app.js

@@ -294,7 +294,7 @@ async function discover() {
     element("container-select"),
     result.containers.map((container) => ({
       value: container.name,
-      label: `${container.name} — ${container.image}`,
+      label: `${container.name} - ${container.image}`,
     })),
     result.containers[0].name,
   );

package/src/ui/index.html

@@ -7,12 +7,13 @@
       name="description"
       content="Relmio connects compatible AI clients to a private ChatGPT/Codex OAuth sidecar, starting with self-hosted n8n."
     />
-    <title>Relmio — n8n Setup</title>
+    <title>Relmio | n8n Setup</title>
     <link
       rel="icon"
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23137c74' d='M7 8h19l31 24H41L26 20v10L7 17Z'/%3E%3Cpath fill='%2312211f' d='M7 47l19-13v10l15-12h16L26 56H7Z'/%3E%3C/svg%3E"
     />
     <link rel="stylesheet" href="/styles.css" />
+    <script src="/theme.js" type="module"></script>
     <script src="/app.js" type="module"></script>
   </head>
   <body>
@@ -31,7 +32,24 @@
         </svg>
         <span>Relmio</span>
       </div>
-      <span class="local-badge">Runs only on this computer</span>
+      <div class="header-actions">
+        <fieldset class="theme-picker">
+          <legend class="visually-hidden">Color theme</legend>
+          <label>
+            <input type="radio" name="color-theme" value="system" checked />
+            <span>System</span>
+          </label>
+          <label>
+            <input type="radio" name="color-theme" value="light" />
+            <span>Light</span>
+          </label>
+          <label>
+            <input type="radio" name="color-theme" value="dark" />
+            <span>Dark</span>
+          </label>
+        </fieldset>
+        <span class="local-badge">Runs only on this computer</span>
+      </div>
     </header>
 
     <main id="main-content" class="shell">
@@ -141,7 +159,7 @@
                 placeholder="your-vps-ip-or-hostname"
                 required
               />
-              <small>Use the full IP address—do not add <code>ssh root@</code>.</small>
+              <small>Use the full IP address. Do not add <code>ssh root@</code>.</small>
             </label>
 
             <label class="field compact">
@@ -226,8 +244,8 @@
         </div>
 
         <div class="version-strip" aria-label="Detected Docker versions">
-          <span>Docker <strong id="docker-version">—</strong></span>
-          <span>Compose <strong id="compose-version">—</strong></span>
+          <span>Docker <strong id="docker-version">Not detected</strong></span>
+          <span>Compose <strong id="compose-version">Not detected</strong></span>
         </div>
 
         <div class="field-grid single">
@@ -266,7 +284,7 @@
             <ul class="check-list">
               <li>Create or update <code>/docker/n8n-openai-oauth</code></li>
               <li>Build and start only the <code>openai-oauth</code> sidecar</li>
-              <li>Attach the sidecar to <strong id="review-network">—</strong></li>
+              <li>Attach the sidecar to <strong id="review-network">Not selected</strong></li>
               <li>
                 Use the private hostname
                 <code id="review-endpoint">n8n-openai-oauth</code>
@@ -361,12 +379,12 @@
         </button>
 
         <div class="model-box">
-          <h3>2. OpenAI Chat Model — AI Agent or Basic LLM Chain</h3>
+          <h3>2. OpenAI Chat Model for AI Agent or Basic LLM Chain</h3>
           <dl class="result-list">
             <div>
               <dt>Model ID</dt>
               <dd class="result-value">
-                <code id="result-model">—</code>
+                <code id="result-model">Not detected</code>
                 <button
                   class="button secondary copy-value"
                   type="button"
@@ -383,7 +401,7 @@
               <dd><strong>On</strong> for Chat Model node version 1.3</dd>
             </div>
           </dl>
-          <p>All models detected: <span id="result-models">—</span></p>
+          <p>All models detected: <span id="result-models">Not detected</span></p>
           <p>
             If the Responses API switch is absent, keep the node's default
             Chat Completions behavior; the bridge supports that route too.

package/src/ui/styles.css

@@ -11,11 +11,15 @@
   --accent-deep: #0c5f59;
   --accent-bright: #1ba397;
   --accent-soft: #e9f4ef;
+  --accent-border: #b9d9d2;
+  --accent-icon: #d3eae0;
+  --accent-copy: #355a54;
   --warning: #8a4b0f;
   --warning-soft: #fff4e2;
   --warning-border: #e3c491;
   --danger: #a22b2b;
   --danger-soft: #fff0f0;
+  --danger-border: #e4abab;
   --success: #17653f;
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
   --shadow-sm: 0 1px 2px rgb(13 27 24 / 5%);
@@ -27,6 +31,62 @@
   --radius-lg: 1.25rem;
 }
 
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --background: #101513;
+  --surface: #1d2421;
+  --surface-muted: #171d1b;
+  --text: #edf3f0;
+  --text-muted: #a9b8b3;
+  --border: #303a36;
+  --border-strong: #52615b;
+  --accent-bright: #52c7bb;
+  --accent-soft: #1c2925;
+  --accent-border: #35564f;
+  --accent-icon: #20342f;
+  --accent-copy: #b8d8d1;
+  --warning: #f0b37f;
+  --warning-soft: #2a2118;
+  --warning-border: #725237;
+  --danger: #f09a9a;
+  --danger-soft: #2b1b1b;
+  --danger-border: #744141;
+  --success: #61c897;
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
+  --shadow-md:
+    0 1px 2px rgb(0 0 0 / 22%),
+    0 12px 36px -14px rgb(0 0 0 / 58%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --background: #101513;
+    --surface: #1d2421;
+    --surface-muted: #171d1b;
+    --text: #edf3f0;
+    --text-muted: #a9b8b3;
+    --border: #303a36;
+    --border-strong: #52615b;
+    --accent-bright: #52c7bb;
+    --accent-soft: #1c2925;
+    --accent-border: #35564f;
+    --accent-icon: #20342f;
+    --accent-copy: #b8d8d1;
+    --warning: #f0b37f;
+    --warning-soft: #2a2118;
+    --warning-border: #725237;
+    --danger: #f09a9a;
+    --danger-soft: #2b1b1b;
+    --danger-border: #744141;
+    --success: #61c897;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
+    --shadow-md:
+      0 1px 2px rgb(0 0 0 / 22%),
+      0 12px 36px -14px rgb(0 0 0 / 58%);
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -103,7 +163,7 @@ a:focus-visible {
   min-height: 4.25rem;
   padding: 0.75rem clamp(1rem, 4vw, 3rem);
   border-bottom: 1px solid rgb(221 227 223 / 75%);
-  background: rgb(244 242 236 / 82%);
+  background: color-mix(in srgb, var(--background) 82%, transparent);
   backdrop-filter: blur(14px) saturate(1.4);
   -webkit-backdrop-filter: blur(14px) saturate(1.4);
 }
@@ -122,6 +182,78 @@ a:focus-visible {
   width: 2rem;
   height: 2rem;
   flex: none;
+  border-radius: 0.4375rem;
+  transition:
+    background 180ms var(--ease),
+    box-shadow 180ms var(--ease);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.theme-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0.1875rem;
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+  background: var(--surface-muted);
+}
+
+.theme-picker label {
+  position: relative;
+  cursor: pointer;
+}
+
+.theme-picker input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.theme-picker span {
+  min-height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.625rem;
+  border-radius: 0.4375rem;
+  color: var(--text-muted);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  transition:
+    color 160ms var(--ease),
+    background 160ms var(--ease),
+    box-shadow 160ms var(--ease);
+}
+
+.theme-picker input:checked + span {
+  color: var(--text);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+}
+
+.theme-picker input:focus-visible + span {
+  outline: 3px solid #f2a94a;
+  outline-offset: 2px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .local-badge {
@@ -215,7 +347,7 @@ h3 {
   align-items: start;
   margin: 1.25rem 0 0;
   padding: 1rem 1.125rem;
-  border: 1px solid #b9d9d2;
+  border: 1px solid var(--accent-border);
   border-radius: var(--radius);
   background: var(--accent-soft);
   box-shadow: var(--shadow-sm);
@@ -229,7 +361,7 @@ h3 {
   place-items: center;
   border-radius: 0.625rem;
   color: var(--accent-deep);
-  background: #d3eae0;
+  background: var(--accent-icon);
   font-size: 1rem;
   font-weight: 800;
   content: "✓";
@@ -240,7 +372,7 @@ h3 {
 }
 
 .safety-note span {
-  color: #355a54;
+  color: var(--accent-copy);
 }
 
 .backup-note {
@@ -250,7 +382,7 @@ h3 {
 
 .backup-note::before {
   color: var(--warning);
-  background: #f6e3c3;
+  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
   content: "!";
 }
 
@@ -383,7 +515,7 @@ h3 {
 }
 
 .error {
-  border: 1px solid #e4abab;
+  border: 1px solid var(--danger-border);
   color: var(--danger);
   background: var(--danger-soft);
   font-weight: 650;
@@ -478,7 +610,7 @@ h3 {
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-sm);
   color: var(--text);
-  background: #fff;
+  background: var(--surface);
   transition:
     border-color 200ms var(--ease),
     box-shadow 200ms var(--ease),
@@ -527,7 +659,7 @@ h3 {
 code {
   padding: 0.1rem 0.3rem;
   border-radius: 0.25rem;
-  background: #edf0ef;
+  background: var(--surface-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 0.875em;
   overflow-wrap: anywhere;
@@ -626,7 +758,7 @@ code {
 .button.copied {
   border-color: var(--success);
   color: var(--success);
-  background: #e9f5ee;
+  background: color-mix(in srgb, var(--success) 12%, var(--surface));
 }
 
 /* ---------- Fingerprint & approvals ---------- */
@@ -655,7 +787,7 @@ code {
   padding: 0.625rem 0.75rem;
   border: 1px solid var(--warning-border);
   border-radius: var(--radius-sm);
-  background: #fff;
+  background: var(--surface);
 }
 
 .check-row {
@@ -709,12 +841,12 @@ code {
 }
 
 .review-grid section:first-child {
-  border-color: #b9d9d2;
+  border-color: var(--accent-border);
   background: var(--accent-soft);
 }
 
 .review-grid section:last-child {
-  border-color: #e4abab;
+  border-color: var(--danger-border);
   background: var(--danger-soft);
 }
 
@@ -831,6 +963,32 @@ footer p {
   margin: 0;
 }
 
+/* ---------- Dark mode refinement ---------- */
+
+:root[data-theme="dark"] .brand-mark {
+  padding: 0.125rem;
+  background: #f7f8f5;
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
+}
+
+:root[data-theme="dark"] .eyebrow,
+:root[data-theme="dark"] .step-kicker {
+  color: var(--accent-bright);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .brand-mark {
+    padding: 0.125rem;
+    background: #f7f8f5;
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
+  }
+
+  :root:not([data-theme]) .eyebrow,
+  :root:not([data-theme]) .step-kicker {
+    color: var(--accent-bright);
+  }
+}
+
 /* ---------- Animations ---------- */
 
 @keyframes panel-in {
@@ -884,6 +1042,18 @@ footer p {
     display: none;
   }
 
+  .site-header {
+    padding-inline: 1rem;
+  }
+
+  .header-actions {
+    gap: 0.375rem;
+  }
+
+  .theme-picker span {
+    padding-inline: 0.5rem;
+  }
+
   .shell {
     width: min(100% - 1rem, 54rem);
     padding-top: 2rem;

package/src/ui/theme.js

@@ -0,0 +1,50 @@
+const colorModes = new Set(["system", "light", "dark"]);
+const storageKey = "relmio-color-mode";
+
+function applyMode(mode) {
+  if (mode === "light" || mode === "dark") {
+    document.documentElement.dataset.theme = mode;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+
+  document
+    .querySelectorAll('input[name="color-theme"]')
+    .forEach((input) => {
+      input.checked = input.value === mode;
+    });
+}
+
+let initialMode = "system";
+
+try {
+  const savedMode = window.localStorage.getItem(storageKey);
+  if (colorModes.has(savedMode)) {
+    initialMode = savedMode;
+  }
+} catch {
+  // System mode remains available when browser storage is unavailable.
+}
+
+applyMode(initialMode);
+
+document
+  .querySelectorAll('input[name="color-theme"]')
+  .forEach((input) => {
+    input.addEventListener("change", () => {
+      if (!input.checked || !colorModes.has(input.value)) return;
+
+      applyMode(input.value);
+      try {
+        window.localStorage.setItem(storageKey, input.value);
+      } catch {
+        // The selection still applies for this page view.
+      }
+    });
+  });
+
+window.addEventListener("storage", (event) => {
+  if (event.key === storageKey) {
+    applyMode(colorModes.has(event.newValue) ? event.newValue : "system");
+  }
+});

package/src/web/server.js

@@ -179,6 +179,7 @@ async function loadDefaultUiFiles() {
   const files = await Promise.all([
     readFile(new URL("../ui/index.html", import.meta.url), "utf8"),
     readFile(new URL("../ui/app.js", import.meta.url), "utf8"),
+    readFile(new URL("../ui/theme.js", import.meta.url), "utf8"),
     readFile(new URL("../ui/time.js", import.meta.url), "utf8"),
     readFile(new URL("../ui/styles.css", import.meta.url), "utf8"),
   ]);
@@ -186,8 +187,9 @@ async function loadDefaultUiFiles() {
   return {
     "/": files[0],
     "/app.js": files[1],
-    "/time.js": files[2],
-    "/styles.css": files[3],
+    "/theme.js": files[2],
+    "/time.js": files[3],
+    "/styles.css": files[4],
   };
 }