How can i change the state for my toggle button to change to dark mode?

Question

Ive downloaded a DarkModeToggle npm for my react app however I am a bit confused as to actually add the functionallity. Currently the button lets me click it on the appbar and the button itself changes however the state of my app does not.

 import React, { useState, useEffect } from "react"; import { Container, AppBar, Typography, Grow, Grid } from "@material-ui/core"; import { useDispatch } from "react-redux"; import DarkModeToggle from "react-dark-mode-toggle"; // import { getPosts } from './actions/posts' import Posts from "./components/Posts/Posts"; import Form from "./components/Form/Form"; import wisp_logo from "./images/wisp_logo.png"; import useStyles from "./styles"; const App = () => { const [currentId, setCurrentId] = useState(); const classes = useStyles(); const dispatch = useDispatch(); const [isDarkMode, setIsDarkMode] = useState(() => false); return ( <Container maxwidth="lg"> <AppBar className={classes.appBar} position="static" color="inherit"> <DarkModeToggle onChange={setIsDarkMode} checked={isDarkMode} size={80} /> </AppBar> </Container> ); }; export default App;

Answer 1

I believe there are 2 things to change:

The first one is that "isDarkMode" is a boolean, and inside the useState you're using a function, so must be like this:

const [isDarkMode, setIsDarkMode] = useState(false);

Also, when sending the "setIsDarkMode" function you need to update your state, like this:

<DarkModeToggle
    onChange={() => setIsDarkMode(prevState => !prevState)}
    checked={isDarkMode}
    size={80}
/>

So "onChange" is now a function that is going to update the state on every click

Answer 2

If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application. Here's a simple example:

Custom variables:

const darkTheme = createTheme({
  palette: {
    type: "dark"
  }
});

Use the ThemeProvider component:

<ThemeProvider theme={darkTheme}>
        <AppBar
          position="static"
          color={`${isDarkMode ? "default" : "primary"}`}
        >
          <DarkModeToggle
            onChange={setIsDarkMode}
            checked={isDarkMode}
            size={80}
          />
        </AppBar>
      </ThemeProvider>

Using a ternary to change the theme:

color={`${isDarkMode ? "default" : "primary"}`}

Exemplo completo aqui: https://codesandbox.io/s/holy-wood-cdgpks?file=/src/App.js