How can I change the buttons displayed based on theme in Material UI?-CodePudding

I am displaying a SettingsIcon to toggle between light and dark modes. But I want to display the DarkModeIcon to change from light to dark and LightModeIcon to change from dark to light.

These are the themes I've used for light and dark mode. I'm not sure where to include the functionality to include a specific button in a specific mode.

const themeLight = createTheme({
  palette: {
    background: {
      default: "#FFFFFF"
      
    },
    text: {
        primary: "#000000"
      },
      mode:"light"
  },
  typography: {
    body1: {
      fontWeight: 600 ,
     fontSize: 20,
    },
    body2:
    {
        fontWeight: 500,
        fontSize: 20,
    }
    ,
    body3:
    {
        fontWeight: 700,
        fontSize: 30,
    }
},


});

const themeDark = createTheme({
  palette: {
    background: {
      default: "#000000"
    },
    text: {
      primary: "#ffffff"
    },
    mode:'dark',
  },
  
 
  typography: {
    body1: {
      fontWeight: 600 ,
     fontSize: 20,
     
    },
    body2:
    {
        fontWeight: 500,
        fontSize: 20,
    },
    body3:
    {
        fontWeight: 700,
        fontSize: 30,
    }
    
},
 
 
  
});





 <Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}><SettingsIcon/></Button>

Any help is appreciated.

CodePudding user response：

You have to wrap your App.js in ThemeProvider you can see the example at this link and then you can make a condition on toggle base like:

<ThemeProvider theme={light ? themeLight : themeDark}>
  <App />
</ThemeProvider>

or you can also do like this:

import React, {useState} from 'react';
import {ThemeProvider} from '@mui/material/style'

const App = () => {
const [light, setLight] = useState(true);
const themeLight = createTheme({
  palette: {
    background: {
      default: "#FFFFFF"
      
    },
    text: {
        primary: "#000000"
      },
      mode:"light"
  },
  typography: {
    body1: {
      fontWeight: 600 ,
     fontSize: 20,
    },
    body2:
    {
        fontWeight: 500,
        fontSize: 20,
    }
    ,
    body3:
    {
        fontWeight: 700,
        fontSize: 30,
    }
},


});

const themeDark = createTheme({
  palette: {
    background: {
      default: "#000000"
    },
    text: {
      primary: "#ffffff"
    },
    mode:'dark',
  },
  
 
  typography: {
    body1: {
      fontWeight: 600 ,
     fontSize: 20,
     
    },
    body2:
    {
        fontWeight: 500,
        fontSize: 20,
    },
    body3:
    {
        fontWeight: 700,
        fontSize: 30,
    }
    
},
 
 
  
});

return (
  <ThemeProvider theme={light ? themeLight : themeDark}>
     <Button onClick={() => setLight(!light)} variant="contained" color="primary" sx={{ height: 40 }}><SettingsIcon/></Button>
  </ThemeProvider>
)
}

I hope this code would be helpful. :)

CodePudding user response：

If you are looking for a changing Icon: You need to set your theme provider in higher level or in a separate component; then get access to it by useTheme hook:

import { useTheme } from "@mui/material/styles";

Inside the function:

  const theme = useTheme();

And in your jsx use the conditional ternary operator to choose the Icon that you wish.

      <Button
        onClick={() => setLight((prev) => !prev)}
        variant="contained"
        color="primary"
        sx={{ height: 40 }}
      >
        {theme.palette.mode === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
      </Button>