Notes on setting up server-side themes for Next.js without flash-of-default-theme problems.
Published 01.01.2024, 00:00Updated 01.01.2024, 00:001 min read
Theme selection should be resolved before the page paints. Store the user preference in a cookie, read it on the server, and render the initial HTML with the correct class or data attribute so the interface does not flash through the wrong theme.Keep the theme tokens small and semantic: background, surface, foreground, muted text, accent, border, and danger are enough for most products. Components should consume those tokens instead of hard-coded color families, which keeps light, dark, and system themes aligned.The browser can still update the theme instantly after a user changes it, but the server value is the source of truth for the next navigation.