Access value of useState in theme

Question

I am building a React NextJS application with MaterialUI. I have a header component with a switch that I basically want to use to toggle between dark and light mode in my theme file (separate file). Basically, my question is how it is possible for me to basically get the value of the useState that I use on the Switch in my Theme file to change between dark and light mode. Thank you! ~Max

Edit 2: Example on stackblitz https://stackblitz.com/edit/react-ts-hmqdnk?file=NavBar.tsx

Answer 1

You could create a function that returns dark or light theme depending on the function parameter that would be the value of the Switch component.

const getTheme = (light) => {
    let lightTheme = {
        palette: {
            type: 'light',
        }
    }

    let darkTheme = {
        palette: {
            type: 'dark',
        }
    }
    
    return createMuiTheme(light ? lightTheme : darkTheme)
}