diff --git a/astro.config.mjs b/astro.config.mjs
index 500a247..7868d6a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -35,15 +35,10 @@ export default defineConfig({
     },
   },
 
-  markdown: {
-    rehypePlugins: [],
-    shikiConfig: {
-      theme: "github-light",
-      wrap: true,
-    },
-  },
-
-  integrations: [react(), jaamd()],
+  integrations: [
+    react(),
+    jaamd({ theme: { light: "github-light", dark: "github-dark" } }),
+  ],
 
   fonts: [
     {
diff --git a/docs/04-configurations/06-themes.md b/docs/04-configurations/06-themes.md
new file mode 100644
index 0000000..7e116a8
--- /dev/null
+++ b/docs/04-configurations/06-themes.md
@@ -0,0 +1,76 @@
+# Themes
+
+JAAD ships with full dark mode support and integrates with JAAMD's theming system. The theme switcher in the header toggles between light and dark, defaulting to the system preference.
+
+## How it works
+
+Dark mode is driven by a `dark` class on `<html>`. A small inline script in `<head>` reads the user's preference from `localStorage` (or falls back to `prefers-color-scheme`) and applies the class before the first paint — no flash of wrong theme.
+
+JAAD defines two sets of design tokens in `global.css`: light (default) and dark (inside `html.dark`). JAAMD's default variable set also includes matching dark-mode overrides, so markdown content adapts automatically.
+
+## Customizing colors
+
+All layout tokens live in `src/styles/global.css` under `@theme` (light) and `html.dark` (dark). Change any value to match your brand:
+
+```css
+/* src/styles/global.css */
+@theme {
+  --color-primary: #6366f1;
+  --color-background: #faf8f5;
+}
+
+html.dark {
+  --color-primary: #818cf8;
+  --color-background: #0d1117;
+}
+```
+
+Markdown-specific tokens are in `src/styles/jaamd.css`. Both light and dark overrides are defined there. See [Styles](/docs/configurations/styles) for the full list.
+
+## Shiki dual themes
+
+JAAD configures JAAMD with dual Shiki themes so syntax highlighting adapts to the current mode:
+
+```js
+// astro.config.mjs
+jaamd({
+  theme: { light: "github-light", dark: "github-dark" },
+});
+```
+
+When `theme` is an object, JAAMD switches code-block token colours based on `html.dark`. Any pair of [Shiki themes](https://shiki.style/themes) can be used.
+
+## JAAMD theme presets
+
+JAAMD includes three additional theme presets that override all `--jaamd-*` variables to match popular editor colour schemes:
+
+| Preset   | Import                  | Shiki theme    |
+| -------- | ----------------------- | -------------- |
+| Dracula  | `jaamd/themes/dracula`  | `dracula`      |
+| Nord     | `jaamd/themes/nord`     | `nord`         |
+| One Dark | `jaamd/themes/one-dark` | `one-dark-pro` |
+
+Use a preset as a standalone theme:
+
+```ts
+jaamd({ theme: "dracula", noDefault: true });
+```
+
+```css
+@import "jaamd/themes/dracula.css";
+@import "jaamd/styles.css";
+```
+
+Or scope it to dark mode with the `/dark` variant:
+
+```css
+@import "jaamd/themes/dracula/dark.css";
+```
+
+```ts
+import "jaamd/themes/dracula/dark";
+```
+
+## Creating a custom theme
+
+Copy any preset from `jaamd/src/themes/` and change the variable values. Every `--jaamd-*` property is documented in [`jaamd/src/styles/variables.css`](https://github.com/lancher-dev/jaamd/blob/main/src/styles/variables.css). Override them on `:root` or scope them under `html.dark` to create a custom dark theme.
diff --git a/docs/04-configurations/07-search.md b/docs/04-configurations/07-search.md
new file mode 100644
index 0000000..5fa5cee
--- /dev/null
+++ b/docs/04-configurations/07-search.md
@@ -0,0 +1,23 @@
+# Search
+
+JAAD includes a built-in search palette that lets readers find any page in the documentation. It opens with `Ctrl+K` (or `⌘K` on macOS) and is also accessible from the search button in the header.
+
+## How it works
+
+The search index is built at compile time from the markdown collection and embedded as static JSON in every docs page. When the palette opens for the first time, the React component reads the index from the DOM — no network request, no server.
+
+Results are scored by title match, chapter match, and body match. The palette shows up to 10 results with keyboard navigation (`↑` `↓` to move, `Enter` to open, `Esc` to close).
+
+## What is indexed
+
+Every `.md` file in the `docs/` directory is included. The index contains:
+
+- **Title** — from frontmatter, first `# Heading`, or filename
+- **Chapter** — the parent folder name, if any
+- **Body** — plain text with markdown syntax stripped
+
+Code blocks, images, and directives are removed from the body before indexing.
+
+## Responsive behavior
+
+On desktop, the header shows a compact search bar with the keyboard shortcut hint. On mobile, it collapses to a search icon. Both open the same full-screen overlay palette.
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1269f23..62c9492 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,17 +1,23 @@
 ---
 import Nav from "./Nav.astro";
 import NavMobile from "./NavMobile";
+import ThemeSwitcher from "./ThemeSwitcher";
+import SearchPalette from "./SearchPalette";
 ---
 
 <header class="w-full" aria-labelledby="header-heading">
   <div class="container mx-auto p-4">
-    <div class="grid grid-cols-[1fr_auto] items-center gap-4">
+    <div class="flex items-center gap-4">
       <span class="text-foreground-bright font-brand text-xl">
         <a href="/" title="Home" class="text-primary no-underline">JAAD</a>
       </span>
 
-      <Nav />
-      <NavMobile client:load />
+      <div class="ml-auto flex items-center gap-2">
+        <SearchPalette client:load />
+        <Nav />
+        <ThemeSwitcher client:load />
+        <NavMobile client:load />
+      </div>
     </div>
   </div>
 </header>
diff --git a/src/components/SearchPalette.tsx b/src/components/SearchPalette.tsx
new file mode 100644
index 0000000..6902320
--- /dev/null
+++ b/src/components/SearchPalette.tsx
@@ -0,0 +1,292 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+interface SearchItem {
+  title: string;
+  slug: string;
+  chapter: string | null;
+  body: string;
+}
+
+/** Read the static search index embedded in the page by DocsLayout. */
+function readSearchIndex(): SearchItem[] {
+  const el = document.getElementById("jaad-search-index");
+  if (!el?.textContent) return [];
+  try {
+    return JSON.parse(el.textContent) as SearchItem[];
+  } catch {
+    return [];
+  }
+}
+
+export default function SearchPalette() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchItem[]>([]);
+  const [index, setIndex] = useState<SearchItem[] | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Parse embedded index on first open
+  useEffect(() => {
+    if (isOpen && !index) {
+      setIndex(readSearchIndex());
+    }
+  }, [isOpen, index]);
+
+  // Search when query changes
+  useEffect(() => {
+    if (!index || !query.trim()) {
+      setResults(isOpen && index && !query.trim() ? index.slice(0, 8) : []);
+      setSelectedIndex(0);
+      return;
+    }
+
+    const q = query.toLowerCase();
+    const scored = index
+      .map((item) => {
+        let score = 0;
+        if (item.title.toLowerCase().includes(q)) score += 10;
+        if (item.title.toLowerCase().startsWith(q)) score += 5;
+        if (item.chapter?.toLowerCase().includes(q)) score += 3;
+        if (item.body.toLowerCase().includes(q)) score += 1;
+        return { item, score };
+      })
+      .filter((s) => s.score > 0)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 10)
+      .map((s) => s.item);
+
+    setResults(scored);
+    setSelectedIndex(0);
+  }, [query, index, isOpen]);
+
+  // Global keyboard shortcut
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+      if (e.key === "Escape" && isOpen) {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    } else {
+      setQuery("");
+    }
+  }, [isOpen]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const item = listRef.current?.children[selectedIndex] as
+      | HTMLElement
+      | undefined;
+    item?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const navigate = useCallback((slug: string) => {
+    setIsOpen(false);
+    window.location.href = `/docs/${slug}`;
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && results[selectedIndex]) {
+      navigate(results[selectedIndex].slug);
+    }
+  };
+
+  const getSnippet = (body: string, q: string): string => {
+    if (!q.trim()) return "";
+    const lower = body.toLowerCase();
+    const idx = lower.indexOf(q.toLowerCase());
+    if (idx === -1) return "";
+    const start = Math.max(0, idx - 40);
+    const end = Math.min(body.length, idx + q.length + 80);
+    return (
+      (start > 0 ? "..." : "") +
+      body.slice(start, end) +
+      (end < body.length ? "..." : "")
+    );
+  };
+
+  const isMac =
+    typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+  const shortcutLabel = isMac ? "⌘K" : "Ctrl K";
+
+  return (
+    <>
+      {/* Desktop trigger — looks like a compact search bar */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="border-border bg-surface hover:bg-surface-hover text-foreground-muted hidden cursor-pointer items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-colors md:flex"
+        aria-label="Search documentation"
+      >
+        <svg
+          className="h-4 w-4 shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+        <span className="hidden lg:inline">Search docs...</span>
+        <kbd className="bg-background-secondary text-foreground-muted rounded px-1.5 py-0.5 text-xs font-medium">
+          {shortcutLabel}
+        </kbd>
+      </button>
+
+      {/* Mobile trigger — icon only */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="text-foreground-secondary hover:text-foreground-bright flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition-colors md:hidden"
+        aria-label="Search documentation"
+      >
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </button>
+
+      {/* Overlay */}
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={() => setIsOpen(false)}
+          />
+
+          {/* Palette */}
+          <div className="bg-surface border-border relative z-10 w-full max-w-lg overflow-hidden rounded-xl border shadow-2xl">
+            {/* Search input */}
+            <div className="border-border flex items-center gap-3 border-b px-4 py-3">
+              <svg
+                className="text-foreground-muted h-5 w-5 shrink-0"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Search documentation..."
+                className="text-foreground placeholder-foreground-muted min-w-0 flex-1 bg-transparent text-sm outline-none"
+                autoComplete="off"
+                spellCheck={false}
+              />
+              <kbd
+                className="bg-background-secondary text-foreground-muted shrink-0 rounded px-1.5 py-0.5 text-xs"
+                onClick={() => setIsOpen(false)}
+              >
+                ESC
+              </kbd>
+            </div>
+
+            {/* Results */}
+            <ul
+              ref={listRef}
+              className="max-h-80 overflow-y-auto p-2"
+              role="listbox"
+            >
+              {results.length === 0 && query.trim() && (
+                <li className="text-foreground-muted px-3 py-6 text-center text-sm">
+                  No results for &ldquo;{query}&rdquo;
+                </li>
+              )}
+              {results.length === 0 && !query.trim() && !index && (
+                <li className="text-foreground-muted px-3 py-6 text-center text-sm">
+                  Loading...
+                </li>
+              )}
+              {results.map((item, i) => {
+                const snippet = getSnippet(item.body, query);
+                return (
+                  <li key={item.slug} role="option" aria-selected={i === selectedIndex}>
+                    <button
+                      onClick={() => navigate(item.slug)}
+                      onMouseEnter={() => setSelectedIndex(i)}
+                      className={`w-full cursor-pointer rounded-lg px-3 py-2.5 text-left transition-colors ${
+                        i === selectedIndex
+                          ? "bg-primary/10 text-foreground-bright"
+                          : "text-foreground hover:bg-primary/5"
+                      }`}
+                    >
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">
+                          {item.title}
+                        </span>
+                        {item.chapter && (
+                          <span className="text-foreground-muted bg-background-secondary rounded px-1.5 py-0.5 text-[0.65rem]">
+                            {item.chapter}
+                          </span>
+                        )}
+                      </div>
+                      {snippet && (
+                        <p className="text-foreground-secondary mt-1 line-clamp-1 text-xs">
+                          {snippet}
+                        </p>
+                      )}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+
+            {/* Footer */}
+            <div className="border-border text-foreground-muted flex items-center gap-4 border-t px-4 py-2 text-xs">
+              <span>
+                <kbd className="bg-background-secondary rounded px-1 py-0.5">↑↓</kbd> navigate
+              </span>
+              <span>
+                <kbd className="bg-background-secondary rounded px-1 py-0.5">↵</kbd> open
+              </span>
+              <span>
+                <kbd className="bg-background-secondary rounded px-1 py-0.5">esc</kbd> close
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..c0db0cc
--- /dev/null
+++ b/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+export default function ThemeSwitcher() {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useEffect(() => {
+    // Read initial state from the DOM (set by the inline head script)
+    setTheme(
+      document.documentElement.classList.contains("dark") ? "dark" : "light",
+    );
+  }, []);
+
+  const toggle = () => {
+    const next: Theme = theme === "light" ? "dark" : "light";
+    setTheme(next);
+    document.documentElement.classList.toggle("dark", next === "dark");
+    localStorage.setItem("theme", next);
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="text-foreground-secondary hover:text-foreground-bright flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition-colors"
+      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+      title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+    >
+      {theme === "light" ? (
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index 943aa47..00fc4a7 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -3,8 +3,13 @@ import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
 import DocsSidebarLeft from "@/components/docs/DocsSidebarLeft.astro";
 import TableOfContents from "@/components/docs/TableOfContents.astro";
-import { extractHeadingsFromMarkdown } from "@/utils/docs";
+import {
+  extractHeadingsFromMarkdown,
+  sortDocPages,
+  buildSearchIndex,
+} from "@/utils/docs";
 import type { CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
 import { Font } from "astro:assets";
 import { ClientRouter } from "astro:transitions";
 
@@ -26,6 +31,10 @@ const pageTitle = `${title ? `${title} | ` : ""}JAAD - Docs`;
 
 // Extract headings from markdown content
 const headings = entry ? extractHeadingsFromMarkdown(entry.body || "") : [];
+
+// Build static search index from collections
+const docsCollection = await getCollection("docsPages");
+const searchIndex = buildSearchIndex(sortDocPages(docsCollection));
 ---
 
 <!doctype html>
@@ -60,6 +69,17 @@ const headings = entry ? extractHeadingsFromMarkdown(entry.body || "") : [];
 
     <meta name="generator" content={Astro.generator} />
 
+    <script is:inline>
+      (function () {
+        var t = localStorage.getItem("theme");
+        if (
+          t === "dark" ||
+          (!t && matchMedia("(prefers-color-scheme: dark)").matches)
+        )
+          document.documentElement.classList.add("dark");
+      })();
+    </script>
+
     <ClientRouter />
   </head>
   <body
@@ -67,6 +87,13 @@ const headings = entry ? extractHeadingsFromMarkdown(entry.body || "") : [];
   >
     <Header />
 
+    <!-- Static search index, built at compile time from collections -->
+    <script
+      id="jaad-search-index"
+      type="application/json"
+      set:html={JSON.stringify(searchIndex)}
+    />
+
     <div class="docs-container relative">
       <DocsSidebarLeft currentSlug={currentSlug} />
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f867bf2..0023678 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -43,8 +43,19 @@ import "@/styles/global.css";
     <meta name="twitter:image" content="/og-image.png" />
 
     <meta name="generator" content={Astro.generator} />
+
+    <script is:inline>
+      (function () {
+        var t = localStorage.getItem("theme");
+        if (
+          t === "dark" ||
+          (!t && matchMedia("(prefers-color-scheme: dark)").matches)
+        )
+          document.documentElement.classList.add("dark");
+      })();
+    </script>
   </head>
-  <body class="flex min-h-screen flex-col text-[14px] leading-[1.6]">
+  <body class="bg-background text-foreground flex min-h-screen flex-col text-[14px] leading-[1.6]">
     <Header />
     <main
       role="main"
diff --git a/src/styles/docs.css b/src/styles/docs.css
index 15a3e16..e5119ff 100644
--- a/src/styles/docs.css
+++ b/src/styles/docs.css
@@ -97,6 +97,11 @@ html {
   padding: 0.5rem;
 }
 
+/* Dark mode: lighter arrow for mobile nav selects */
+html.dark .docs-mobile-nav select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23c9d1d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+}
+
 /* Hide the ToC sidebar until initToc() has finished all DOM work.
    This prevents a flash where stale/filtered items are briefly visible
    before the JS module removes them. The attribute is removed by the script. */
diff --git a/src/styles/global.css b/src/styles/global.css
index 9f471b7..3ebcaad 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -105,3 +105,33 @@ i.nf {
   letter-spacing: -0.01em;
   line-height: 1;
 }
+
+/* ── Dark mode ─────────────────────────────────────────────── */
+
+html.dark {
+  color-scheme: dark;
+
+  --color-background: #0d1117;
+  --color-background-secondary: #161b22;
+  --color-background-tertiary: #1c2128;
+  --color-surface: #21262d;
+  --color-surface-hover: #30363d;
+
+  --color-primary: #c9d1d9;
+  --color-primary-dark: #e6edf3;
+  --color-primary-light: #8b949e;
+
+  --color-foreground: #c9d1d9;
+  --color-foreground-secondary: #8b949e;
+  --color-foreground-muted: #6e7681;
+  --color-foreground-bright: #e6edf3;
+
+  --color-border: #30363d;
+  --color-border-light: #21262d;
+  --color-border-dark: #484f58;
+
+  --color-error: #f85149;
+  --color-warning: #d29922;
+  --color-info: #58a6ff;
+  --color-success: #3fb950;
+}
diff --git a/src/styles/jaamd.css b/src/styles/jaamd.css
index dba29b1..c7d4f45 100644
--- a/src/styles/jaamd.css
+++ b/src/styles/jaamd.css
@@ -75,3 +75,32 @@
   --jaamd-alert-caution-color: #cf222e;
   --jaamd-alert-caution-bg: #ffebe9;
 }
+
+/* Dark mode — override hardcoded hex values.
+   Properties referencing var(--color-*) update automatically. */
+html.dark {
+  --jaamd-code-bg: var(--color-background-secondary);
+  --jaamd-code-border: var(--color-border);
+
+  --jaamd-copy-btn-border: var(--color-border-dark);
+  --jaamd-copy-btn-hover-border: var(--color-foreground-muted);
+
+  --jaamd-blockquote-border: var(--color-border-dark);
+
+  --jaamd-table-border: var(--color-border);
+  --jaamd-table-hover-bg: var(--color-background-tertiary);
+
+  --jaamd-tabs-header-bg: var(--color-background-tertiary);
+  --jaamd-tabs-btn-hover-bg: var(--color-surface);
+
+  --jaamd-alert-note-color: #58a6ff;
+  --jaamd-alert-note-bg: rgba(56, 139, 253, 0.1);
+  --jaamd-alert-tip-color: #3fb950;
+  --jaamd-alert-tip-bg: rgba(46, 160, 67, 0.1);
+  --jaamd-alert-important-color: #a371f7;
+  --jaamd-alert-important-bg: rgba(163, 113, 247, 0.1);
+  --jaamd-alert-warning-color: #d29922;
+  --jaamd-alert-warning-bg: rgba(187, 128, 9, 0.1);
+  --jaamd-alert-caution-color: #f85149;
+  --jaamd-alert-caution-bg: rgba(248, 81, 73, 0.1);
+}
diff --git a/src/utils/docs.ts b/src/utils/docs.ts
index df45051..b48fba2 100644
--- a/src/utils/docs.ts
+++ b/src/utils/docs.ts
@@ -194,3 +194,53 @@ export function buildDocNavItems<
     };
   });
 }
+
+// ── Search index ────────────────────────────────────────────────────────────
+
+export interface DocsSearchEntry {
+  title: string;
+  slug: string;
+  chapter: string | null;
+  body: string;
+}
+
+/** Strip markdown syntax to plain text for search indexing. */
+function stripMarkdown(text: string): string {
+  return text
+    .replace(/^#{1,6}\s+/gm, "")
+    .replace(/\*\*(.+?)\*\*/g, "$1")
+    .replace(/\*(.+?)\*/g, "$1")
+    .replace(/`{3,}[\s\S]*?`{3,}/g, "")
+    .replace(/`(.+?)`/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/!\[([^\]]*)\]\([^)]+\)/g, "")
+    .replace(/^>\s?/gm, "")
+    .replace(/^[-*+]\s+/gm, "")
+    .replace(/^\d+\.\s+/gm, "")
+    .replace(/^:::.*$/gm, "")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+/**
+ * Build a search index from sorted doc pages.
+ * Used at build time to generate the static data embedded in every docs page.
+ */
+export function buildSearchIndex<
+  T extends { id: string; body?: string; data?: { title?: string } },
+>(sortedPages: T[]): DocsSearchEntry[] {
+  return sortedPages.map((page) => {
+    const parsed = parseDocCollectionId(page.id);
+    const cleanSlug = getCleanSlug(page.id);
+    const title =
+      page.data?.title ??
+      (page.body ? extractTitleFromMarkdown(page.body) : null) ??
+      parsed.title;
+    return {
+      title,
+      slug: cleanSlug,
+      chapter: formatChapterTitle(parsed.chapter),
+      body: stripMarkdown(page.body || ""),
+    };
+  });
+}
