Skip to content

Commit d80712e

Browse files
mayurpiseclaude
mayurpise
and
claude
committed
fix(web): dark-mode contrast pass — kill white slabs, add book theme
Several legacy components used hardcoded rgba(255,255,255,X) backgrounds instead of token variables, producing opaque white slabs on the dark canvas (the .glass-card was the most visible offender — every card on the home page rendered white-on-dark in dark mode). Adds defensive overrides for all such surfaces and brings dark-mode parity to the book pages. ## Main site (web/css/redesign-v24.css) Adds dark-mode overrides for: - .glass-card (the universal card shell — fixes init phases, problem cards, bento cards, FAQ items, audience cards, install code blocks) - .top-nav.scrolled and .top-nav.open (sticky nav had hardcoded white) - .install-tab.active (sticky install tab bar) - .cmd-card (commands grid) - blockquote - v2.4 redesign components (persona-card, vs-table-wrap, vs cells, playground container/tabs/foot, hero-extras, theme-toggle) - .btn-secondary / .btn-tertiary - Hero stat divider/num/label readability - .section-glow opacity boost - .section-label color in dark ## Book pages (web/book/css/book.css) The book had no dark-mode support at all — adds the full token palette plus overrides for: - .header-bar / .top-nav-book (sticky bar) - .copy-btn (code-block copy buttons — line 669 of book.css had hardcoded white) - pre / code / chapter content - Sidebar / TOC / chapter-nav - Tables, blockquote, callouts - Scrollbar + selection - Theme toggle button (with positioning + dark/light icon swap) ## Theme bootstrap injected site-wide All 26 book pages and 2 ancillary web pages (what-is-draft, changelog) now include: - The early-apply theme bootstrap in <head> (prevents FOUC) - The theme-toggle.js script before </body> - changelog and what-is-draft also pick up redesign-v24.css for the shared toggle button styling Path resolution computed correctly: ../js/theme-toggle.js for book root + ancillary pages, ../../js/theme-toggle.js for chapters. ## Verification - make build: 28 skills, 21,168 lines, OK - make test: 25 suites, all green - curl smoke: dark-mode rule counts (51 in main, 41 in book), theme bootstrap present in book pages, JS reachable from all paths. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 3654b3d commit d80712e

30 files changed

Lines changed: 425 additions & 0 deletions

File tree

‎web/book/adrs/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="adrs">
6164

@@ -406,5 +409,6 @@ <h2>Superseding Decisions</h2>
406409
</div>
407410

408411
<script src="../js/book.js"></script>
412+
<script src="../../js/theme-toggle.js"></script>
409413
</body>
410414
</html>

‎web/book/agent-system/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="agent-system">
6164

@@ -488,5 +491,6 @@ <h2>How Agents Activate</h2>
488491
</div>
489492

490493
<script src="../js/book.js"></script>
494+
<script src="../../js/theme-toggle.js"></script>
491495
</body>
492496
</html>

‎web/book/audio/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,9 @@
159159
.audio-page-cover-wrapper { position: static; max-width: 400px; margin: 0 auto; }
160160
}
161161
</style>
162+
<script>
163+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
164+
</script>
162165
</head>
163166
<body class="audio-player-page">
164167

@@ -317,5 +320,6 @@ <h4>How to Listen</h4>
317320
}
318321
});
319322
</script>
323+
<script src="../../js/theme-toggle.js"></script>
320324
</body>
321325
</html>

‎web/book/bug-hunt/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="bug-hunt">
6164

@@ -497,5 +500,6 @@ <h3>Dimension 13: Algorithmic Complexity</h3>
497500
</div>
498501

499502
<script src="../js/book.js"></script>
503+
<script src="../../js/theme-toggle.js"></script>
500504
</body>
501505
</html>

‎web/book/command-reference/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="command-reference">
6164

@@ -531,5 +534,6 @@ <h2>Intent Mapping</h2>
531534
</div>
532535

533536
<script src="../js/book.js"></script>
537+
<script src="../../js/theme-toggle.js"></script>
534538
</body>
535539
</html>

