dark-mode

Dark mode breaks in React SSR because server-side rendering emits resolved hex colors inline, preventing CSS variable overrides from remapping theme colors at runtime on the client. Emitting theme tokens as CSS variable references fixes this.

To prevent dark mode flash during SSR, place data-theme on the html element and add a blocking head-run theme restoration script before paint. This ensures the correct theme applies immediately without waiting for client hydration.

Yes, this approach supports Tailwind setups and markdown renderers. It provides concrete rules and palette tokens to ensure theme-sensitive colors emit as CSS variable references across standalone HTML artifacts and email fallbacks.

The best way to toggle dark mode is using a three-state persistent toggle that respects the prefers-color-scheme media query fallback. This allows users to select light, dark, or system defaults while persisting their choice across sessions.

To convert inline-style render paths for dark mode, replace theme-sensitive inline colors with CSS variable references. This ensures client-side CSS overrides can successfully remap light and dark palettes across server-rendered components.

You should grep out inline-style render paths that serialize resolved hex colors or library color references. The Skill provides a pre-ship checklist and signature anti-patterns to ensure theme tokens remain overridable CSS variables.