Add full-site light theme and theme-switched screenshots

Ship a site-wide light mode with FOUC-safe persistence, tokenized surfaces (cards, tables, cradle, docs/learn), and light product screenshots that swap with the theme toggle including lightbox.
2026-07-16 17:59:11 -04:00
parent c3009b4a1b
commit ff3399f551
40 changed files with 2190 additions and 242 deletions
@@ -1,6 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 <head>
+  <!-- Theme: FOUC-safe bootstrap (localStorage peardock.site.theme) -->
+  <script>
+    (function () {
+      try {
+        var t = localStorage.getItem('peardock.site.theme');
+        if (t !== 'light' && t !== 'dark') t = 'dark';
+        document.documentElement.setAttribute('data-theme', t);
+        var meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) meta.setAttribute('content', t === 'light' ? '#f3f5f8' : '#0a0c10');
+      } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  </script>
+
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>FAQ · PearDock Docs</title>
@@ -93,6 +108,7 @@
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/src/styles/global.css" />
  <link rel="stylesheet" href="/src/styles/docs.css" />
+  <link rel="stylesheet" href="/src/styles/theme-light.css" />
 </head>
 <body>
  <div class="bg-mesh" aria-hidden="true"></div>