lancher-dev · Kasui92 · Apr 7, 2026
diff --git 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
@@ -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
@@ -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
@@ -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>