DEV Community

Cover image for How to Implement "dark mode" with Gatsby & React Hooks

How to Implement "dark mode" with Gatsby & React Hooks

Kim Hart on August 01, 2019

I recently launched my new portfolio site and I have to say, I'm super proud! My old site was built on Wix years before I learned how to code and w...
Collapse
 
httpjunkie profile image
Eric Bishard • Edited

Love this tutorial, implementing my own dark mode for a simple application, so this was useful for that as well. I like the idea of using darkMode.enable() and darkMode.disable(). But I also thought about using a mode variable and assigning it 'light' and 'dark'. This way it allows me to add something like 'high-contrast-light' and 'high-contrast-dark' (more options) and potentially will scale a bit better. But tracking by the boolean makes for a simple example. Thanks for this.

Collapse
 
prashant1k99 profile image
Prashant Singh

First of all Great Portfolio site. It is really something to be proud of...
And thanks for the great piece of information. It really makes it simple to implement dark mode....

Collapse
 
jess profile image
Jess Lee

Whoa, your site looks so good!! Love the design, the toggle between dark/light mode is super fun too.

Collapse
 
kim_hart profile image
Kim Hart

Thanks Jess! 🙂

Collapse
 
popoo profile image
popo

Hello. I want a dark mode by default, but when I use const darkMode = useDarkMode(true) it still keeps it to light mode by default. Any idea ?

Collapse
 
kim_hart profile image
Kim Hart

Hard to know without seeing your code, my first guess is that your ‘dark-mode’ and ‘light-mode’ classes are applying the wrong CSS. Double check which classname is being applied to the body and which css properties are attached to those classes.

Collapse
 
teecodes profile image
Genos

Hi I've been trying to toggle the states with just one button but it doesn't seem to work, Can you help? please