feat(website): add a persistent light and dark theme switch

scripts/test-website.py

@@ -401,7 +401,7 @@ class WebsiteTranslationChecks(unittest.TestCase):
                 server.shutdown()
                 worker.join()
 
-    def test_every_reading_page_offers_light_and_dark_theme_colors(self):
+    def test_every_reading_page_loads_theme_before_styles(self):
         site = ROOT / "website/_site"
         english_pages = reading_pages(ROOT / "website/public")
         self.assertTrue(english_pages)
@@ -412,10 +412,20 @@ class WebsiteTranslationChecks(unittest.TestCase):
                 for path in {original, site / relative if code == "en" else site / code / relative}:
                     with self.subTest(language=code, page=str(path.relative_to(ROOT))):
                         doc = Document(path.read_text())
-                        media = sorted(node.attrs.get("media") for node in doc.nodes if node.tag == "meta" and node.attrs.get("name") == "theme-color")
-                        self.assertEqual(media, ["(prefers-color-scheme: dark)", "(prefers-color-scheme: light)"])
-        styles = (ROOT / "website/public/assets/styles.css").read_text()
-        self.assertTrue("@media (prefers-color-scheme: dark)" in styles, "styles.css has no dark color scheme block")
+                        colors = [node for node in doc.nodes if node.tag == "meta" and node.attrs.get("name") == "theme-color"]
+                        self.assertEqual(len(colors), 1)
+                        self.assertEqual(colors[0].attrs.get("content"), "#ffffff")
+                        self.assertNotIn("media", colors[0].attrs)
+                        theme = [node for node in doc.nodes if node.tag == "script" and (node.attrs.get("src") or "").endswith("/assets/theme.js")]
+                        self.assertEqual(len(theme), 1)
+                        for deferred in ("defer", "async", "type"):
+                            self.assertNotIn(deferred, theme[0].attrs)
+                        stylesheet = next(node for node in doc.nodes if node.tag == "link" and node.attrs.get("rel") == "stylesheet")
+                        self.assertLess(theme[0].start, stylesheet.start)
+                        toggle = [node for node in doc.nodes if "data-theme-toggle" in node.attrs]
+                        self.assertEqual(len(toggle), 1)
+                        self.assertEqual(toggle[0].tag, "button")
+                        self.assertIn("hidden", toggle[0].attrs)
 
 
 if __name__ == "__main__":

scripts/website.py

@@ -119,7 +119,7 @@ def shared_blocks(root, path, source):
     templates = root / "website/templates"
     return {
         name: indent(Template((templates / f"{name}.html.tmpl").read_text(encoding="utf-8")).substitute(values), "    ")
-        for name in ("sharing", "header", "footer")
+        for name in ("sharing", "theme", "header", "footer")
     }
 
 

website/AGENTS.md

@@ -43,8 +43,9 @@ for asset notes and the source of case-study claims.
   from HTML automatically. Mark example applications `noindex` in the head and
   keep them crawlable. Maintain the SVG sharing source, not the generated PNG.
 - Check both local root and `/rea/` paths, mobile layouts, expanded details,
-  copying and downloads. Run `python3 scripts/website.py check`, using the Python
-  environment described in the README. It rejects drift rather than silently
+  copying and downloads. Check light and dark themes, including a manual choice
+  opposite to the system preference. Run `python3 scripts/website.py check`,
+  using the Python environment described in the README. It rejects drift rather than silently
   rewriting shared HTML. Use `website.py links` for an optional network audit;
   distinguish missing targets from access denials and unverified fragments.
 - Check setup and support statements against the current installation/provider

website/README.md

@@ -47,14 +47,15 @@ Edit the page's HTML in `public/`. Keep the question, evidence and result easy t
 follow. The writing and design guidance in [style-guide.md](style-guide.md)
 applies to every page.
 
