From 1c1b393a4d6458cca755a6e32b347354c95d7587 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 25 Oct 2026 15:37:05 +0000
Subject: [PATCH] docs: use the brand's dark colors in dark mode

Dark mode now takes the app's dark tokens: night for the page, the raised
card color for the header and sidebar, and the lighter accent for links.
Buttons and the current sidebar item fill with electric blue in both modes,
and code blocks sit on the same surfaces instead of the theme's grey.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PY1z7gbTSbKghKSF1tWxKN
---
 src/styles/brand.css | 82 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/styles/brand.css b/src/styles/brand.css
index aedf0db..5e5e5cf 100644
--- a/src/styles/brand.css
+++ b/src/styles/brand.css
@@ -23,21 +23,65 @@
 
 :root {
   --sl-font: "DM Sans", system-ui, sans-serif;
+}
+
+/* Dark mode uses the app's dark tokens, from app/web/src/styles.css: night
+   for the page, a raised card color for the sidebar and header, and the
+   lighter accent for links so they read on night. */
+:root {
+  --sl-color-white: #fafaf7;
+  --sl-color-gray-1: #ecedf3;
+  --sl-color-gray-2: #c9cbd6;
+  --sl-color-gray-3: #9c9eac;
+  --sl-color-gray-4: #5d6070;
+  --sl-color-gray-5: #262937;
+  --sl-color-gray-6: #171922;
+  --sl-color-black: #0e0f15;
   --sl-color-accent-low: #1a2147;
   --sl-color-accent: #5b78ff;
-  --sl-color-accent-high: #c9d2ff;
-  --sl-color-black: #0e0f15;
-  --sl-color-gray-6: #171820;
+  --sl-color-accent-high: #7d93ff;
+  --sl-color-text-invert: #0e0f15;
+  --sl-color-bg-inline-code: #20232f;
+  --sl-color-hairline-light: #262937;
+  --sl-color-hairline: #20232f;
+  --sl-color-hairline-shade: #0e0f15;
+  --chek-blue: #2448e8;
+  --chek-on-blue: #fafaf7;
 }
 
 :root[data-theme="light"] {
-  --sl-color-accent-low: #dfe4fb;
-  --sl-color-accent: #2448e8;
-  --sl-color-accent-high: #1a34b8;
   --sl-color-white: #171820;
-  --sl-color-black: #fafaf7;
+  --sl-color-gray-1: #23242e;
+  --sl-color-gray-2: #3a3b46;
+  --sl-color-gray-3: #60616d;
+  --sl-color-gray-4: #8e909c;
+  --sl-color-gray-5: #d5d8e4;
   --sl-color-gray-6: #eef0f8;
   --sl-color-gray-7: #f4f5fa;
+  --sl-color-black: #fafaf7;
+  --sl-color-accent-low: #dfe4fb;
+  --sl-color-accent: #2448e8;
+  --sl-color-accent-high: #1a34b8;
+  --sl-color-text-invert: #fafaf7;
+  --sl-color-bg-inline-code: #eef0f8;
+  --sl-color-hairline-light: #e3e5ee;
+  --sl-color-hairline: #e3e5ee;
+  --sl-color-hairline-shade: #d5d8e4;
+}
+
+/* The brand fills with electric blue and paper text in both modes, like the
+   app's buttons, rather than Starlight's pale accent in dark mode. */
+.sl-link-button.primary,
+.sl-link-button.primary:hover {
+  background: var(--chek-blue);
+  border-color: var(--chek-blue);
+  color: var(--chek-on-blue);
+}
+.sidebar-content [aria-current="page"],
+.sidebar-content [aria-current="page"]:hover,
+.sidebar-content [aria-current="page"]:focus {
+  background-color: var(--chek-blue);
+  color: var(--chek-on-blue);
 }
 
 h1,
@@ -48,3 +92,27 @@ h3,
   font-family: Bricolage, "DM Sans", sans-serif;
   font-weight: 700;
 }
+
+/* Code blocks sit on the same surfaces as the page, so dark mode stays on
+   night instead of the code theme's grey. The selectors repeat to outrank
+   the theme's own rules. */
+:root:root .expressive-code.expressive-code {
+  --ec-codeBg: #171922;
+  --ec-brdCol: #262937;
+  --ec-frm-edBg: #171922;
+  --ec-frm-edTabBarBg: #0e0f15;
+  --ec-frm-edActTabBg: #171922;
+  --ec-frm-trmBg: #171922;
+  --ec-frm-trmTtbBg: #0e0f15;
+  --ec-frm-trmTtbBrdBtmCol: #262937;
+}
+:root:root[data-theme="light"] .expressive-code.expressive-code {
+  --ec-codeBg: #f4f5fa;
+  --ec-brdCol: #e3e5ee;
+  --ec-frm-edBg: #f4f5fa;
+  --ec-frm-edTabBarBg: #eef0f8;
+  --ec-frm-edActTabBg: #f4f5fa;
+  --ec-frm-trmBg: #f4f5fa;
+  --ec-frm-trmTtbBg: #eef0f8;
+  --ec-frm-trmTtbBrdBtmCol: #e3e5ee;
+}