ReactJS - Dark mode with Tailwind

Robert — Thu, 15 Sep 2022 15:47:26 +0000

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

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

Crypto App built with ReactJS, Tailwind and Firebase

Robert — Thu, 15 Sep 2022 14:39:38 +0000

So today I finished my solo project Crypto app!

Here is live website deployed on firebase: https://coinbase-52f8f.web.app

Source

Github: https://github.com/robo311/crypto-app

What functionality does it offer?

Functional Register/Login page using Firebase database.
Website shows most popular crypto currencies and trending currencies via Coingecko API.
As mentioned above website using Coingecko API.
User can select certain coins and add them to their watchlist.
Each coin has designated page with informations/prices/changes.
Dark Mode / Light Mode.

Technologies used

ReactJS
Tailwind
Firebase/Firestore
Axios (for API)
HTML
CSS

Author

GitHub: https://github.com/robo311
Discord: @gatti#7613
Dev.to:

RobertFollow

Hi, I'm Robert or Gatti and I'm a starting front-end developer.

Screenshot of website

Additional info

Website is fully responsive (using Tailwind).
Mobile website using hamburger menu. (Fully working)

DEV Community: Robert

ReactJS - Dark mode with Tailwind

react-toggle-dark-mode - npm

Crypto App built with ReactJS, Tailwind and Firebase

RobertFollow