Skip to content

janosh/dark-mode-minimal

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

Gatsby Dark Mode Minimal

dark-mode-mvp screenshot

MVP of rehydration-safe (aka SSR-compatible), flicker-free dark mode in Gatsby. It revolves around a useDarkMode hook which in turn calls a useLocalStorage hook to persist the users preference across page visits and a useMediaQuery hook to default to the OS color scheme setting. useMediaQuery also registers an event listener that automatically changes the color mode if the state of the (prefers-color-scheme: dark) media query changes in the background, say because the user scheduled his OS tu activate dark mode after sunset. It's perhaps worth noting that no other dark mode implementation I could find does this.

The code in gatsby-ssr.js was adapted from Joshua Comeau's implementation.

Additional Resources

It's described in more detail on my and Joshua's blog:

You can check out the live demo here:

https://gatsby-dark-mode-minimal.netlify.app

Notable files

About

SSR compatible, flicker-free dark mode MVP in Gatsby

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published