How to Create Dark/Light Mode with React (Tailwind Styling)

As developers, we should not limit ourselves to just one thing. Lets make our app more dynamic with both dark & light versions.

There are many tutorials about toggling Dark/Light mode with ReactJS. Heres my simple solution using React hook and CSS classes. I hope it will be helpful for your project.

Install React & Tailwind

The first step is to install Tailwind for React app. If you havent already, follow steps below to set it up:

Install React

Create a React site

install vite@latest my-blog --template-react

I use Vite for React set-up, but you can use any other build tool like Create-react-app.

Install React dependency

npm install

Start dev server

npm run dev

Install Tailwind

Install Tailwind in your React App

npm install -D tailwindcss postcss autoprefixer

Create tailwind.config.cjs file

npx tailwindcss init

Add Tailwind to your postCSS.config.js:

module.exports = {  plugins: {    tailwindcss: {},    autoprefixer: {},  }}

Import Tailwind to CSS - Add this code to start of your index.css file

@tailwind base;@tailwind components;@tailwind utilities;

Now run npm run dev and paste localhost link to your web browser to see your site in action.

Set up basic layout

If you look into src folder of your app, you will see there are two jsx files already set up: main.jsx and App.jsx.

Basically, App.jsx contains your components for the app (Navbar, Header, MainBody, Footer, etc.) while main.jsx is responsible for displaying App.jsx on the server. Components of your app usually lie within the components folder.

Vite does not give us a default components folder. So lets create one and add a Nav.jsx file:

import React from "react";export default function Nav() {    return (        <nav>            <h1>hello world</h1>        </nav>    )}

We will add more code to this later. For now, just put a temporary <h1> to see how its rendered in the app.

To display Nav content, import Nav.jsx to App.jsx:

import Nav from "./components/Nav"export default function App() {    return {        <Nav />}}

Now let's work on the dark/light mode.

Set up Dark/Light mode for React

Here are five steps we'll go through to set up Dark/Light Theme for React app:

Step 1: Set darkMode State
Step 2: Create toggleDarkMode function
Step 3: Trigger toggleDarkMode function
Step 4: Create CSS classes for dark & light modes
Step 5: Change background-color & text-color according to dark & light modes

Step 1: Set darkMode State

const [darkMode, setDarkMode] = React.useState(true)

darkMode will be set to intial true boolean value. This means that by default the site will be dark theme.

Step 2: Create toggleDarkMode function

function toggleDarkMode() {        setDarkMode(prevDarkMode => !prevDarkMode)    }

When toggleDarkMode is trigger, darkMode state will alternate between true and false.

Step 3: Trigger toggleDarkMode function

To trigger toggleDarkMode, you need to use onClick handler. This handler will be placed where the user clicks to toggle dark/light mode.

For this app, I will place the handler in the toggle icon inside Nav component.

Here's my set up for Nav.jsx with a simple h4 and toggle-icon image:

import React from "react";export default function Nav(props) {    return (        <nav             className="grid grid-cols-2 w-full place-content-between items-center"    >            <h4>Home</h4>            <img src="./src/assets/toggle-icon-dark.svg" />        </nav>    )}

It looks something like this on the server:

The idea is that when darkMode is set to true, the image will be toggle-icon-dark.svg. When darkMode is false, the image will be toggle-icon-light.svg.

Before changing the images, let's go back to App.jsx file and set up a few things.

Inside Nav element in App.jsx, add the keys darkMode & toggleDarkMode:

<Nav     darkMode={darkMode}     toggleDarkMode={toggleDarkMode} />

The first key will watch whether darkMode is true or not, while the second key will control the toggle.

When the toggle icon is clicked, darkMode will be set either true or false. True will render the page in dark theme and false will render the page in light theme.

In step 1, we've set the darkMode state in the parent file App.jsx. To pass it on to the child file Nav.js, we have to use props.

Heres the code to add in Nav.js:

import React from "react";export default function Nav(props) {    return (        <nav className="grid grid-cols-2 place-content-between items-center w-full">            <h4>home</h4>            <img onClick={props.toggleDarkMode}                  className="self-left justify-self-end"                  src="./src/assets/toggle-icon-light.svg" />        </nav>    )}

The handler onClick to trigger darkMode will live within the toggle icon img element.

To toggle images based on the dark/light mode, you can use the tenary operator:

src={props.darkMode ? "./src/assets/toggle-icon-dark.svg" : "./src/assets/toggle-icon-dark.svg"} 

Ternary operator is great when you need to choose between two options in React. When there is only one option (e.g. render something on the page), you can use && conditional rendering.

When props.darkMode is true, the icon image will be toggle-icon-dark.svg . If darkMode is false, it will set to toggle-icon-light.svg. As you click on toggle icon image, toggle-icon-dark.svg and toggle-icon-light.svg will alternate due to the state we have set early on.

Step 4: Create CSS classes for dark & light modes

So weve got the toggle working (toggle between true/false and icon image light/dark onClick). Though if you take a look at the server, everything will look the same except the toggle image. That's because we haven't actually change the background and text-color when the mode changes.

There are many ways to toggle dark/light background and text color in Tailwind. For this example, I will create dark & light classes in plain CSS.

Heres my code in CSS:

:root {  --clr-bg-dark: #1f2937; /* gray-800 */  --clr-bg-light: #e2e8f0; /* slate-200 */  --clr-text-dark: #e2e8f0; /* slate-200 */  --clr-text-light: #1e293b; /* slate-800 */}.dark {  background-color: var(--clr-bg-dark);  color: var(--clr-text-dark);}.light {  background-color: var(--clr-bg-light);  color: var(--clr-text-light);}

Step 5: Change background-color & text-color according to dark & light modes

Now you need to add dark/light classes depending the mode your site is on.

Return to App.jsx and add these lines of code inside the return:

...return (    <div className={`h-full w-full mx-auto py-2                     ${darkMode ? "dark" : "light"}`}    >    <Nav         darkMode={darkMode}         toggleDarkMode={toggleDarkMode}     />    </div>)

Again, you can use tenary function to toggle between two options. If darkMode is true, dark class will be added. Otherwise, light class will be added. dark and light classes will alternate based on the state of darkMode.

Example of Dark/Light Mode in a React site:

Is there any way of you know of to set up Dark/Light mode. Lets me know! You can find me here on Twitter at @naomipham_