snxraven/peardock-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add full-site light theme and theme-switched screenshots

Browse Source 
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.
This commit is contained in:
Raven Scott
2026-07-16 17:59:11 -04:00
parent c3009b4a1b
commit ff3399f551
40 changed files with 2190 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/api.html
+17 -1
View File
@@ -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>RPC &amp; API · 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>
docs/architecture.html
+17 -1
View File
@@ -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>Architecture · 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>
docs/faq.html
+17 -1
View File
@@ -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>
docs/holesail.html
+17 -1
View File
@@ -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>Holesail tunnels · 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>
docs/index.html
+17 -1
View File
@@ -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>Documentation · PearDock</title>
@@ -88,6 +103,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>
docs/operator.html
+17 -1
View File
@@ -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>Operator guide · 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>
docs/quickstart.html
+17 -1
View File
@@ -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>Quick start · 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>
docs/release.html
+17 -1
View File
@@ -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>Releases · 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>
docs/security.html
+17 -1
View File
@@ -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>Security · 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>