13 replies

Persist Theme Value in Nextjs from ContextAPI

Hello. I'm trying to persist theme data in a Nextjs application (v 13.1.1 pages) using ContextApi.
Now, usually the theme state gets compiled from a

ThemeContext

ThemeContext

and passed into the application. When the user toggles the theme, I save this value in local storage for when they come to the site again.
This fails because Nextjs is first generated on the server and there's no local storage.

What I tried
1. I tried checking for type of

window

window

and passing the default value (light theme) if it isn't found
2. I tried

useEffect

useEffect

(and

useLayoutEffect

useLayoutEffect

) to get the theme value from local storage when the user first loads the page.

The problem with both methods is, if the user enables darkMode as their default, when the page first loads, it is initially lightMode then switches to darkMode after some milliseconds. For more context, I could provide the two files that all this is happening