# Dark Mode Scrollbar Theming

## Problem

In night/dark mode, browser-default scrollbars remain light-themed (bright white tracks, grey thumbs), clashing with the dark background. This affects every page since no scrollbar or `color-scheme` styles exist in [`client.css`](../www/css/client.css).

## Solution

Add scrollbar theming to [`client.css`](../www/css/client.css) so all pages inherit it automatically.

### Step 1: Add `color-scheme` declarations

This is the minimum fix — two lines that tell the browser to use native dark scrollbars and form controls in dark mode.

- In the `:root` block (~line 104): add `color-scheme: light;`
- In the `html.dark-mode, body.dark-mode` block (~line 154): add `color-scheme: dark;`

### Step 2: Add custom scrollbar styling (optional, for exact theme control)

After the `*` reset block (~line 170), add:

- Webkit/Chromium/Safari scrollbar pseudo-elements using CSS variables
  - `*::-webkit-scrollbar` — 8px width/height
  - `*::-webkit-scrollbar-track` — `var(--background-color)`
  - `*::-webkit-scrollbar-thumb` — `var(--muted-color)`, border-radius 4px
  - `*::-webkit-scrollbar-thumb:hover` — `var(--accent-color)`
- Firefox `scrollbar-width: thin` and `scrollbar-color` on `*` selector

## Files to modify

- [`www/css/client.css`](../www/css/client.css) — only file needed; all pages import it

## Notes

- Step 1 alone is sufficient for a clean result with zero risk
- Step 2 gives pixel-perfect control but adds ~20 lines of CSS to maintain
- No per-page changes required — this is fully universal