-| Change                         | Edit                                                             | Then run                                        |
-| ------------------------------ | ---------------------------------------------------------------- | ----------------------------------------------- |
-| Page text, examples or figures | The page's HTML outside the marked shared regions                | `python3 scripts/website.py check`              |
-| Search title or description    | The page's `<title>` and first description meta tag              | `python3 scripts/website.py sync`, then `check` |
-| Main navigation                | `NAVIGATION` in `scripts/website.py`                             | `sync`, then `check`                            |
-| Header, social links or footer | `templates/header.html.tmpl` or `templates/footer.html.tmpl`     | `sync`, then `check`                            |
-| Shared link previews           | `templates/sharing.html.tmpl` or `public/assets/social-card.svg` | `sync`, then `check`                            |
-| Translation                    | `locales/<language>/messages.po`                                 | `translations check`, then `check`              |
+| Change                          | Edit                                                             | Then run                                        |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
+| Page text, examples or figures  | The page's HTML outside the marked shared regions                | `python3 scripts/website.py check`              |
+| Search title or description     | The page's `<title>` and first description meta tag              | `python3 scripts/website.py sync`, then `check` |
+| Main navigation                 | `NAVIGATION` in `scripts/website.py`                             | `sync`, then `check`                            |
+| Header, social links or footer  | `templates/header.html.tmpl` or `templates/footer.html.tmpl`     | `sync`, then `check`                            |
+| Theme loading and browser color | `templates/theme.html.tmpl` and `public/assets/theme.js`         | `sync`, then `check`                            |
+| Shared link previews            | `templates/sharing.html.tmpl` or `public/assets/social-card.svg` | `sync`, then `check`                            |
+| Translation                     | `locales/<language>/messages.po`                                 | `translations check`, then `check`              |
 
 After changing English text, run `python3 scripts/website.py translations extract`
 before `check`. Existing translations and reviewer comments survive extraction;
@@ -256,6 +257,19 @@ respecting reduced-motion preferences. Both the prompt and animation work
 without JavaScript. The homepage and agent setup section share a copyable
 installation prompt; setup still presents its plan for approval.
 
+The header's sun/moon button switches the color theme. A first visit follows the
+system preference, falling back to light when no preference is given. Manual
+choices are saved in browser storage under `rea-theme` and apply across pages,
+language editions and tabs on the same host. If storage is blocked, the button
+still works for the current page. Without JavaScript, the site stays light and
+the button stays hidden.
+
+The shared `theme` head region loads `assets/theme.js` before the stylesheet so a
+saved choice applies before the first paint. That script owns the resolved
+`data-theme`, browser `theme-color` and `website-theme-change` event. The CSS
+palette, embedded SVGs and dinosaur canvas follow that choice. Keep the theme
+region in the page scaffold and run `sync` after editing its template.
+
 Reading pages share a small `↑ Top` link at the bottom right. It appears after
 scrolling and returns to the page header, with smooth scrolling when reduced
 motion is disabled. Keyboard activation returns focus to the first navigation

website/public/assets/dino-demo.js

@@ -224,9 +224,7 @@ function initializeDinoDemo(demo) {
         stop(t("Paused. Press Play to continue."));
     }).observe(demo);
   }
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", draw);
+  window.addEventListener("website-theme-change", draw);
   demo.querySelector(".dino-fallback").setAttribute("hidden", "");
   demo.querySelector(".dino-controls").hidden = false;
   canvas.hidden = false;

website/public/assets/styles.css