‎web/book/context-driven-development/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="context-driven-development">
6164

@@ -480,5 +483,6 @@ <h2>Keeping AI Constrained</h2>
480483
</div>
481484

482485
<script src="../js/book.js"></script>
486+
<script src="../../js/theme-toggle.js"></script>
483487
</body>
484488
</html>

‎web/book/context-tiering/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="context-tiering">
6164

@@ -479,5 +482,6 @@ <h2>Why Not Just Load Everything?</h2>
479482
</div>
480483

481484
<script src="../js/book.js"></script>
485+
<script src="../../js/theme-toggle.js"></script>
482486
</body>
483487
</html>

‎web/book/coverage/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="coverage">
6164

@@ -471,5 +474,6 @@ <h2>The Coverage Report</h2>
471474
</div>
472475

473476
<script src="../js/book.js"></script>
477+
<script src="../../js/theme-toggle.js"></script>
474478
</body>
475479
</html>

‎web/book/css/book.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1421,3 +1421,164 @@ a { color: inherit; text-decoration: none; }
14211421
background: #f5f5f5;
14221422
}
14231423
}
1424+
1425+
/* ============================================================
1426+
DARK MODE (matches site theme tokens)
1427+
============================================================ */
1428+
[data-theme="dark"] {
1429+
--bg-primary: #0a0d12;
1430+
--bg-secondary: #11161d;
1431+
--bg-tertiary: #161b24;
1432+
--bg-sidebar: #0d1117;
1433+
--bg-code: #161b24;
1434+
1435+
--text-primary: #e6edf3;
1436+
--text-secondary: #b1bac4;
1437+
--text-muted: #768390;
1438+
--text-reading: #c9d1d9;
1439+
1440+
--border: #21262d;
1441+
--border-subtle: rgba(255, 255, 255, 0.05);
1442+
1443+
--glass-bg: rgba(22, 27, 36, 0.7);
1444+
--glass-border: rgba(255, 255, 255, 0.08);
1445+
1446+
--accent-cyan: #58a6ff;
1447+
--accent-amber: #d29922;
1448+
--accent-rose: #f85149;
1449+
--accent-emerald: #3fb950;
1450+
--accent-violet: #a371f7;
1451+
}
1452+
1453+
/* Override hardcoded white surfaces in dark mode */
1454+
[data-theme="dark"] .header-bar,
1455+
[data-theme="dark"] .top-nav-book {
1456+
background: rgba(13, 17, 22, 0.92);
1457+
border-bottom-color: var(--border);
1458+
}
1459+
[data-theme="dark"] .copy-btn {
1460+
background: rgba(22, 27, 36, 0.7);
1461+
border-color: var(--border);
1462+
color: var(--text-muted);
1463+
}
1464+
[data-theme="dark"] .copy-btn:hover {
1465+
color: var(--text-primary);
1466+
background: var(--bg-tertiary);
1467+
}
1468+
1469+
/* Code block surfaces — book renders code-heavy chapters */
1470+
[data-theme="dark"] pre,
1471+
[data-theme="dark"] code {
1472+
background: var(--bg-code);
1473+
color: var(--text-reading);
1474+
border-color: var(--border);
1475+
}
1476+
[data-theme="dark"] pre code { background: transparent; }
1477+
1478+
/* Chapter content surfaces */
1479+
[data-theme="dark"] .chapter-wrapper {
1480+
background: var(--bg-primary);
1481+
color: var(--text-reading);
1482+
}
1483+
[data-theme="dark"] .chapter-wrapper a { color: var(--accent-violet); }
1484+
[data-theme="dark"] .chapter-wrapper a:hover { color: var(--accent-cyan); }
1485+
[data-theme="dark"] .chapter-wrapper blockquote {
1486+
background: var(--bg-secondary);
1487+
border-left-color: var(--accent-violet);
1488+
color: var(--text-secondary);
1489+
}
1490+
[data-theme="dark"] .chapter-wrapper hr {
1491+
border-color: var(--border);
1492+
}
1493+
1494+
/* Sidebar / TOC */
1495+
[data-theme="dark"] .sidebar,
1496+
[data-theme="dark"] .book-toc,
1497+
[data-theme="dark"] .chapter-nav {
1498+
background: var(--bg-sidebar);
1499+
border-color: var(--border);
1500+
}
1501+
[data-theme="dark"] .sidebar a,
1502+
[data-theme="dark"] .book-toc a,
1503+
[data-theme="dark"] .chapter-nav a {
1504+
color: var(--text-secondary);
1505+
}
1506+
[data-theme="dark"] .sidebar a.active,
1507+
[data-theme="dark"] .book-toc a.active,
1508+
[data-theme="dark"] .chapter-nav a.active {
1509+
color: var(--accent-violet);
1510+
background: rgba(163, 113, 247, 0.10);
1511+
}
1512+
[data-theme="dark"] .sidebar a:hover,
1513+
[data-theme="dark"] .book-toc a:hover,
1514+
[data-theme="dark"] .chapter-nav a:hover {
1515+
color: var(--text-primary);
1516+
background: rgba(255, 255, 255, 0.04);
1517+
}
1518+
1519+
/* Tables */
1520+
[data-theme="dark"] .chapter-wrapper table {
1521+
border-color: var(--border);
1522+
}
1523+
[data-theme="dark"] .chapter-wrapper th {
1524+
background: var(--bg-tertiary);
1525+
color: var(--text-primary);
1526+
border-color: var(--border);
1527+
}
1528+
[data-theme="dark"] .chapter-wrapper td {
1529+
border-color: var(--border);
1530+
}
1531+
1532+
/* Cards / callouts inside chapters */
1533+
[data-theme="dark"] .glass-card,
1534+
[data-theme="dark"] .callout,
1535+
[data-theme="dark"] .note,
1536+
[data-theme="dark"] .tip,
1537+
[data-theme="dark"] .warning,
1538+
[data-theme="dark"] .figure-caption {
1539+
background: var(--bg-secondary);
1540+
border-color: var(--border);
1541+
color: var(--text-secondary);
1542+
}
1543+
1544+
/* Scrollbar */
1545+
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
1546+
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; }
1547+
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6e7681; }
1548+
[data-theme="dark"] ::selection {
1549+
background: rgba(163, 113, 247, 0.3);
1550+
color: var(--text-primary);
1551+
}
1552+
1553+
/* Theme toggle button (injected by theme-toggle.js) */
1554+
.theme-toggle {
1555+
position: fixed;
1556+
top: 0.75rem;
1557+
right: 0.75rem;
1558+
width: 36px;
1559+
height: 36px;
1560+
display: flex;
1561+
align-items: center;
1562+
justify-content: center;
1563+
background: var(--bg-primary);
1564+
border: 1px solid var(--border);
1565+
border-radius: 50%;
1566+
cursor: pointer;
1567+
z-index: 1000;
1568+
transition: all 0.2s var(--ease-out);
1569+
color: var(--text-secondary);
1570+
}
1571+
.theme-toggle:hover {
1572+
transform: scale(1.05);
1573+
border-color: var(--accent-violet);
1574+
color: var(--accent-violet);
1575+
}
1576+
.theme-toggle svg { width: 16px; height: 16px; }
1577+
.theme-toggle .icon-sun { display: none; }
1578+
.theme-toggle .icon-moon { display: block; }
1579+
[data-theme="dark"] .theme-toggle {
1580+
background: var(--bg-secondary);
1581+
border-color: var(--border);
1582+
}
1583+
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
1584+
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

‎web/book/decomposition/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
</noscript>
5757

5858
<link rel="stylesheet" href="../css/book.css">
59+
<script>
60+
(function(){try{var t=localStorage.getItem('draft-theme');if(!t&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();
61+
</script>
5962
</head>
6063
<body data-chapter="decomposition">
6164

@@ -466,5 +469,6 @@ <h2>Plan Restructuring</h2>
466469
</div>
467470

468471
<script src="../js/book.js"></script>
472+
<script src="../../js/theme-toggle.js"></script>
469473
</body>
470474
</html>

0 commit comments

Comments
 (0)