How to add dark mode in Gatsby + React Project!

#gatsby #javascript #webdev #react

for styled component

Adding dark theme become Trend not only on the web but also in desktop, native apps. There are some benefits of adding dark theme to your existing project or next project, dark theme reduces the lights emitted by the screen which helps the reader to read with no pain at night, even day and save battery life...

Get started

prerequisites, install the gatsby project and some packages, follow along:

gatsby new dark-mode

cd dark-mode/

install toggler, button

yarn add react-darkmode-toggler

and also we need styled-components package to use CSS-in-JS

yarn add styled-components

once it's done open up vscode I'll be using for this scenario and and create file named /src/components/Theme/Theme.js there we'll define our theme color for both dark and light:

export const darkTheme = {
  body: "#121212",
  surface: "#1D1D1D",
  font: "#D1D1D1",
}

export const lightTheme = {
  body: "#FFFFFF",
  surface: "#EEF2F5",
  font: "#2A292E",
}

as you see I've created two objects darkTheme for the dark and lightTheme for light (default), you can create a lot of properties like buttonColor, hoverEffect.... but make sure exists in both object darkTheme and lightTheme with CSS color.

Now we need some data to be rendered to screen for that we're gonna use some dummy data. create a folder with a file named Post /src/components/Post/Post.js and there we can add dummy data and style it using styled-components:

import React from "react"
import styled from "styled-components"

const Row = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
`

const Col = styled.div`
  flex: 1 1 30%;
  max-width: 40%;
  margin: 10px;
  height: 150px;
  background: ${({ theme }) => theme.body};
  color: ${({ theme }) => theme.font};
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-family: sans-serif;
`

export const Post = () => {
  return (
    <Row>
      {[1, 2, 3, 4, 5, 6, 8, 9].map(_ => (
        <Col key={_}>
          <h1>Hello, Gatsby</h1>
          <p>Love to use Gatsb and Learn cool stuff!</p>
          <p>Trying to Add Dark Theme in my Project!</p>
        </Col>
      ))}
    </Row>
  )
}

Rendering nine posts with h1 and two p, to change the color on dark mode and light we have access to theme object inside styled which we created earlier (theme properties).

changing background color, background: ${ }, we need to arrow function it's receiving theme object like background: ${props => props.theme.body}, props.theme.body is we created in Theme.js, make it simpler, destruct it background: ${({ theme }) => theme.body};, go ahead assign it for anything you want, but we haven't yet provide the theme oject to ThemeProvider to make it happen, let do it in /src/pages/index.js, root file:

import React, { useState } from "react"
import { DarkModeToggler } from "react-darkmode-toggler"
import { Post } from "../components/Post/Post"

// Theme Provider
import styled, { ThemeProvider } from "styled-components"
import { lightTheme, darkTheme } from "../components/Theme/Theme"

/**
 * To center Toggler
 */
const Div = styled.div`
  margin: 20px auto;
  display: flex;
  justify-content: center;
`

export default () => {
  const [isDark, setIsDark] = useState("light")

  // Dark mode button toggler
  const darkModeHandler = () => {
    setIsDark(isDark === "light" ? "dark" : "light")
  }

  return (
    <ThemeProvider theme={isDark === "dark" ? darkTheme : lightTheme}>
      <GlobalStyle theme={isDark} />
      <Div>
        <DarkModeToggler
          size="small"
          isDark={isDark}
          onClick={darkModeHandler}
          border="#FFFFFF"
        />
      </Div>
      <Post />
    </ThemeProvider>
  )
}

There you have it! but we also need to change the HTML body color, let create gloablStyle.js in /src/components/Theme/:

import { createGlobalStyle } from "styled-components"
export const GlobalStyle = createGlobalStyle`
  body {
    background-color: ${props =>
      props.theme === 'dark' ? "#121212" : "#FFFFFF"};
  }`

and import the file in the /src/pages/index.js, beneath the <ThemeProvider>, and passing the theme props like:

 <ThemeProvider theme={isDark === "dark" ? darkTheme : lightTheme}>
      <GlobalStyle theme={isDark} />
      /....
    </ThemeProvider>

Thanks for reading my post, Github repo for this project. in the next post, I'll walk you through the CSS/SCSS to add Dark theme, and also for the @material-ui.