{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-dark-mode-theme-in-react-using-css-variables-and-react-context/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n
If you want to implement a dark mode theme in React using GSAP (a JavaScript animation library), check out my blog post here.
\n

I realized that many people might not be familiar with GSAP. Therefore, I decided to implement the dark mode theme using CSS variables. This tutorial also provides a great learning opportunity on the typical use case of React Context.

\n

Before we start, here is a primer on CSS variables and React Context.

\n

CSS variables

\n

CSS variables allow us to store a value in one place and then reference it in multiple other places.

\n

The common best practice to define custom variables is on the :root pseudo-class, so that they can be applied globally across the HTML document. Note that the name of the custom variables begin with double hyphens (--).

\n
:root {\n  ---main-text-color: gray;\n}
\n

Then we can use the custom variable by specifying the name of the property inside the var function. Like so:

\n
p {\n  color: var(--main-text-color);\n}
\n

React Context

\n

The first thing to remember about React Context is that it’s NOT a state management tool.

\n

In a typical React application, data is passed from the parent component to the child component (top-down) through props.

\n

Imagine a React application where components at different nesting levels of the component tree need access to data held by a stateful component located at the top of the component tree.

\n

In such a scenario, we pass down data from the stateful component to the destination component through props, which also get added to intermediate components that don't even require those props. This passing down of props through the intermediate level is known as prop drilling or threading.

\n

Prop drilling is not a big problem if the React app is made up of a handful of components. But in a complex React app, prop drilling makes it difficult to create reusable components.This is where Context API comes into picture.

\n

Context helps us avoid the issue of prop drilling. It broadcasts data to components that need them, thereby avoiding the need to manually pass props down at every intermediate level of the component tree.

\n

In a nutshell, Context API is simply a transport mechanism.

\n

Project walkthrough

\n

Here is the project that we are going to build.

\n

Light mode

\n

\n \n \n \n \n

\n

Dark mode

\n

\n \n \n \n \n

\n

The toggle button lacks functionality. We will make it work soon.

\n

The logic for implementing dark mode is very simple.

\n

We will keep a boolean state variable named darkMode (you can name it whatever you want) and the function responsible for updating the darkMode variable, named setDarkMode, in the component which sits at the top of the component tree. This will be the App component in our case.

\n

We will pass the darkMode varaible to the components (Navbar.js & Footer.js) which will then use its value to conditionally add class names to HTML elements. Next, we will pass the setDarkMode function to the Toggle component. The onClick event listener of the toggle button will call the setDarkMode function, which will then reverse the value of the darkMode variable (remember that darkMode is a boolean). We will use Context API to transport the darkMode variable and the setDarkMode function to the required child components.

\n

That's all there is to implementing dark mode theme in React apps.

\n

Now, let's add the highlighted code snippets in the respective components as shown below:

\n
src/App.js
\n
import React, { useState, createContext } from "react";\nimport { Route, Switch } from "react-router";\nimport About from "./components/About";\nimport Projects from "./components/Projects";\nimport Blog from "./components/Blog";\nimport Navbar from "./components/Navbar";\nimport Footer from "./components/Footer";\n\nexport const ThemeContext = createContext();\n\nconst App = () => {\n  const [darkMode, setDarkMode] = useState(false);\n\n  const darkModeTheme = {\n    darkMode,\n    setDarkMode,\n  };\n\n  return (\n    <ThemeContext.Provider value={darkModeTheme}>\n      <div className="app-wrapper">\n        <Navbar />\n        <main className={darkMode ? "main-dark" : "main-light"}>\n          <Switch>\n            <Route path="/about">\n              <About />\n            </Route>\n            <Route path="/projects">\n              <Projects />\n            </Route>\n            <Route path="/blog">\n              <Blog />\n            </Route>\n          </Switch>\n        </main>\n        <Footer />\n      </div>\n    </ThemeContext.Provider>\n  );\n};\n\nexport default App;
\n

On line 23, notice that we are conditionally adding class names based on the value of the darkMode variable.

\n
src/components/Navbar.js
\n
import React, { useContext } from "react";\nimport { NavLink } from "react-router-dom";\nimport { ThemeContext } from "../App";\nimport Toggle from "./Toggle";\n\nconst Navbar = () => {\n  const { darkMode } = useContext(ThemeContext);\n\n  return (\n    <nav className={darkMode ? "navigation-dark" : "navigation-light"}>\n      <ul>\n        <NavLink to="/about" activeClassName="active">\n          About\n        </NavLink>\n        <NavLink to="/projects" activeClassName="active">\n          Projetcs\n        </NavLink>\n        <NavLink to="/blog" activeClassName="active">\n          Blog\n        </NavLink>\n      </ul>\n      <Toggle />\n    </nav>\n  );\n};\n\nexport default Navbar;
\n
src/components/Toggle.js
\n
import React, { useContext } from "react";\nimport { ThemeContext } from "../App";\nimport { FontAwesomeIcon } from "@fortawesome/react-fontawesome";\nimport { faSun } from "@fortawesome/free-solid-svg-icons";\nimport { faMoon } from "@fortawesome/free-solid-svg-icons";\n\nconst Toggle = () => {\n  const { darkMode, setDarkMode } = useContext(ThemeContext);\n\n  const theme = darkMode ? "light" : "dark";\n\n  const circleClickHandler = (theme) => {\n    setDarkMode(!darkMode);\n    document.documentElement.className = theme;\n  };\n\n  return (\n    <div className="toggle-wrapper">\n      <div className="toggle" onClick={() => circleClickHandler(theme)}>\n        <div>\n          <FontAwesomeIcon icon={faSun} className="sun" />\n        </div>\n        <div>\n          <FontAwesomeIcon icon={faMoon} className="moon" />\n        </div>\n        <div className={darkMode ? "circle-dark" : "circle-light"}></div>\n      </div>\n    </div>\n  );\n};\n\nexport default Toggle;
\n
src/components/Footer.js
\n
import React, { useContext } from "react";\nimport { ThemeContext } from "../App";\n\nconst Footer = () => {\n  const { darkMode } = useContext(ThemeContext);\n\n  return (\n    <footer className={darkMode ? "footer-dark" : "footer-light"}>\n      &copy; 2021, All Rights Reserved\n    </footer>\n  );\n};\n\nexport default Footer;
\n
src/index.css
\n
/*_ || Global styling _*/\n* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:root.light {\n  --bg-color: white;\n}\n\n:root.dark {\n  --bg-color: #282c35;\n}\n\nbody {\n  background-color: var(--bg-color);\n}\n\nhtml {\n  font-size: 62.5%;\n  font-family: sans-serif;\n}\n/*_ End of global styling _*/\n\n.app-wrapper {\n  min-height: 100vh;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n}\n\n/* || Toggle button styling */\n\n.toggle {\n  width: 4rem;\n  height: 2rem;\n  margin: 4rem;\n  background-color: gray;\n  border-radius: 3rem;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.sun,\n.moon {\n  font-size: 1.2rem;\n}\n\n.sun {\n  color: yellow;\n}\n\n.circle-light {\n  width: 1.4rem;\n  height: 1.4rem;\n  background-color: lightgray;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 5%;\n  transform: translateY(-50%);\n  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.6);\n}\n.circle-dark {\n  width: 1.4rem;\n  height: 1.4rem;\n  background-color: lightgray;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  right: 5%;\n  transform: translateY(-50%);\n  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.6);\n}\n\n/* End of toggle button styling */\n\n.navigation-light {\n  width: 100%;\n  height: 6rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 0.1rem solid black;\n}\n\n.navigation-dark {\n  width: 100%;\n  height: 6rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 0.1rem solid gray;\n}\n\n.navigation-light ul,\n.navigation-dark ul {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  padding: 0 2rem 0 2rem;\n}\n\n.navigation-light ul a,\n.navigation-dark ul a {\n  text-decoration: none;\n  font-size: 1.4rem;\n  margin-right: 2rem;\n}\n\n.navigation-light ul a:link,\n.navigation-light ul a:visited {\n  color: black;\n}\n\n.navigation-dark ul a:link,\n.navigation-dark ul a:visited {\n  color: gray;\n}\n\n.navigation-light ul a:hover {\n  color: gray;\n}\n\n.navigation-dark ul a:hover {\n  color: white;\n}\n\n.navigation-light ul a:active,\n.navigation-dark ul a:active {\n  color: lawngreen;\n}\n\n.active {\n  font-weight: 900;\n}\n\n/*_ || Main section styling _*/\n\n.main-light {\n  font-size: 3rem;\n  width: 80%;\n  margin: 0rem auto;\n  padding: 1rem;\n  font-weight: bold;\n}\n\n.main-dark {\n  font-size: 3rem;\n  width: 80%;\n  margin: 0rem auto;\n  padding: 1rem;\n  font-weight: bold;\n  color: gray;\n}\n\n/*_ End of main section styling _*/\n\n/*_ || Footer section styling _*/\n\n.footer-light {\n  width: 100%;\n  height: 4rem;\n  display: grid;\n  place-items: center;\n  font-size: 1.4rem;\n}\n\n.footer-dark {\n  width: 100%;\n  height: 4rem;\n  display: grid;\n  place-items: center;\n  font-size: 1.4rem;\n  color: gray;\n}\n\n/*_ || End of footer section styling _*/\n
\n

Now the toggle button works and we are able to toggle between light and dark mode themes.

\n
You can clone the GitHub repo here.
\n","frontmatter":{"title":"Implement Dark Mode in React Using CSS Variables & React Context","date":"2021-07-07"}}},"pageContext":{"slug":"/implement-dark-mode-theme-in-react-using-css-variables-and-react-context/","prev":{"fields":{"slug":"/how-to-use-the-javascript-optional-chaining-operator-in-react/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/understanding-dangerouslysetinnerhtml-in-react/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}