Expenses Chart with editable data and dark mode using React

Hello Azhar.

Here's a component I've reused whenever I needed the functionality of toggling Dark/Light theme:

import React, { useState, useEffect } from 'react'

export default () => {
    
    const defaultTheme = "light"
    const altTheme = "dark"

    const getTheme = () => localStorage.getItem("theme")

    const [ theme, setTheme ] = useState(getTheme())
    
    const toggleTheme = () => {

        const theme = getTheme()

        let newTheme = theme !== defaultTheme ? defaultTheme : altTheme  
        if (!theme) newTheme = altTheme
        
        localStorage.setItem("theme", newTheme)

        setTheme(newTheme)

    }

    useEffect(() => {
        document.body.classList.remove(defaultTheme, altTheme)
        document.body.classList.add(theme || defaultTheme)
    })

    return (
        <div className="theme-toggler">
            <label htmlFor="theme">{theme || defaultTheme} mode</label>
            <input type="checkbox" id="theme" checked={theme === altTheme ? true : false} onChange={toggleTheme} />
        </div>
    )
}

You can always modify the JSX to your liking👌