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.

Solution

Add scrollbar theming to 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 — 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

1.5 KiB Raw Blame History