How to easily add dark mode to Gatsbyjs

May 25, 2019 GatsbyJS

We start by installing gatsby-plugin-dark-mode. This plugin allows us to switch theme and persist it to localStorage

npm install gatsby-plugin-dark-mode

//add it to gatsby-config.js
module.exports = {
  plugins: ['gatsby-plugin-dark-mode'],
}

Then we add a new component to your project: here I am using two font-awesome icons, clicking on the displayed one will call the toggleTheme function provided by the plugin and change the theme.

import React, { Fragment } from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'

class DarkLightSwitch extends React.Component {
  render() {
    return (
      <ThemeToggler> 
        {({ theme, toggleTheme }) => {
          const iconClass =
            theme === 'light' ? 'fa fa-moon-o fa-2x' : 'fa fa-sun-o fa-2x'
          return (
            <Fragment>
              <i
                className={iconClass}
                onClick={() => {
                  const nextTheme = theme === 'light' ? 'dark' : 'light'
                  toggleTheme(nextTheme)
                }}
              />
            </Fragment>
          )
        }}
      </ThemeToggler>
    )
  }
}

export default DarkLightSwitch

Lastly, we apply the design using global styles. Note that the plugin adds the current theme name to the body element’s className (dark or light)

body {
  --anchorLink: #3273dc;
  --navbarBackground: whitesmoke;
  --navbarColor: #363636;
  --bg: #ffffff;
  --textColor: #222;
  --inlineCode-bg: #f0da4f33;
  --inlineCode-text: inherit;
  --boxShadow1: rgba(0, 0, 0, 0.13);
  --boxShadow2: rgba(0, 0, 0, 0.19);
  background-color: var(--bg);
}

body.dark {
  -webkit-font-smoothing: antialiased;
  --anchorLink: #f0da4f;
  --navbarBackground: #000008;
  --navbarColor: white;
  --bg: #000008;
  --textColor: white;
  --boxShadow1: rgba(249, 251, 82, 0.13);
  --boxShadow2: rgba(232, 248, 85, 0.19);
}
.content blockquote {
  background-color: var(--navbarBackground);
}
.content h1,
.content h2,
.content h3,
.content li {
  color: var(--textColor);
}