From 6b0a0c8a02b210521187c9cef5e59d77b0435113 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <info@hirt.cz>
Date: Sat, 26 Sep 2026 00:48:47 +0200
Subject: [PATCH] feat: match docs site theme to memaudit.dev's color scheme

Overrides Starlight's default palette with memaudit.dev's own colors
(background #0a0d10, panels #12171c, borders #232b32, text #e7ecef,
muted #8a97a3/#78838d, accent #ff6b4a) via the primitive --sl-color-*
variables, not the derived ones (--sl-color-bg, --sl-color-text, etc)
- Starlight defines those once as var(--sl-color-black) and similar, so
overriding the derived variables directly breaks the light/dark switch
since Starlight's own light-mode block only redefines the primitives.
memaudit.dev is dark-only, so light mode keeps Starlight's own light
surface colors and just adopts the same accent hue for consistency.

Signed-off-by: Lukas Hirt <info@hirt.cz>
---
 astro.config.mjs     |  1 +
 src/styles/theme.css | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/styles/theme.css

diff --git a/astro.config.mjs b/astro.config.mjs
index a713f6c..a142409 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,6 +19,7 @@ export default defineConfig({
 			social: [
 				{ icon: 'github', label: 'GitHub', href: 'https://github.com/memaudit/memaudit' },
 			],
+			customCss: ['./src/styles/theme.css'],
 			plugins: [starlightLinksValidator()],
 			components: {
 				// Shows "memaudit" in the visible nav header while the
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..2b100c8
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,37 @@
+/* SPDX-FileCopyrightText: 2026 the memaudit authors */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/*
+ * Matches memaudit.dev's own color scheme (see its :root custom
+ * properties: --bg, --panel, --border, --text, --muted, --hot).
+ * memaudit.dev is dark-only, so light mode keeps Starlight's own
+ * surface colors and just picks up the same accent hue for consistency
+ * when a visitor's OS prefers light.
+ *
+ * Only the primitive --sl-color-* variables are set here (never the
+ * derived ones like --sl-color-bg or --sl-color-text): Starlight
+ * defines those once as `var(--sl-color-black)` etc, so they resolve
+ * correctly under both themes only if the primitives they reference are
+ * the ones overridden per theme, not the derived variables themselves.
+ */
+
+:root {
+	--sl-color-black: #0a0d10;
+	--sl-color-white: #e7ecef;
+	--sl-color-gray-1: #e7ecef;
+	--sl-color-gray-2: #e7ecef;
+	--sl-color-gray-3: #8a97a3;
+	--sl-color-gray-4: #78838d;
+	--sl-color-gray-5: #232b32;
+	--sl-color-gray-6: #12171c;
+
+	--sl-color-accent-low: #7a3b2c;
+	--sl-color-accent: #ff6b4a;
+	--sl-color-accent-high: color-mix(in srgb, #ff6b4a 35%, white);
+}
+
+:root[data-theme='light'] {
+	--sl-color-accent-low: hsl(11, 90%, 88%);
+	--sl-color-accent: hsl(11, 90%, 56%);
+	--sl-color-accent-high: hsl(11, 80%, 28%);
+}