Setting Up Dark Mode On My Personal Website
Dark mode using GatsbyJS plugin
I’ve been having a blast creating my personal website shivangisareen.gatsbyjs.io!
It’s coded using GatsbyJS which is built on top of React. In one of the first blog posts on my website here, I talk a little bit about my introduction to front-end web development and I’m loving it!
This blog post focusses on adding a dark mode functionality to a website using GatsbyJS.
The great news — gatsby-plugin-dark-mode handles most of the implementation for us. Following those steps, you’ll end up with a checkbox option for toggling dark mode on and off.
The tutorial explains it all but just to recap here and to add bits of missing information that one may find helpful -
Installing the plugin
Install the plugin and make sure you add it to your gatsby-config.js
Creating the component
To implement the toggler, we’re going to use the ThemeToggler from the plugin just installed. This handles the theme change for us. It sets the preferredTheme from our dark or light OS settings in our localStorage. Any time a user clicks on the check box to change the theme, our website updates to match the selected theme. After you’ve set up a basic working version of dark mode, I suggest inspecting the locally running version of your website and checking out the code between the <script></script> tags — you’ll be able to see the abstracted implementation of the plugin. Here is also a great article that talks about coding all this from scratch, to better understand the behind the scenes!
Here’s the first iteration of the DarkToggle component (I used a functional approach as opposed to a class based one talked about in the tutorial).
DarkToggle.js was added to the components/ directory under src/.
Super important — The toggled theme will be persisted across visits in
localStorage.theme. The default theme names are'light'and'dark'- the plugin adds the current theme name to the<body>element’sclassName, so you can use global styles to implement theming.Once again, inspect your website after you’ve finished implementing this to get a better idea of these variables.
Creating dark and light theme specific styles
For this we’ll create a global styles css. I saved this under src/components/styling/global.css.
As mentioned above, “default theme names are 'light' and 'dark' - the plugin adds the current theme name to the <body> element’s className”. This is why we’re using the body html tag and specifying body.dark for dark mode specific styles.
The variable names have to be the same for both light and dark modes. This css file will be imported into components/pages where we want the styles to differ when the theme changes.
For my use case, I only wanted to change the background colour and the general font colour throughout the website from white to black and vice versa depending on the theme. Most of the colour scheme on my website works for both dark and light mode.
Creating the Layout component
I created a Layout component as mentioned in the tutorial which contains the toggler and the changeable background colour. I then used this to wrap all the pages of the website.
Note that we import global.css and set the backgroundColor property to the variable --bg. When dark mode is selected, the backgroundColor will resolve to darkslategray and to white when it is light mode.
The children prop corresponds to the pages that this Layout component will encapsulate.
Here is an example below of where I’ve used the other defined global styles. This is the about page where I’ve got a paragraph of text whose colour depends on the theme, and so we’re using the--textNormal variable from global.css. The rest of the styling, which is independent of the theme, is being imported as className={text} from about.module.css.
This is it! Click the checkbox and let the dark mode come alive!
Now, what we’ve implemented is the very simple checkbox method for toggling dark mode. What we’re ultimately looking for is a button implementation. This requires a very small update to DarkToggle.js.
I’ve used Material-UI button and icons. Have a look here for installing the required packages.
To use a button instead of a checkbox, we make use of the onClick event handler. All we need to check for is the value of theme. If its value is ‘light’, then we make use of toggleTheme to switch it to ‘dark’ and vice versa.
Finally, we need an icon which is rendered, again using the value of theme.
There you have it. We implemented dark mode using an existing plugin and tweaked it so easily for our use!
