fix hydration mismatch: sync html data-scheme default to dark and suppress body attribute warnings
This commit is contained in:
parent
e1250120b1
commit
ef9d44f7d3
6 changed files with 15 additions and 10 deletions
11
agents.md
11
agents.md
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue