Site: light and dark mode for the landing page, plant overview and fleet calculator

User, October 2026: add bright/dark mode to the site for both tools.

- Each page sets data-theme on <html> before first paint: the saved choice
  (localStorage "cnx-theme", shared by all cnxvinyl.lol pages) or, without
  one, the system setting (prefers-color-scheme), which it keeps following
  until the user picks a mode. Toggle: header button (sun / moon).
- Plant overview: light overrides for every SVG class; pipe colours are
  now CSS variables (--p-*), used by the pipes and the legend, darkened in
  light mode where the dark-mode tints were too pale (DI water, granulate,
  stamper sets, cooling return); press state text and the VEX zone fills
  use variables instead of inline hex, so they flip with the theme.
- Fleet calculator and landing page: light palettes; input, flag, badge
  and ladder-highlight colours moved to variables.

Checked headless in Edge: both system schemes pick the right mode, the
toggle persists across pages, computed colours flip (press text, zones,
pipes, legend), no text overflow in either mode, no JS errors.

site/public/index.html

@@ -5,11 +5,28 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title>CNX Vinyl · internal test site</title>
+<script>
+(function(){var t=null;try{t=localStorage.getItem("cnx-theme")}catch(e){}
+if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
+document.documentElement.setAttribute("data-theme",t);})();
+</script>
 <style>
   :root {
     --bg: #0a0f1a; --panel: #0f1626; --stroke: #2a3a56;
     --fg: #d6deeb; --mute: #8a97b0; --accent: #3ddc84;
   }
+  :root { color-scheme: dark; }
+  html[data-theme=light] {
+    color-scheme: light;
+    --bg: #f4f6fa; --panel: #ffffff; --stroke: #cfd8e6;
+    --fg: #1b2533; --mute: #5b6880; --accent: #0e8f4f;
+  }
+  main { position: relative; }
+  .themebtn {
+    position: absolute; top: 48px; right: 20px; background: var(--panel); color: var(--fg);
+    border: 1px solid var(--stroke); border-radius: 5px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
+  }
+  .themebtn:hover { border-color: var(--accent); }
   * { box-sizing: border-box; }
   body {
     margin: 0; background: var(--bg); color: var(--fg);
@@ -41,6 +58,7 @@
 </head>
 <body>
 <main>
+  <button class="themebtn" id="themeBtn" type="button">Light mode</button>
   <h1>CNX Vinyl</h1>
   <span class="tag">internal test site</span>
   <p class="lead">
@@ -79,5 +97,16 @@
 
   <footer>Built from <code>site/</code> in the cnx_vinyl repository.</footer>
 </main>
+<script>
+(function(){
+  var b=document.getElementById("themeBtn"),de=document.documentElement;
+  function set(t,save){de.setAttribute("data-theme",t);if(save){try{localStorage.setItem("cnx-theme",t)}catch(e){}}
+    b.textContent=t==="light"?"☾ Dark mode":"☀ Light mode";b.title="Switch to "+(t==="light"?"dark":"light")+" mode";}
+  set(de.getAttribute("data-theme")||"dark",false);
+  b.addEventListener("click",function(){set(de.getAttribute("data-theme")==="light"?"dark":"light",true);b.blur();});
+  var mq=window.matchMedia&&matchMedia("(prefers-color-scheme: light)");
+  if(mq&&mq.addEventListener)mq.addEventListener("change",function(e){var s=null;try{s=localStorage.getItem("cnx-theme")}catch(_){}if(!s)set(e.matches?"light":"dark",false);});
+})();
+</script>
 </body>
 </html>