fix hydration mismatch: sync html data-scheme default to dark and suppress body attribute warnings

This commit is contained in:
dvorakmortonxd 2026-10-05 09:41:04 +02:00
commit ef9d44f7d3
6 changed files with 15 additions and 10 deletions

View file

@ -34,7 +34,7 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a
## Bump the version on EVERY prompt — also do this every time
Another standing requirement: increment the **patch** version (`x.x.+1`, so
`2.2.6` → `2.2.7` → …) as part of every task, even the small ones. Keep all of
`2.2.7` → `2.2.8` → …) as part of every task, even the small ones. Keep all of
these in sync:
- `package.json` → `"version"`
@ -56,7 +56,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation**
utilities in the components (Tailwind is present via PostCSS but the look is
hand-written CSS).
- Path alias: `@/*` → `src/*`.
- Version: `2.2.7` (see `package.json`).
- Version: `2.2.8` (see `package.json`).
### Scripts
```bash
@ -124,6 +124,11 @@ scripts/
`localStorage.scheme` and sets `data-scheme` (`light` | `dark`), defaulting to
`dark` (only an explicit stored `light` overrides it). There is no device
sniff anymore.
**Keep `layout.tsx`'s server-rendered `<html>` defaults in sync** (`data-theme="web"`,
`data-scheme="dark"`) with this script's defaults, or React 19 logs a hydration
attribute mismatch ("A tree hydrated but some attributes… didn't match"). `<html>`
and `<body>` both carry `suppressHydrationWarning` (the theme script mutates `<html>`
before hydration, and browser extensions mutate `<body>`).
2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via `useSyncExternalStore`
and dispatches a `theme-change` event on toggle. `useColorScheme()` does the
same for `data-scheme` via a `scheme-change` event.
@ -454,7 +459,7 @@ knows about icon ids, via `APP_BY_ID`.
- There is **no test suite**. Verification is `tsc --noEmit`, `eslint`, and
`next build`.
- The default shell is the web theme: `curl -s http://localhost:3000/` should
contain `data-theme="web"` / `data-scheme="light"` and the `.web-root` markup.
contain `data-theme="web"` / `data-scheme="dark"` and the `.web-root` markup.
Theme + scheme are read pre-paint from `localStorage.theme` / `.scheme`, so a
quick check is to set those in devtools and reload.
- `next/image` is lazy by default, so a headless full-page screenshot shows the