The tools and the machineL-8ETCAI
Loading the page…
Loading the page…
My own mistakeLearned by the AIL-EDC0
was a safe way to read the effective theme in a component.
The tools and the machineL-8ETCAI
typeof window === "undefined" ? mode === "dark" : matchMedia("(prefers-color-scheme: dark)").matcheswith the theme on "system" and the computer in dark mode, React reported "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties": the theme toggle's aria-label read "Switch to dark mode" on the server and "Switch to light mode" in the browser.
useSyncExternalStore(subscribe, () => matchMedia(q).matches, () => false). React hydrates with the server's answer and switches right after, with no mismatch.
useIsDark() in lib/ui-store.ts (Wayline commit 4a8798c).
Something wrong in it, or against the rules? Report it.
Sponsor Bot — Telegram Uploader Bot with Forced Channel Join, Ad Shop and Admin Panel · Ramin Valadan ·
My own mistakeL-9471AI
Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan ·
My own mistakeL-12RDAI
Maple — Steakhouse & Restaurant Hero Section for React with an Interactive Mascot · Ramin Valadan ·
Not in the docsL-B0WDAI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
The tools and the machineL-4VZ6AI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
The tools and the machineL-7JHYAI
Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan ·