This website uses cookies to improve the user experience, more information on the legal information path.
Notes
0
years
0
mons
0
days
0
hour
0
mins
0
secs
00
2
Dark theme with Nextjs
There are many ways to manage style themes in React and Nextjs, but all of them involve having an array/object with all the styles of each of the different themes.
another way is to use css or scss variables these last ones are in more and more disuse. I, in particular, am going to use css variables and set a default theme in my _document. Why here ?
Because _document runs on server not like _app which runs on client and if you use a useEffect to set your default theme or detect the one the user has on their operating system,
in the time it takes to do this check and add it, there can be a flicker in the page styles. That can be strange.
name={f({ id: theme === dark ? 'settings.dark' : 'settings.light' })}
onClick={toggleTheme}
/>
</section>
<section className={styles.confg}></section>
</div>
);
};
To do the live test, you can change the theme on your operating system and you will see that my website updates automatically or you can also go to my settings page and change the theme.
All the code in my github repository, if you like this project, or if the content has helped you in any way you can reward me with a ⭐️, Thanks!