How to add dark mode in Gatsby + React Project!
Tags: gatsby, javascript, webdev, react
Published: 2020-07-25 16:11:31

---
title: How to add dark mode in Gatsby + React Project!
published: true
description: adding a dark theme to your application using react, gatsby!
tags: #gatsby #javascript #webdev #react
cover_image: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2391029b-6a62-4adc-85b3-832e8e171384/dark-mode-resources-figure-01.png
---

# 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:
```shell
gatsby new dark-mode

cd dark-mode/
```

[install toggler, button](https://github.com/lifeeric/react-darkmode-toggler)

```shell
yarn add react-darkmode-toggler
```
and also we need styled-components package to use CSS-in-JS
```bash
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:
```js
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`:

```js
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:

```js
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/`:

```js
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:

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izezpbgor1a2sjoipjlj.gif)


Thanks for reading my post, [Github repo for this project](https://github.com/lifeeric/dev-gatsby-dark-theme). in the next post, I'll walk you through the `CSS/SCSS` to add Dark theme, and also for the @material-ui.