Having a couple of backgrounds in a theme

Asked Apr 08 '20 at 12:16

Active Apr 08 '20 at 15:17

Viewed 54 times

Let's say that my light theme has 2 different background (f.e. bg1, bg2). When I switch to a dark theme I want to apply new colors for those bg's. Is there any way how can I do that?

The problem is that in the default theme bg is #fafafa, and paper is white. I want to have the default bg white, and apply #fafafa as a background color only when I use paper. Now I have to hardcode #fafafa in every child component that uses paper. I want to get a custom color from theme, f.e theme.palette.mybg

const themeLight = createMuiTheme({
  palette: {
    background: {
      default: 'white',
    },
  },
});

edited Apr 08 '20 at 15:17

Ryan Cogswell

75,046
9
218
198

asked Apr 08 '20 at 12:16

Petr Schukin

You can put as much extra stuff in the theme as you want. – Ryan Cogswell Apr 08 '20 at 15:07
Does this answer your question? [Add custom theme variable object to createMuiTheme()](https://stackoverflow.com/questions/58168798/add-custom-theme-variable-object-to-createmuitheme) – Ryan Cogswell Apr 08 '20 at 15:17
I tried, but I got "**** does not exist in type 'ThemeOptions'" – Petr Schukin Apr 08 '20 at 17:36
See https://material-ui.com/guides/typescript/#customization-of-theme – Ryan Cogswell Apr 08 '20 at 17:41
Another related question: https://stackoverflow.com/questions/61120760/how-to-extend-material-ui-theme-with-typescript – Ryan Cogswell Apr 09 '20 at 13:39
1

@RyanCogswell Thanks a million! – Petr Schukin Apr 09 '20 at 19:07

Having a couple of backgrounds in a theme

0 Answers0