CODEWITHSUNDEEP
reactjsmaterial-ui
Andrea D_
Andrea D_

Reputation: 2141

How to Swap 2 different background colours for the Paper component between dark and light theme in material UI?

I am using Material UI and I implemented a button in the navbar that changes the theme from light to dark:

 const [darkMode, setDarkMode] = useState();
 function changeTheme() {
    setDarkMode(!darkMode);
  }
 return <Navbar changeTheme={changeTheme} darkMode={darkMode} />

It works fine and it changes the colors according to the default light and dark theme. Now I need give to the Paper MUI component 2 different background colours for each theme. To be more specific: the app has 2 Paper components, and in the light theme I need to give to the first Paper a red background and to the second paper I need to give a green background, while for the dark theme I need to swap the colors from red to blue and from green to yellow. How can I achieve that when I can only give 1 background color to the all papers for each theme?

Dark theme:

  const darkTheme = createMuiTheme({
    palette: {
      type: 'dark',
      background: {
        paper: '#FF0000',
      },
    },

Light Theme:

  const lightTheme = createMuiTheme({
    palette: {
      type: 'light',
      background: {
        paper: '#0000ff',
    },
  }

Upvotes: 0

Views: 1052

Answers (1)

krpecd
krpecd

Reputation: 43

The MaterialUI Paper component uses only one background color. The proper way is to use custom Paper component, which solves that for you.

import { Paper as MaterialUIPaper, useTheme } from '@material-ui/Paper'

const Paper = ({variant, ...rest}) => {
  const theme = useTheme();
  
  let backgroundColor
  if (theme.mode === 'light') {
    if (variant === 'primary') backgroundColor = 'primaryLight'
    if (variant === 'secondary') backgroundColor = 'secondaryLight'
  }
  if (theme.mode === 'dark') {
    if (variant === 'primary') backgroundColor = 'primaryDark'
    if (variant === 'secondary') backgroundColor = 'secondaryDark'
  }

  return <MaterialUIPaper style={{backgroundColor}} {...rest} />
}

This is just a simple example using inline CSS. You can use more advanced solution based on the custom styling documentation Customizing components

Upvotes: 0

Related Questions