ReactJS - Dark mode with Tailwind

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

react-toggle-dark-mode - npm

Animated dark mode toggle as seen in blogs!. Latest version: 1.1.0, last published: 3 months ago. Start using react-toggle-dark-mode in your project by running `npm i react-toggle-dark-mode`. There are 2 other projects in the npm registry using react-toggle-dark-mode.

npmjs.com

---

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 component (https://www.npmjs.com/package/react-toggle-dark-mode)

Now lets put our function inside 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