custom dark light theme switch system for react app build with material ui design

themeProvider.js

import * as React from 'react';
import { ThemeProvider } from '@emotion/react';
import ThemeContext from './ThemeContext'
import { LOCAL_STORAGE_KEY, DARK_THEME, LIGHT_THEME } from "./Theme";

function ThemeHandler(props) {

    const [isDark, setDark] = React.useState(localStorage.getItem(LOCAL_STORAGE_KEY) === 'true');

    const ctxValue = {
        isDark: isDark,
        toggleTheme: toggleTheme
    }

    function toggleTheme (){
        setDark(!isDark)
        localStorage.setItem(LOCAL_STORAGE_KEY, !isDark);
    }

    function getTheme(){
        if(isDark){
            return DARK_THEME;
        } else {
            return LIGHT_THEME;
        }
    }

    return (
        <ThemeContext.Provider value={ctxValue}>
            <ThemeProvider theme={getTheme}>
                {props.children}
            </ThemeProvider>
        </ThemeContext.Provider>
    )
}

export default ThemeHandler;