@@ -284,6 +284,31 @@ section[id] {
   align-items: center;
   gap: 8px;
 }
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--page);
+  color: var(--muted);
+}
+.theme-toggle:hover {
+  background: var(--soft);
+  color: var(--ink);
+}
+.theme-toggle[hidden],
+.theme-toggle .theme-sun,
+:root[data-theme="dark"] .theme-toggle .theme-moon {
+  display: none;
+}
+:root[data-theme="dark"] .theme-toggle .theme-sun {
+  display: block;
+}
 .nav-github,
 .nav-discord,
 .nav-x {
@@ -394,7 +419,7 @@ section[id] {
   font-weight: 600;
 }
 .button.home-setup-link:hover {
-  background: #eef3fa;
+  background: var(--soft);
 }
 html[dir="rtl"] .home-setup-link .button-arrow {
   transform: scaleX(-1);
@@ -2606,96 +2631,94 @@ pre code {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-    --ink: #cdd6f4;
-    --muted: #a6adc8;
-    --line: #45475a;
-    --soft: #181825;
-    --accent: #89b4fa;
-    --page: #1e1e2e;
-  }
-  ::selection {
-    background: #45475a;
-  }
-  .dino-stage {
-    --dino-ground: #45475a;
-    --dino-ink: #a6adc8;
-    --dino-player: #89b4fa;
-    --dino-crash: #f38ba8;
-    --dino-eye: #181825;
-  }
-  .reconstruction-flywheel [stroke="#294f82"] {
-    stroke: var(--accent);
-  }
-  .reconstruction-flywheel [stroke="#5b6570"] {
-    stroke: var(--muted);
-  }
-  .skip-link,
-  .button,
-  .dino-buttons .button {
-    color: var(--page);
-  }
-  .button {
-    border-color: #bac2de;
-    background: #bac2de;
-  }
-  .button:hover {
-    border-color: #a6adc8;
-    background: #a6adc8;
-  }
-  .code-key,
-  .notion-channel,
-  .prose-highlight,
-  .step-selector button[aria-pressed="true"],
-  .percent-operation button[aria-pressed="true"],
-  .flow-result,
-  .home-nav-links a[aria-current="location"] {
-    background: #313244;
-  }
-  .copy-button:hover {
-    background: #313244;
-  }
-  .step-comparison .is-active {
-    background: #313244;
-    color: #b4befe;
-  }
-  .article p,
-  .article li,
-  .guide-route span {
-    color: #bac2de;
-  }
-  .prompt {
-    border-left-color: #585b70;
-  }
-  .agent-terminal {
-    border-color: var(--line);
-    background: #181825;
-  }
-  .terminal-header {
-    border-bottom-color: #313244;
-  }
-  .agent-terminal .copy-button:hover {
-    background: #313244;
-  }
-  .agent-one-prompt {
-    color: var(--ink);
-  }
-  .workflow-figure {
-    background: var(--soft);
-  }
-  .flow-node {
-    background: #313244;
-    border-color: #585b70;
-  }
-  .flow-steps li:not(:last-child)::after,
-  .notion-mini-flow li:not(:last-child)::after {
-    color: #9399b2;
-  }
-  .percent-controls .percent-key {
-    border-color: #585b70;
-  }
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ink: #cdd6f4;
+  --muted: #a6adc8;
+  --line: #45475a;
+  --soft: #181825;
+  --accent: #89b4fa;
+  --page: #1e1e2e;
+}
+:where(:root[data-theme="dark"]) ::selection {
+  background: #45475a;
+}
+:where(:root[data-theme="dark"]) .dino-stage {
+  --dino-ground: #45475a;
+  --dino-ink: #a6adc8;
+  --dino-player: #89b4fa;
+  --dino-crash: #f38ba8;
+  --dino-eye: #181825;
+}
+:where(:root[data-theme="dark"]) .reconstruction-flywheel [stroke="#294f82"] {
+  stroke: var(--accent);
+}
+:where(:root[data-theme="dark"]) .reconstruction-flywheel [stroke="#5b6570"] {
+  stroke: var(--muted);
+}
+:where(:root[data-theme="dark"]) .skip-link,
+:where(:root[data-theme="dark"]) .button,
+:where(:root[data-theme="dark"]) .dino-buttons .button {
+  color: var(--page);
+}
+:where(:root[data-theme="dark"]) .button {
+  border-color: #bac2de;
+  background: #bac2de;
+}
+:where(:root[data-theme="dark"]) .button:hover {
+  border-color: #a6adc8;
+  background: #a6adc8;
+}
+:where(:root[data-theme="dark"]) .code-key,
+:where(:root[data-theme="dark"]) .notion-channel,
+:where(:root[data-theme="dark"]) .prose-highlight,
+:where(:root[data-theme="dark"]) .step-selector button[aria-pressed="true"],
+:where(:root[data-theme="dark"]) .percent-operation button[aria-pressed="true"],
+:where(:root[data-theme="dark"]) .flow-result,
+:where(:root[data-theme="dark"]) .home-nav-links a[aria-current="location"] {
+  background: #313244;
+}
+:where(:root[data-theme="dark"]) .copy-button:hover {
+  background: #313244;
+}
+:where(:root[data-theme="dark"]) .step-comparison .is-active {
+  background: #313244;
+  color: #b4befe;
+}
+:where(:root[data-theme="dark"]) .article p,
+:where(:root[data-theme="dark"]) .article li,
+:where(:root[data-theme="dark"]) .guide-route span {
+  color: #bac2de;
+}
+:where(:root[data-theme="dark"]) .prompt {
+  border-left-color: #585b70;
+}
+:where(:root[data-theme="dark"]) .agent-terminal {
+  border-color: var(--line);
+  background: #181825;
+}
+:where(:root[data-theme="dark"]) .terminal-header {
+  border-bottom-color: #313244;
+}
+:where(:root[data-theme="dark"]) .agent-terminal .copy-button:hover {
+  background: #313244;
+}
+:where(:root[data-theme="dark"]) .agent-one-prompt {
+  color: var(--ink);
+}
+:where(:root[data-theme="dark"]) .workflow-figure {
+  background: var(--soft);
+}
+:where(:root[data-theme="dark"]) .flow-node {
+  background: #313244;
+  border-color: #585b70;
+}
+:where(:root[data-theme="dark"]) .flow-steps li:not(:last-child)::after,
+:where(:root[data-theme="dark"]) .notion-mini-flow li:not(:last-child)::after {
+  color: #9399b2;
+}
+:where(:root[data-theme="dark"]) .percent-controls .percent-key {
+  border-color: #585b70;
 }
 
 @media (max-width: 360px) {

website/public/assets/theme.js

@@ -0,0 +1,70 @@
+// This small, blocking head script applies the theme before the first paint.
+(() => {
+  const root = document.documentElement;
+  const system = window.matchMedia("(prefers-color-scheme: dark)");
+  const storageKey = "rea-theme";
+  const parseChoice = (value) =>
+    value === "light" || value === "dark" ? value : null;
+  let choice = null;
+  let storage = null;
+  try {
+    storage = window.localStorage;
+    choice = parseChoice(storage.getItem(storageKey));
+  } catch {
+    // The switch still works when browser storage is unavailable.
+  }
+
+  const applyTheme = () => {
+    const theme = choice ?? (system.matches ? "dark" : "light");
+    root.dataset.theme = theme;
+    document.querySelector('meta[name="theme-color"]').content =
+      theme === "dark" ? "#1e1e2e" : "#ffffff";
+    window.dispatchEvent(new Event("website-theme-change"));
+  };
+
+  applyTheme();
+  system.addEventListener("change", () => {
+    if (choice === null) applyTheme();
+  });
+  window.addEventListener("storage", (event) => {
+    if (
+      storage !== null &&
+      event.storageArea === storage &&
+      (event.key === storageKey || event.key === null)
+    ) {
+      try {
+        // Another tab may have written a newer choice while this event waited.
+        choice = parseChoice(storage.getItem(storageKey));
+      } catch {
+        return;
+      }
+      applyTheme();
+    }
+  });
+
+  document.addEventListener("DOMContentLoaded", async () => {
+    const button = document.querySelector("[data-theme-toggle]");
+    if (button === null) return;
+    const { t } = await import("./i18n.js");
+    const updateLabel = () => {
+      const label =
+        root.dataset.theme === "dark"
+          ? t("Switch to light mode")
+          : t("Switch to dark mode");
+      button.setAttribute("aria-label", label);
+      button.title = label;
+    };
+    window.addEventListener("website-theme-change", updateLabel);
+    button.addEventListener("click", () => {
+      choice = root.dataset.theme === "dark" ? "light" : "dark";
+      try {
+        storage?.setItem(storageKey, choice);
+      } catch {
+        // Retain the choice for this page even if it cannot be saved.
+      }
+      applyTheme();
+    });
+    updateLabel();
+    button.hidden = false;
+  });
+})();

website/public/blog/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../assets/styles.css" />
     <script src="../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../blog/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../zh-CN/blog/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../zh-TW/blog/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../ja/blog/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../ko/blog/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../tr/blog/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../ru/blog/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../vi/blog/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../th/blog/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../de/blog/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../es/blog/" lang="es" dir="ltr" data-language="es">Español</a><a href="../fr/blog/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../uk/blog/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../pl/blog/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../pt-BR/blog/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../ar/blog/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../fa/blog/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../id/blog/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../it/blog/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/blog/touhou-reconstruction/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../blog/touhou-reconstruction/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/blog/touhou-reconstruction/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/blog/touhou-reconstruction/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/blog/touhou-reconstruction/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/blog/touhou-reconstruction/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/blog/touhou-reconstruction/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/blog/touhou-reconstruction/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/blog/touhou-reconstruction/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/blog/touhou-reconstruction/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/blog/touhou-reconstruction/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/blog/touhou-reconstruction/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/blog/touhou-reconstruction/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/blog/touhou-reconstruction/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/blog/touhou-reconstruction/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/blog/touhou-reconstruction/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/blog/touhou-reconstruction/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/blog/touhou-reconstruction/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/blog/touhou-reconstruction/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/blog/touhou-reconstruction/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/examples/dino-lab/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -124,6 +119,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../examples/dino-lab/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/examples/dino-lab/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/examples/dino-lab/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/examples/dino-lab/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/examples/dino-lab/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/examples/dino-lab/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/examples/dino-lab/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/examples/dino-lab/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/examples/dino-lab/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/examples/dino-lab/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/examples/dino-lab/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/examples/dino-lab/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/examples/dino-lab/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/examples/dino-lab/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/examples/dino-lab/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/examples/dino-lab/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/examples/dino-lab/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/examples/dino-lab/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/examples/dino-lab/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/faq/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../assets/styles.css" />
     <script src="../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../faq/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../zh-CN/faq/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../zh-TW/faq/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../ja/faq/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../ko/faq/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../tr/faq/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../ru/faq/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../vi/faq/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../th/faq/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../de/faq/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../es/faq/" lang="es" dir="ltr" data-language="es">Español</a><a href="../fr/faq/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../uk/faq/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../pl/faq/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../pt-BR/faq/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../ar/faq/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../fa/faq/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../id/faq/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../it/faq/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/first-investigation/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../assets/styles.css" />
     <script src="../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../first-investigation/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../zh-CN/first-investigation/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../zh-TW/first-investigation/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../ja/first-investigation/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../ko/first-investigation/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../tr/first-investigation/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../ru/first-investigation/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../vi/first-investigation/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../th/first-investigation/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../de/first-investigation/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../es/first-investigation/" lang="es" dir="ltr" data-language="es">Español</a><a href="../fr/first-investigation/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../uk/first-investigation/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../pl/first-investigation/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../pt-BR/first-investigation/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../ar/first-investigation/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../fa/first-investigation/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../id/first-investigation/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../it/first-investigation/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/get-started/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../assets/styles.css" />
     <script src="../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../get-started/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../zh-CN/get-started/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../zh-TW/get-started/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../ja/get-started/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../ko/get-started/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../tr/get-started/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../ru/get-started/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../vi/get-started/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../th/get-started/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../de/get-started/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../es/get-started/" lang="es" dir="ltr" data-language="es">Español</a><a href="../fr/get-started/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../uk/get-started/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../pl/get-started/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../pt-BR/get-started/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../ar/get-started/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../fa/get-started/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../id/get-started/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../it/get-started/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/guides/browser/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../guides/browser/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/guides/browser/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/guides/browser/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/guides/browser/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/guides/browser/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/guides/browser/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/guides/browser/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/guides/browser/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/guides/browser/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/guides/browser/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/guides/browser/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/guides/browser/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/guides/browser/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/guides/browser/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/guides/browser/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/guides/browser/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/guides/browser/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/guides/browser/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/guides/browser/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/guides/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../assets/styles.css" />
     <script src="../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../guides/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../zh-CN/guides/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../zh-TW/guides/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../ja/guides/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../ko/guides/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../tr/guides/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../ru/guides/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../vi/guides/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../th/guides/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../de/guides/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../es/guides/" lang="es" dir="ltr" data-language="es">Español</a><a href="../fr/guides/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../uk/guides/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../pl/guides/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../pt-BR/guides/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../ar/guides/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../fa/guides/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../id/guides/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../it/guides/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/guides/javascript/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../guides/javascript/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/guides/javascript/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/guides/javascript/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/guides/javascript/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/guides/javascript/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/guides/javascript/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/guides/javascript/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/guides/javascript/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/guides/javascript/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/guides/javascript/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/guides/javascript/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/guides/javascript/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/guides/javascript/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/guides/javascript/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/guides/javascript/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/guides/javascript/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/guides/javascript/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/guides/javascript/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/guides/javascript/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/guides/native/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../guides/native/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/guides/native/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/guides/native/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/guides/native/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/guides/native/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/guides/native/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/guides/native/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/guides/native/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/guides/native/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/guides/native/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/guides/native/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/guides/native/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/guides/native/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/guides/native/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/guides/native/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/guides/native/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/guides/native/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/guides/native/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/guides/native/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="./assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="assets/styles.css" />
     <script src="assets/main.js" defer></script>
@@ -125,6 +120,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="./" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="./zh-CN/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="./zh-TW/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="./ja/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="./ko/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="./tr/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="./ru/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="./vi/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="./th/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="./de/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="./es/" lang="es" dir="ltr" data-language="es">Español</a><a href="./fr/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="./uk/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="./pl/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="./pt-BR/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="./ar/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="./fa/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="./id/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="./it/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/showcase/aegis/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -124,6 +119,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../showcase/aegis/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/showcase/aegis/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/showcase/aegis/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/showcase/aegis/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/showcase/aegis/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/showcase/aegis/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/showcase/aegis/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/showcase/aegis/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/showcase/aegis/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/showcase/aegis/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/showcase/aegis/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/showcase/aegis/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/showcase/aegis/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/showcase/aegis/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/showcase/aegis/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/showcase/aegis/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/showcase/aegis/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/showcase/aegis/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/showcase/aegis/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/showcase/ctf/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../showcase/ctf/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/showcase/ctf/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/showcase/ctf/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/showcase/ctf/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/showcase/ctf/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/showcase/ctf/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/showcase/ctf/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/showcase/ctf/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/showcase/ctf/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/showcase/ctf/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/showcase/ctf/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/showcase/ctf/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/showcase/ctf/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/showcase/ctf/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/showcase/ctf/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/showcase/ctf/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/showcase/ctf/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/showcase/ctf/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/showcase/ctf/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/showcase/dx-ball/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../showcase/dx-ball/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/showcase/dx-ball/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/showcase/dx-ball/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/showcase/dx-ball/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/showcase/dx-ball/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/showcase/dx-ball/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/showcase/dx-ball/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/showcase/dx-ball/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/showcase/dx-ball/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/showcase/dx-ball/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/showcase/dx-ball/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/showcase/dx-ball/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/showcase/dx-ball/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/showcase/dx-ball/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/showcase/dx-ball/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/showcase/dx-ball/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/showcase/dx-ball/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/showcase/dx-ball/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/showcase/dx-ball/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/showcase/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../assets/styles.css" />
     <script src="../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../showcase/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../zh-CN/showcase/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../zh-TW/showcase/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../ja/showcase/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../ko/showcase/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../tr/showcase/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../ru/showcase/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../vi/showcase/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../th/showcase/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../de/showcase/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../es/showcase/" lang="es" dir="ltr" data-language="es">Español</a><a href="../fr/showcase/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../uk/showcase/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../pl/showcase/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../pt-BR/showcase/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../ar/showcase/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../fa/showcase/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../id/showcase/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../it/showcase/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/showcase/notion/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../showcase/notion/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/showcase/notion/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/showcase/notion/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/showcase/notion/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/showcase/notion/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/showcase/notion/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/showcase/notion/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/showcase/notion/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/showcase/notion/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/showcase/notion/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/showcase/notion/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/showcase/notion/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/showcase/notion/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/showcase/notion/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/showcase/notion/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/showcase/notion/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/showcase/notion/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/showcase/notion/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/showcase/notion/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/public/showcase/th04/index.html

@@ -90,16 +90,11 @@
       content="REA — Find out how software works. Reverse engineering with your coding agent."
     />
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+    <script src="../../assets/theme.js"></script>
+    <!-- website:theme:end -->
     <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="../../assets/styles.css" />
     <script src="../../assets/main.js" defer></script>
@@ -123,6 +118,15 @@
         </nav>
         <div class="header-social">
           <details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="../../showcase/th04/" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="../../zh-CN/showcase/th04/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="../../zh-TW/showcase/th04/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="../../ja/showcase/th04/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="../../ko/showcase/th04/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="../../tr/showcase/th04/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="../../ru/showcase/th04/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="../../vi/showcase/th04/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="../../th/showcase/th04/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="../../de/showcase/th04/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="../../es/showcase/th04/" lang="es" dir="ltr" data-language="es">Español</a><a href="../../fr/showcase/th04/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="../../uk/showcase/th04/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="../../pl/showcase/th04/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="../../pt-BR/showcase/th04/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="../../ar/showcase/th04/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="../../fa/showcase/th04/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="../../id/showcase/th04/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="../../it/showcase/th04/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
+          <button class="theme-toggle" type="button" data-theme-toggle hidden>
+            <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+              <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+            </svg>
+            <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+            </svg>
+          </button>
           <a
             class="nav-github"
             href="https://github.com/morluto/rea"

website/style-guide.md

@@ -228,11 +228,19 @@ The shared stylesheet defines the site. Its core colors are:
 | `--soft`   | `#f4f6f8` | `#181825` | Code and supporting surfaces     |
 | `--accent` | `#294f82` | `#89b4fa` | Links and meaningful highlights  |
 
-The light values are the default. When the reader's system is set to dark, a
-`prefers-color-scheme: dark` block at the end of the stylesheet swaps in the dark
-values, which are [Catppuccin Mocha](https://github.com/catppuccin/palette)
-(MIT). There is no toggle. Any new fixed color needs a dark counterpart in
-that block.
+The header's sun/moon button switches between light and dark. On the first visit,
+the site follows the system preference; a manual choice is saved for later visits
+and shared across pages and languages on that host. Without JavaScript, the site
+uses the light palette and hides the switch.
+
+`assets/theme.js` applies the choice before styles load and owns theme changes.
+The stylesheet scopes the dark palette to `data-theme="dark"` on the root,
+using [Catppuccin Mocha](https://github.com/catppuccin/palette) colors (MIT).
+Any new fixed color needs a dark counterpart in that section. Keep selector
+specificity unchanged with `:where()` when scoping component rules.
+Embedded SVGs inherit the page's `color-scheme`; canvas demos listen for
+`website-theme-change` to redraw. Check both themes, including a manual choice
+that differs from the system preference.
 
 Use the system sans-serif stack for prose and the shared monospace stack for
 code. The current container is at most 1080px wide, with article text limited to

website/templates/header.html.tmpl

@@ -8,6 +8,15 @@
     <nav class="navigation" aria-label="Main navigation">$navigation</nav>
     <div class="header-social">
       $language_picker
+      <button class="theme-toggle" type="button" data-theme-toggle hidden>
+        <svg class="theme-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path d="M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z" />
+        </svg>
+        <svg class="theme-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+        </svg>
+      </button>
       <a
         class="nav-github"
         href="https://github.com/morluto/rea"

website/templates/page.html

@@ -8,16 +8,8 @@
     <meta name="robots" content="noindex" />
     <!-- website:sharing:start -->
     <!-- website:sharing:end -->
-    <meta
-      name="theme-color"
-      content="#ffffff"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#1e1e2e"
-      media="(prefers-color-scheme: dark)"
-    />
+    <!-- website:theme:start -->
+    <!-- website:theme:end -->
     <link rel="icon" href="${base}assets/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="${base}assets/styles.css" />
     <script src="${base}assets/main.js" defer></script>

website/templates/theme.html.tmpl

@@ -0,0 +1,3 @@
+<meta name="theme-color" content="#ffffff" />
+<!-- Apply the saved theme before styles load, to avoid a flash on navigation. -->
+<script src="${base}assets/theme.js"></script>