It happens when the server renders one UI (e.g., light icon) but the client renders another after reading localStorage or system theme, so HTML differs. Fixes: make the server know the theme (cookie), or render theme-dependent UI only after mount (client-side), or use a stable placeholder and update it in `useEffect` (optionally with `suppressHydrationWarning`).
Expanding on the short answer — what usually matters in practice:
A tiny example (an explanation template):
// Example: discuss trade-offs for "theme-toggle-hydration-mismatch:-what-causes-it-"
function explain() {
// Start from the core idea:
// It happens when the server renders one UI (e.g., light icon) but the client renders anothe
}