Padlock-on-a-shield mark, dark and light themes, history note

A new mark: a padlock on a shield with the W as its keyhole, in the
console's teal on a dark shield. It replaces the placeholder W tile in the
sidebar, on the sign-in and setup pages, and as the favicon, with app icons
and a web manifest. The SVG sources, a single-colour variant, a wordmark
and a social preview image live in docs/brand.

The console now has a theme choice: dark by default, light, or follow the
system, switched from the sidebar or the Account page and remembered per
browser. The light palette is a first-class theme rather than a media
query, so both are laid out the same way.

The README opens with the mark and gains a History section about the 2025
WGX installer this replaces.

web/src/components/Layout.tsx

@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 import { Link, useLocation } from "wouter";
 import { Activity, ClipboardList, LayoutDashboard, LogOut, Settings, Shield, Users, Wifi, WifiOff } from "lucide-react";
 import { useAuth, useLive } from "../state";
+import { Mark } from "./Mark";
+import { ThemeSwitch } from "./ThemeSwitch";
 
 const items = [
   { href: "/", label: "Dashboard", icon: LayoutDashboard },
@@ -20,10 +22,8 @@ export function Layout({ children }: { children: ReactNode }) {
     <div className="shell">
       <aside className="sidebar">
         <div className="brand">
-          <div className="brand-mark" aria-hidden="true">
-            <svg width="18" height="18" viewBox="0 0 32 32">
-              <path d="M7 10l4 12 5-9 5 9 4-12" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
+          <div className="brand-mark">
+            <Mark size={34} />
           </div>
           <div>
             <div className="brand-name">WGX</div>
@@ -43,6 +43,7 @@ export function Layout({ children }: { children: ReactNode }) {
           })}
         </nav>
         <div className="sidebar-foot">
+          <ThemeSwitch compact />
           <div title={connected ? "Live updates connected" : "Live updates reconnecting"} className="nowrap">
             {connected ? <Wifi size={13} style={{ verticalAlign: -2, color: "var(--ok)" }} /> : <WifiOff size={13} style={{ verticalAlign: -2, color: "var(--warn)" }} />} {connected ? "live" : "reconnecting"}
           </div>

web/src/components/Mark.tsx

@@ -0,0 +1,24 @@
+// The WGX mark: a padlock on a shield, with the W as its keyhole. The same
+// drawing as docs/brand/wgx-mark.svg, inlined so it needs no request and
+// takes its size from wherever it is placed.
+export function Mark({ size = 32 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 128 128" role="img" aria-label="WGX">
+      <defs>
+        <linearGradient id="wgx-shield" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#26332e" />
+          <stop offset="1" stopColor="#121a17" />
+        </linearGradient>
+        <linearGradient id="wgx-lock" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#3fae90" />
+          <stop offset="1" stopColor="#2b8f75" />
+        </linearGradient>
+      </defs>
+      <path d="M64 6 L114 22 V60 C114 90 93 112 64 122 C35 112 14 90 14 60 V22 Z" fill="url(#wgx-shield)" />
+      <path d="M64 6 L114 22 V60 C114 90 93 112 64 122 C35 112 14 90 14 60 V22 Z" fill="none" stroke="#3fae90" strokeWidth="3" strokeLinejoin="round" />
+      <path d="M46 62 V50 a18 18 0 0 1 36 0 V62" fill="none" stroke="#3fae90" strokeWidth="8.5" strokeLinecap="round" />
+      <rect x="34" y="58" width="60" height="42" rx="10" fill="url(#wgx-lock)" />
+      <path d="M46 70 L53 89 L64 76 L75 89 L82 70" fill="none" stroke="#ffffff" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

web/src/components/ThemeSwitch.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { getThemeChoice, setThemeChoice, type ThemeChoice } from "../theme";
+
+const options: { value: ThemeChoice; label: string; icon: typeof Moon }[] = [
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "light", label: "Light", icon: Sun },
+  { value: "system", label: "System", icon: Monitor },
+];
+
+// Dark / Light / System. `compact` shows icons only, for the sidebar.
+export function ThemeSwitch({ compact = false }: { compact?: boolean }) {
+  const [choice, setChoice] = useState<ThemeChoice>(getThemeChoice);
+  const pick = (v: ThemeChoice) => {
+    setThemeChoice(v);
+    setChoice(v);
+  };
+  return (
+    <div className="segmented" role="radiogroup" aria-label="Theme">
+      {options.map((o) => {
+        const Icon = o.icon;
+        return (
+          <button key={o.value} role="radio" aria-checked={choice === o.value} aria-label={o.label} title={o.label} className={choice === o.value ? "active" : ""} onClick={() => pick(o.value)}>
+            <Icon size={14} style={{ verticalAlign: -2 }} />
+            {!compact && <span style={{ marginLeft: 6 }}>{o.label}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

web/src/main.tsx

@@ -1,8 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+import { initTheme } from "./theme";
 import "./styles.css";
 
+initTheme();
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

web/src/pages/Account.tsx

@@ -3,6 +3,7 @@ import { api, type SessionInfo } from "../api";
 import { ago, dateTime } from "../format";
 import { errorMessage, useAuth, useNow, useToast } from "../state";
 import { Field, Modal, copyText } from "../components/ui";
+import { ThemeSwitch } from "../components/ThemeSwitch";
 
 export function Account() {
   const { me, refresh } = useAuth();
@@ -158,6 +159,17 @@ export function Account() {
           </div>
         </div>
       </div>
+      <div className="card mt">
+        <div className="card-head">
+          <h2>Appearance</h2>
+        </div>
+        <div className="card-body">
+          <p className="muted small" style={{ marginBottom: 10 }}>
+            Dark is the default. The choice is remembered in this browser only.
+          </p>
+          <ThemeSwitch />
+        </div>
+      </div>
       <div className="card mt">
         <div className="card-head">
           <h2>Sessions</h2>

web/src/pages/Login.tsx

@@ -2,6 +2,7 @@ import { useState, type FormEvent } from "react";
 import { api } from "../api";
 import { errorMessage, useAuth } from "../state";
 import { Field } from "../components/ui";
+import { Mark } from "../components/Mark";
 
 export function Login() {
   const { refresh } = useAuth();
@@ -39,10 +40,8 @@ export function Login() {
       <form className="card" onSubmit={submit}>
         <div className="card-body">
           <div className="brand">
-            <div className="brand-mark" aria-hidden="true">
-              <svg width="18" height="18" viewBox="0 0 32 32">
-                <path d="M7 10l4 12 5-9 5 9 4-12" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
+            <div className="brand-mark">
+              <Mark size={44} />
             </div>
             <div className="brand-name">WGX</div>
           </div>

web/src/pages/Setup.tsx

@@ -2,6 +2,7 @@ import { useState, type FormEvent } from "react";
 import { api } from "../api";
 import { errorMessage, useAuth } from "../state";
 import { Field } from "../components/ui";
+import { Mark } from "../components/Mark";
 
 export function Setup() {
   const { refresh } = useAuth();
@@ -35,10 +36,8 @@ export function Setup() {
       <form className="card" onSubmit={submit}>
         <div className="card-body">
           <div className="brand">
-            <div className="brand-mark" aria-hidden="true">
-              <svg width="18" height="18" viewBox="0 0 32 32">
-                <path d="M7 10l4 12 5-9 5 9 4-12" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
+            <div className="brand-mark">
+              <Mark size={44} />
             </div>
             <div className="brand-name">WGX</div>
           </div>

web/src/styles.css

@@ -1,4 +1,35 @@
+/* Dark is the default. theme.ts resolves the user's choice (dark, light or
+   follow the system) onto <html data-theme>, so the stylesheet only needs the
+   one override below. */
 :root {
+  --bg: #111715;
+  --bg-elev: #19211e;
+  --bg-sunken: #0c100f;
+  --fg: #e6ece9;
+  --fg-muted: #9aa8a2;
+  --fg-faint: #6a7772;
+  --line: #26312d;
+  --line-strong: #3a4742;
+  --accent: #3fae90;
+  --accent-fg: #06110d;
+  --accent-soft: #163a31;
+  --ok: #3fc275;
+  --ok-soft: #12321f;
+  --warn: #e0a84a;
+  --warn-soft: #3a2c10;
+  --bad: #ef6b62;
+  --bad-soft: #3d1815;
+  --info: #5f9de0;
+  --rx: #5f9de0;
+  --tx: #3fae90;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
+  --radius: 10px;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
   --bg: #f4f6f5;
   --bg-elev: #ffffff;
   --bg-sunken: #e9edeb;
@@ -20,39 +51,9 @@
   --rx: #2a6fb0;
   --tx: #1f6f5c;
   --shadow: 0 1px 2px rgba(20, 30, 26, 0.06), 0 8px 24px rgba(20, 30, 26, 0.06);
-  --radius: 10px;
-  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color-scheme: light;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #111715;
-    --bg-elev: #19211e;
-    --bg-sunken: #0c100f;
-    --fg: #e6ece9;
-    --fg-muted: #9aa8a2;
-    --fg-faint: #6a7772;
-    --line: #26312d;
-    --line-strong: #3a4742;
-    --accent: #3fae90;
-    --accent-fg: #06110d;
-    --accent-soft: #163a31;
-    --ok: #3fc275;
-    --ok-soft: #12321f;
-    --warn: #e0a84a;
-    --warn-soft: #3a2c10;
-    --bad: #ef6b62;
-    --bad-soft: #3d1815;
-    --info: #5f9de0;
-    --rx: #5f9de0;
-    --tx: #3fae90;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
-    color-scheme: dark;
-  }
-}
-
 * { box-sizing: border-box; }
 html, body, #root { height: 100%; }
 body {
@@ -89,10 +90,7 @@ button, input, select, textarea { font: inherit; color: inherit; }
   height: 100vh;
 }
 .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
-.brand-mark {
-  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
-  display: grid; place-items: center; color: var(--accent-fg); flex: none;
-}
+.brand-mark { display: grid; place-items: center; flex: none; line-height: 0; }
 .brand-name { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
 .brand-sub { font-size: 11px; color: var(--fg-muted); }
 .nav a {

web/src/theme.ts

@@ -0,0 +1,45 @@
+// Theme preference: dark by default, light on request, or follow the OS.
+// The choice is a per-browser convenience kept in localStorage; the resolved
+// theme lands on <html data-theme> so the stylesheet needs only one selector.
+
+export type ThemeChoice = "dark" | "light" | "system";
+
+const KEY = "wgx.theme";
+const media = window.matchMedia("(prefers-color-scheme: light)");
+
+export function getThemeChoice(): ThemeChoice {
+  try {
+    const v = localStorage.getItem(KEY);
+    if (v === "light" || v === "system" || v === "dark") return v;
+  } catch {
+    /* storage unavailable */
+  }
+  return "dark";
+}
+
+function resolve(choice: ThemeChoice): "dark" | "light" {
+  if (choice === "system") return media.matches ? "light" : "dark";
+  return choice;
+}
+
+export function applyTheme(choice: ThemeChoice) {
+  document.documentElement.dataset.theme = resolve(choice);
+}
+
+export function setThemeChoice(choice: ThemeChoice) {
+  try {
+    localStorage.setItem(KEY, choice);
+  } catch {
+    /* storage unavailable */
+  }
+  applyTheme(choice);
+}
+
+// Called once at startup: paints the right theme before React renders and
+// keeps "system" honest when the OS switches.
+export function initTheme() {
+  applyTheme(getThemeChoice());
+  media.addEventListener("change", () => {
+    if (getThemeChoice() === "system") applyTheme("system");
+  });
+}