@@ -14,7 +14,7 @@ import { execFileSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { BROWSER_MODULES, isListed, esc, latestAllowedDate, OG_CARD_NAME, opensearchXml, siteFooterHtml, siteHeaderHtml } from "./lib/shared.mjs";
+import { BROWSER_MODULES, FONT_FILES, PAGE_MODULES, isListed, esc, latestAllowedDate, OG_CARD_NAME, opensearchXml, siteFooterHtml, siteHeaderHtml } from "./lib/shared.mjs";
 import { bodySearchText } from "./lib/search.mjs";
 import { filmstripHtml, groupedEntriesHtml } from "./lib/cards.mjs";
 import { guidePageHtml } from "./lib/guide-page.mjs";
@@ -37,6 +37,7 @@ import { stackPageHtml } from "./lib/stack-page.mjs";
 import { freshnessLineHtml, freshnessPageHtml, freshnessStats, newEntriesLineHtml } from "./lib/freshness.mjs";
 import { licenceTerms, listStackFiles, owes, parseStack, pickPath } from "./lib/stacks.mjs";
 import { createDistWriter } from "./lib/dist-writer.mjs";
+import { serviceWorkerJs, webManifest } from "./lib/offline.mjs";
 import { ATTRIBUTION_RANK, categoryChipsHtml, guideRowsHtml, headMetaHtml, licenseFamily, notFoundHtml, robotsTxt, stackRowsHtml, starterRowsHtml } from "./lib/home-page.mjs";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -563,6 +564,12 @@ function main() {
   const modified = lastCommitDates();
   writeOut("sitemap.xml", sitemapXml({ site: config.site, entries: visible, stacks, stamp, modified, categories: categoriesInSitemap, guides: config.guides }));
   writeOut("robots.txt", robotsTxt(config.site));
+  // Installable, and the catalog works offline after one visit (#111).
+  writeOut("manifest.webmanifest", `${JSON.stringify(webManifest(config.site), null, 2)}\n`);
+  writeOut("sw.js", serviceWorkerJs({
+    version: payload.generatedAt,
+    precache: [...new Set(["./", "data.js", "styles.css", "theme.js", "favicon.svg", ...PAGE_MODULES.home, ...FONT_FILES])],
+  }));
   writeOut("opensearch.xml", opensearchXml(config.site));
   writeOut("404.html", notFoundHtml(config.site));
   writeOut(path.join("freshness", "index.html"), freshnessPageHtml({ stats: fresh, site: config.site, stamp, total: stats.listed, hasCard }));
 
@@ -2503,6 +2503,25 @@ await section("homepage helpers out of build.mjs (#85)", async () => {
   eq("pickPath: query and fragment dropped like the resolver", pickPath("stacks/s.md", "../catalog/2d/a.md?x=1#y"), "catalog/2d/a.md");
 });
 
+/* theme, manifest and offline worker (#111) -------------------------------- */
+await section("theme, manifest and offline worker (#111)", async () => {
+  const { webManifest, serviceWorkerJs } = await import("./offline.mjs");
+  const { headAssetsHtml, siteHeaderHtml } = await import("./shared.mjs");
+  const m = webManifest({ title: "Site", tagline: "Tag" });
+  eq("manifest: relative start and scope", `${m.start_url}|${m.scope}`, "./|./");
+  eq("manifest: standalone with an icon", `${m.display}|${m.icons[0].src}`, "standalone|favicon.svg");
+  const sw = serviceWorkerJs({ version: "2026-11-07T00:00:00Z", precache: ["./", "data.js"] });
+  has("worker: cache named by the build", sw, 'const CACHE = "fgda-2026-11-07T00:00:00Z";');
+  has("worker: precache list", sw, 'const PRECACHE = ["./","data.js"];');
+  has("worker: network first", sw, "fetch(req)");
+  has("worker: old caches dropped", sw, "caches.delete(k)");
+  has("worker: same origin only", sw, "self.location.origin");
+  const head = headAssetsHtml("../../").join("\n");
+  has("head: theme script, blocking, from the root", head, '<script src="../../theme.js"></script>');
+  has("head: manifest link", head, '<link rel="manifest" href="../../manifest.webmanifest" />');
+  has("header: theme toggle, hidden until theme.js runs", siteHeaderHtml({ root: "", repo: "https://g.test/o/r" }), 'id="theme-toggle" hidden');
+});
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);
 
@@ -0,0 +1,72 @@
+/**
+ * The web app manifest and the offline service worker (#111). Pure: the
+ * build writes both into dist. The worker is network-first for every
+ * same-origin GET, so an online reader always gets the current build; what
+ * it fetched is kept, and offline it answers from that copy. The homepage,
+ * its scripts, styles and fonts are fetched at install, so search and the
+ * shortlist work offline after one visit. The cache name carries the build
+ * time, and older caches are deleted on activate.
+ */
+
+/**
+ * manifest.webmanifest for the site. Relative URLs resolve against the
+ * manifest, which sits at the site root, so the same file works on Pages
+ * and on a local server.
+ */
+export function webManifest(site) {
+  return {
+    name: site.title,
+    short_name: "Free Game Dev Assets",
+    description: site.tagline,
+    start_url: "./",
+    scope: "./",
+    display: "standalone",
+    background_color: "#eef1f4",
+    theme_color: "#1a4d3e",
+    icons: [{ src: "favicon.svg", sizes: "any", type: "image/svg+xml", purpose: "any maskable" }],
+  };
+}
+
+/** sw.js: `version` names the cache, `precache` lists site-relative files. */
+export function serviceWorkerJs({ version, precache }) {
+  return `// Generated by site/build.mjs (lib/offline.mjs). Network first; the cache is the offline copy.
+const CACHE = ${JSON.stringify(`fgda-${version}`)};
+const PRECACHE = ${JSON.stringify(precache)};
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(PRECACHE.map((p) => new URL(p, self.registration.scope)))).then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k.startsWith("fgda-") && k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  if (req.method !== "GET" || new URL(req.url).origin !== self.location.origin) return;
+  event.respondWith(
+    fetch(req)
+      .then((res) => {
+        if (res.ok && res.type === "basic") {
+          const copy = res.clone();
+          caches.open(CACHE).then((cache) => cache.put(req, copy));
+        }
+        return res;
+      })
+      .catch(async () => {
+        const hit = await caches.match(req, { ignoreSearch: req.mode === "navigate" });
+        if (hit) return hit;
+        // An uncached page offline: the catalog home, which can still search.
+        if (req.mode === "navigate") return caches.match(new URL("./", self.registration.scope));
+        return Response.error();
+      })
+  );
+});
+`;
+}
@@ -250,6 +250,7 @@ export function siteHeaderHtml({ root, repo }) {
         <a href="${root}#starters">Starters</a>
         <a href="${root}#guides">Guides</a>
         <a href="${esc(repo)}" rel="noopener noreferrer">GitHub</a>
+        <button type="button" class="theme-toggle" id="theme-toggle" hidden>Theme: system</button>
         <span class="nav-sponsor">${sponsorButtonHtml()}</span>
       </nav>
     </header>`;
@@ -362,6 +363,9 @@ export function headAssetsHtml(root = "./") {
     `<link rel="icon" href="${esc(root)}favicon.svg" type="image/svg+xml" />`,
     ...FONT_FILES.map((f) => `<link rel="preload" href="${esc(root)}${f}" as="font" type="font/woff2" crossorigin />`),
     `<link rel="stylesheet" href="${esc(root)}styles.css" />`,
+    `<link rel="manifest" href="${esc(root)}manifest.webmanifest" />`,
+    // Blocking on purpose: it sets the chosen theme before the first paint (#111).
+    `<script src="${esc(root)}theme.js"></script>`,
   ];
 }
 
 
@@ -60,9 +60,47 @@
   color-scheme: light dark;
 }
 
-/* The catalog is read at night as often as not. Same tokens, restated. */
+/* The catalog is read at night as often as not. Same tokens, restated: for
+   the system dark scheme unless the reader chose light, and whenever they
+   chose dark (theme.js sets data-theme on <html>; #111). */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
+    --bg: #0f1216;
+    --ink: #e8ecf1;
+    --muted: #9aa5b3;
+    --line: #2b323c;
+    --control-line: #616b7b;
+    --surface: #161b22;
+    --accent: #7fd4b4;
+    --ok: #7fd4b4;
+    --warn: #e0b060;
+    --danger: #f08a8a;
+    --unknown: #9aa5b3;
+    --fresh: #7fd4b4;
+    --aging: #e0b060;
+    --stale: #f08a8a;
+  }
+
+  :root:not([data-theme="light"]) .btn {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: #0f1216;
+  }
+
+  :root:not([data-theme="light"]) .btn:hover {
+    background: var(--ink);
+    border-color: var(--ink);
+    color: #0f1216;
+  }
+
+  :root:not([data-theme="light"]) .chip.is-active {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: #0f1216;
+  }
+
+}
+  :root[data-theme="dark"] {
     --bg: #0f1216;
     --ink: #e8ecf1;
     --muted: #9aa5b3;
@@ -79,26 +117,45 @@
     --stale: #f08a8a;
   }
 
-  .btn {
+  :root[data-theme="dark"] .btn {
     border-color: var(--accent);
     background: var(--accent);
     color: #0f1216;
   }
 
-  .btn:hover {
+  :root[data-theme="dark"] .btn:hover {
     background: var(--ink);
     border-color: var(--ink);
     color: #0f1216;
   }
 
-  .chip.is-active {
+  :root[data-theme="dark"] .chip.is-active {
     border-color: var(--accent);
     background: var(--accent);
     color: #0f1216;
   }
 
+
+:root[data-theme="light"] {
+  color-scheme: light;
 }
 
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+.theme-toggle {
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+
 *,
 *::before,
 *::after {
 
@@ -0,0 +1,50 @@
+/**
+ * Theme choice (#111): system, light or dark, kept in this browser. Loaded
+ * as a plain blocking script in <head> so the colours are right before the
+ * first paint; the Content-Security-Policy allows no inline script, so this
+ * file is it. The header button cycles the three choices. It also registers
+ * the offline service worker (sw.js). Pages work without it.
+ */
+(() => {
+  // This script's own URL: sw.js sits beside it at the site root.
+  const here = document.currentScript ? document.currentScript.src : document.baseURI;
+  const KEY = "fgda:theme";
+  const CHOICES = ["system", "light", "dark"];
+  const read = () => {
+    try {
+      const v = localStorage.getItem(KEY);
+      return CHOICES.includes(v) ? v : "system";
+    } catch {
+      return "system";
+    }
+  };
+  const apply = (choice) => {
+    if (choice === "system") document.documentElement.removeAttribute("data-theme");
+    else document.documentElement.setAttribute("data-theme", choice);
+  };
+  apply(read());
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const btn = document.getElementById("theme-toggle");
+    if (btn) {
+      const label = (c) => `Theme: ${c}`;
+      btn.hidden = false;
+      btn.textContent = label(read());
+      btn.addEventListener("click", () => {
+        const next = CHOICES[(CHOICES.indexOf(read()) + 1) % CHOICES.length];
+        try {
+          if (next === "system") localStorage.removeItem(KEY);
+          else localStorage.setItem(KEY, next);
+        } catch {
+          // Storage off: the choice lasts for this page only.
+        }
+        apply(next);
+        btn.textContent = label(next);
+      });
+    }
+    // Offline copy of the catalog.
+    if ("serviceWorker" in navigator && (location.protocol === "https:" || location.hostname === "localhost")) {
+      navigator.serviceWorker.register(new URL("sw.js", here)).catch(() => {});
+    }
+  });
+})();