Material-ui: Changing background colors for light and dark themes does not work

[nareshbhatia]

Setting palette.types.light.background.default and palette.types.dark.background.default has no effect on background colors.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Setting these palette values should change background colors appropriately.

Current Behavior

The supplied background color values are ignored. Background color toggles only between #fafafa and #303030 - the default values.

Steps to Reproduce (for bugs)

Create custom theme:

const palette = {
    types: {
        dark: {
            background: {
                default: "#000000"
            }
        },
        light: {
            background: {
                default: "#ffffff"
            }
        }
    }
};

const theme = createMuiTheme({ palette });

Use this theme to set body background:

const styles = theme => ({
    '@global': {
        ...
        body: {
            background: theme.palette.background.default,
            ...
        }
    }
});

This will have no effect on the body background because the palette values are ignored. Background color can only toggle between #fafafa and #303030 based on the value of theme.palette.type.

I am currently using the following workaround, but this seems completely unnecessary:

const styles = theme => ({
    '@global': {
        ...
        body: {
            background: (theme.palette.type === 'light')
                ? theme.palette.types.light.background.default
                : theme.palette.types.dark.background.default,
            ...
        }
    }
});

Context

The reason I want to change the default background colors is to be able to embed the react app in an iframe. The hosting page has a white background and the default of #fafafa is clashing with it.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.28 |
| React | 16.x |
| browser | N/A |
| etc | |

[mbrookes]

@nareshbhatia Could you follow the Material-UI docs pattern?

function getTheme(theme) {
  return createMuiTheme({
    palette: {
      type: theme.paletteType,
      background: {
        default: theme.paletteType === 'light' ? #000' : '#fff',
      },
    },
  });
}

const theme = getTheme({
  paletteType: 'light',
});

[nareshbhatia]

Works like a charm 👍. Thanks @mbrookes.

[MutableLoss]

I had this same issue, and found that passing the theme object was the issue. I can't remember where I saw the example, but somewhere it was showing to destructure the theme, which caused the theme not to be used at all.

Bad:

const AppTheme = {
  palette: {
     ...props
  }
}

const theme = createMuiTheme({ AppTheme })

Good:

const theme = createMuiTheme(AppTheme)

I do remember earlier in implementation receiving an error when passing the object directly like the Good example, but it was previous to adding the themeName and type to the theme.

From what I've seen when trying to remedy my issue previously that this seems to be a somewhat common issue, is there any reason not to add an error when the object is not being accepted (e.g. the Bad example)?

[oliviertassinari]

@3DEsprit We don't have any warning because your "Bad" example, while not delivering what you are expecting is valid. People can extend the theme as they wish.

[MutableLoss]

@oliviertassinari Thanks for the heads up!

Are there any examples of this usage somewhere? I didn't see anything with the muithemeprovider API docs. I will definitely check the source later tonight once I have some time, since that particular example I ran across gave me the wrong impression, and left me with a theme that was being unused.