Changing background colors for light and dark themes does not work

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

• 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',
});

[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.