How to add dark/light mode to my next.js blog?

[SachinMaharana]

I have started doing som web dev for my personal project and figuring out how to implmenet a dark mode for the next.js with styled-jsx. i haven't come across any exmaples. Any idea help me figure out this would be of great help.

[erikdstock]

since styled-jsx uses interpolated css values you may be able to use the react state api to inject some main body/text colors at a high level. You may also have luck with a theming library that supports color modes- theme-ui which has this and a next.js example in its repository.

[leerob]

Here's an example using styled-jsx that has dark mode.

• https://static-tweet.now.sh/
• https://github.com/lfades/static-tweet

[kachkaev]

Here is what I did in njt (npm jump to): kachkaev/njt@1ef3bb0

• Uses https://github.com/donavon/use-dark-mode
• Based on setting .dark-mode / .light-mode to body. I'm using these extra class names in styled-component styles, but the trick should also work in any other styling solution
• No initial page flickering because of a raw js injection into _document.tsx
• Currently no on/off switch, only relying on OS values. But:
  • Adding an on/off switch should be easy, hence useDarkMode() is already used in _app.tsx
  • Changing dark mode in macOS changes the mode of the page without page reload 👀