ReactJS - Dark mode with Tailwind
Tags: react, programming, beginners, tutorial
Published: 2022-09-15 15:47:26

Nowadays most of the websites/apps has built in dark mode and its becoming one of the most important implementations in websites.

**But how can you implement it on our website?**
**First step:** If you already have your create-react-app installed you now need install tailwind in your project: 

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**Second step:** This step is more optional, but for simplicity of this tutorial I recommend installing DarkModeSwitch React library. This library already have build in component with cool animations and styling and its really easy to customize.

```
npm i react-toggle-dark-mode
```
or
{% embed https://www.npmjs.com/package/react-toggle-dark-mode %}

---

**Now lets create useDarkMode.js hook**

```
import {useEffect, useState} from "react"

export default function useDarkMode() {

    const [isDarkMode, setDarkMode] = useState(localStorage.theme)
    const colorTheme = isDarkMode === "dark" ? "light" : "dark"
    
    useEffect(()=> {
        document.documentElement.classList.remove(colorTheme)
        document.documentElement.classList.add(isDarkMode)

        localStorage.setItem("theme", isDarkMode)
    }, [isDarkMode, colorTheme])

    return [colorTheme, setDarkMode]
}
```

**So what exactly does it do?**
Basically, first state will have value that is inside our localstorage, so everytime we leave and comeback to page, we will have our prefered theme on.

**colorTheme** will contain value upon state of our isDarkMode state.

**useEffect()** hook allow us to run the code inside only when [colorTheme or setDarkMode change].

Now **inside our useEffect** hook we define color theme of our website. First line will remove class named upon our colorTheme state, if you remember this state will always contain opposite value of current theme (dark = light). So if we switch to dark theme, light theme will get removed and next line will add class from isDarkMode state, which is our "true" theme.

Then we just set our **localstorage** value.

At last we **return [colorTheme, setDarkMode]** so we can use the hook in different files. 

---

**Now lets make component DarkModeToggle.jsx**


This component will contain our darkmode toggle.

```
import React, { useState } from 'react'
import { DarkModeSwitch } from "react-toggle-dark-mode";
import useDarkMode from '../hooks/useDarkMode';

function DarkModeToggle() {

    const [colorTheme, setTheme] = useDarkMode();
    const [isDarkMode, setDarkMode] = useState( colorTheme === "light" ? true : false);

    const toggleDarkMode = (checked) => {
        setTheme(colorTheme)
        setDarkMode(checked);
    };


  return (
    <div>
        <DarkModeSwitch
        onChange={toggleDarkMode} 
        checked={isDarkMode}
        size={25}
        />
    </div>
  )
}

export default Switcher
```

We need to **initialize colorTheme** state that is inside our useDarkMode() hook, then state that will switch our theme.

Next **create function** that will receive variable checked value from our <DarkModeSwitch/> component (https://www.npmjs.com/package/react-toggle-dark-mode)

Now lets put our function inside <DarkModeSwitch/> as **onChange value**. 

---

**Now how we can implement Tailwind into this?**

Its simple! All you need is to set up class name as for example **"dark:bg-gray-900"**. Everytime you put **"dark:**" before class, this class will "activate" only if theme is set to dark.

Read more about it in Tailwind documentation: https://tailwindcss.com/docs/dark-mode