docs: add light theme toggle

docs/faq.html

@@ -8,6 +8,12 @@
     <meta property="og:title" content="Pi Web FAQ" />
     <meta property="og:image" content="assets/pi-web-banner.png" />
     <link rel="icon" href="data:," />
+    <script>
+      (() => {
+        const theme = window.localStorage.getItem("pi-web-theme");
+        if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -24,7 +30,19 @@
           <a href="./">Home</a>
           <a href="install.html">Install</a>
           <a href="faq.html" aria-current="page">FAQ</a>
-          <a href="https://github.com/jmfederico/pi-web">GitHub</a>
+          <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="Pi Web on GitHub">
+            <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
+              />
+            </svg>
+            <span>GitHub</span>
+          </a>
+          <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
+            <span data-theme-icon aria-hidden="true">◐</span>
+            <span data-theme-label>Theme</span>
+          </button>
         </div>
       </nav>
     </header>

docs/index.html

@@ -15,6 +15,12 @@
     />
     <meta property="og:image" content="assets/pi-web-banner.png" />
     <link rel="icon" href="data:," />
+    <script>
+      (() => {
+        const theme = window.localStorage.getItem("pi-web-theme");
+        if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -31,7 +37,19 @@
           <a href="./" aria-current="page">Home</a>
           <a href="install.html">Install</a>
           <a href="faq.html">FAQ</a>
-          <a href="https://github.com/jmfederico/pi-web">GitHub</a>
+          <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="Pi Web on GitHub">
+            <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
+              />
+            </svg>
+            <span>GitHub</span>
+          </a>
+          <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
+            <span data-theme-icon aria-hidden="true">◐</span>
+            <span data-theme-label>Theme</span>
+          </button>
         </div>
       </nav>
     </header>

docs/install.html

@@ -8,6 +8,12 @@
     <meta property="og:title" content="Install Pi Web" />
     <meta property="og:image" content="assets/pi-web-banner.png" />
     <link rel="icon" href="data:," />
+    <script>
+      (() => {
+        const theme = window.localStorage.getItem("pi-web-theme");
+        if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -24,7 +30,19 @@
           <a href="./">Home</a>
           <a href="install.html" aria-current="page">Install</a>
           <a href="faq.html">FAQ</a>
-          <a href="https://github.com/jmfederico/pi-web">GitHub</a>
+          <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="Pi Web on GitHub">
+            <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
+              />
+            </svg>
+            <span>GitHub</span>
+          </a>
+          <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
+            <span data-theme-icon aria-hidden="true">◐</span>
+            <span data-theme-label>Theme</span>
+          </button>
         </div>
       </nav>
     </header>

docs/site.js

@@ -1,3 +1,45 @@
+const themeButtons = document.querySelectorAll("[data-theme-toggle]");
+const themeStorageKey = "pi-web-theme";
+const systemPrefersLight = window.matchMedia("(prefers-color-scheme: light)");
+
+function storedTheme() {
+  const theme = window.localStorage.getItem(themeStorageKey);
+  return theme === "light" || theme === "dark" ? theme : undefined;
+}
+
+function activeTheme() {
+  return document.documentElement.dataset.theme === "light" || document.documentElement.dataset.theme === "dark"
+    ? document.documentElement.dataset.theme
+    : systemPrefersLight.matches
+      ? "light"
+      : "dark";
+}
+
+function updateThemeButtons(theme = activeTheme()) {
+  for (const button of themeButtons) {
+    button.dataset.theme = theme;
+    button.setAttribute("aria-pressed", theme === "light" ? "true" : "false");
+    const icon = button.querySelector("[data-theme-icon]");
+    const label = button.querySelector("[data-theme-label]");
+    if (icon !== null) icon.textContent = theme === "light" ? "☀" : "☾";
+    if (label !== null) label.textContent = theme === "light" ? "Light" : "Dark";
+  }
+}
+
+updateThemeButtons();
+systemPrefersLight.addEventListener("change", () => {
+  if (storedTheme() === undefined) updateThemeButtons();
+});
+
+for (const button of themeButtons) {
+  button.addEventListener("click", () => {
+    const nextTheme = activeTheme() === "light" ? "dark" : "light";
+    document.documentElement.dataset.theme = nextTheme;
+    window.localStorage.setItem(themeStorageKey, nextTheme);
+    updateThemeButtons(nextTheme);
+  });
+}
+
 const copyButtons = document.querySelectorAll("[data-copy]");
 
 for (const button of copyButtons) {

docs/styles.css

@@ -194,18 +194,44 @@ video {
   font-size: 0.95rem;
 }
 
-.nav-links a {
+.nav-links a,
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 12px;
   border: 1px solid transparent;
 }
 
 .nav-links a[aria-current="page"],
-.nav-links a:hover {
+.nav-links a:hover,
+.theme-toggle:hover {
   border-color: var(--line-bright);
   background: var(--panel);
   color: var(--text);
 }
 
+.github-icon {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+}
+
+.theme-toggle {
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.theme-toggle[data-theme="dark"] [data-theme-icon] {
+  color: var(--brand-2);
+}
+
+.theme-toggle[data-theme="light"] [data-theme-icon] {
+  color: var(--brand-3);
+}
+
 .button,
 .copy-button {
   display: inline-flex;
@@ -684,6 +710,186 @@ code .comment,
   gap: 14px;
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+    --bg: #f7f1e6;
+    --bg-soft: #eee5d5;
+    --panel: #fff9ee;
+    --panel-strong: #f0e6d6;
+    --line: #c9bca8;
+    --line-bright: #8d7b64;
+    --text: #15131b;
+    --muted: #5f586a;
+    --muted-2: #766f7e;
+    --brand: #6430d8;
+    --brand-2: #008c82;
+    --brand-3: #b05f00;
+    --danger: #b51d49;
+  }
+
+  body {
+    background: linear-gradient(180deg, #f7f1e6 0%, #f4eadb 48%, #eee4d4 100%);
+  }
+
+  .site-header {
+    background: rgba(247, 241, 230, 0.94);
+  }
+
+  .button.primary {
+    color: #fff9ee;
+    box-shadow: 7px 7px 0 #d8c7ee;
+  }
+
+  .button.primary:hover {
+    color: #15131b;
+  }
+
+  .terminal,
+  .code-card,
+  .kbd {
+    background: #15131b;
+  }
+
+  .terminal-top,
+  .demo-caption {
+    background: #201c2a;
+  }
+
+  .callout.warning {
+    background: #fff2d2;
+  }
+
+  .callout.danger {
+    background: #ffe1e9;
+  }
+
+  .intro-word:nth-child(1) {
+    --intro-color: var(--text);
+  }
+
+  code .comment,
+  .comment {
+    color: #aaa1bb;
+  }
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #070912;
+  --bg-soft: #0b0f1d;
+  --panel: #101527;
+  --panel-strong: #151b31;
+  --line: #26304f;
+  --line-bright: #3d4a78;
+  --text: #f7f4ff;
+  --muted: #aaa4bd;
+  --muted-2: #817a99;
+  --brand: #7c3cff;
+  --brand-2: #00f0d8;
+  --brand-3: #ffb000;
+  --danger: #ff4f7b;
+}
+
+html[data-theme="light"] {
+  color-scheme: light;
+  --bg: #f7f1e6;
+  --bg-soft: #eee5d5;
+  --panel: #fff9ee;
+  --panel-strong: #f0e6d6;
+  --line: #c9bca8;
+  --line-bright: #8d7b64;
+  --text: #15131b;
+  --muted: #5f586a;
+  --muted-2: #766f7e;
+  --brand: #6430d8;
+  --brand-2: #008c82;
+  --brand-3: #b05f00;
+  --danger: #b51d49;
+}
+
+html[data-theme="dark"] body {
+  background: linear-gradient(180deg, #070912 0%, #080b15 44%, #0a0d18 100%);
+}
+
+html[data-theme="light"] body {
+  background: linear-gradient(180deg, #f7f1e6 0%, #f4eadb 48%, #eee4d4 100%);
+}
+
+html[data-theme="dark"] .site-header {
+  background: rgba(7, 9, 18, 0.94);
+}
+
+html[data-theme="light"] .site-header {
+  background: rgba(247, 241, 230, 0.94);
+}
+
+html[data-theme="dark"] .button.primary {
+  color: #02050a;
+  box-shadow: 7px 7px 0 var(--brand);
+}
+
+html[data-theme="light"] .button.primary {
+  color: #fff9ee;
+  box-shadow: 7px 7px 0 #d8c7ee;
+}
+
+html[data-theme="dark"] .terminal,
+html[data-theme="dark"] .code-card,
+html[data-theme="dark"] .kbd {
+  background: #050710;
+}
+
+html[data-theme="light"] .terminal,
+html[data-theme="light"] .code-card,
+html[data-theme="light"] .kbd {
+  background: #15131b;
+}
+
+html[data-theme="dark"] .terminal-top,
+html[data-theme="dark"] .demo-caption {
+  background: #0c1020;
+}
+
+html[data-theme="light"] .terminal-top,
+html[data-theme="light"] .demo-caption {
+  background: #201c2a;
+}
+
+html[data-theme="dark"] .callout.warning {
+  background: #16140d;
+}
+
+html[data-theme="light"] .callout.warning {
+  background: #fff2d2;
+}
+
+html[data-theme="dark"] .callout.danger {
+  background: #170d15;
+}
+
+html[data-theme="light"] .callout.danger {
+  background: #ffe1e9;
+}
+
+html[data-theme="dark"] .intro-word:nth-child(1) {
+  --intro-color: #ffffff;
+}
+
+html[data-theme="light"] .intro-word:nth-child(1) {
+  --intro-color: var(--text);
+}
+
+html[data-theme="dark"] code .comment,
+html[data-theme="dark"] .comment {
+  color: #928cab;
+}
+
+html[data-theme="light"] code .comment,
+html[data-theme="light"] .comment {
+  color: #aaa1bb;
+}
+
 @media (max-width: 920px) {
   .hero-grid,
   .install-panel,