38 lines
1.5 KiB
Markdown
38 lines
1.5 KiB
Markdown
# 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
|