Material-ui: [AppBar] Custom Colors for palette not allowed in AppBar

[tazbill]

Is there something I have to do in order to use custom hex colors in a theme?

Currently, I've only noticed an issue with AppBar, so I'm restricting the issue to that component.

We have a client with a logo with specific hex colors.
I defined my palette/theme as follows:

const muiTheme = createMuiTheme({
    palette: createPalette({
      primary: '#142348',
      accent: '#52AB3D',
      error: red,
      type: 'light'
    }),
    appBar: {
        background: '#142348'
    }
});

The error I receive is:

Uncaught TypeError: Cannot read property 'charAt' of undefined
    at decomposeColor (colorManipulator.js:106)
    at getLuminance (colorManipulator.js:147)
    at getContrastRatio (colorManipulator.js:130)
    at Object.getContrastText (palette.js:65)
    at AppBar.js:79
    at createRules (styleSheet.js:26)
    at renderNew (styleManager.js:127)
    at Object.render (styleManager.js:87)
    at AppBar.render (AppBar.js:108)
    at ReactCompositeComponent.js:796

The core of the issue is in the AppBar component:

var styleSheet = exports.styleSheet = (0, _jssThemeReactor.createStyleSheet)('MuiAppBar', function (theme) {
  return {
 [ ... ]
    primary: {
      backgroundColor: theme.palette.primary[500],
      color: theme.palette.getContrastText(theme.palette.primary[500])
    }
 [ ... ]
});

theme.palette.primary' has the run-time value '#142348', buttheme.palette.primary[500]has the valueundefined`

Versions

• Material-UI: 1.0.0-alpha.12
• React: 15.5.4
• Browser: Chrome

[tazbill]

Closing this issue as I was able to create a perfectly acceptable work around with a custom color object.

[superpam33]

Hi Tazbill, can you share what your workaround was? I have the same problem currently.

[tazbill]

Absolutely.

1. Create your colors. I put mine in my shared components folder /components/Styles/colors.js

export const Idea42_Green = {
    '50': '#9ed790',
    '100': '#8dd17d',
    '200': '#7dca6a',
    '300': '#6cc358',
    '400': '#5cbd45',
    '500': '#52AB3D',
    '600': '#499836',
    '700': '#408530',
    '800': '#377329',
    '900': '#2e6022',
    'A100': '#aedea3',
    'A200': '#bfe5b6',
    'A400': '#cfecc8',
    'A700': '#254d1b',
  contrastDefaultColor: 'light',
}

Make sure you include all of the values in one of the provided colors

1. Import it as you would any other component:
   import {Idea42_Green} from '../../components/Styles/colors'
   note: I'm using { } because I have multiple colors in my colors.js file, if only using the default export, do not use the braces.

2. Use as needed in place of the system colors:

const muiTheme = createMuiTheme({
    palette: createPalette({
      primary: Idea42_Green,
      accent: Idea42_Blue,
      error: red,
      type: 'light'
    })
});

[superpam33]

Thank you Tazbill! It is working now with your recommendation. I am so happy! You are life saver!
One more question: how do you call the components of the Idea42_Green, for example item '900': '#2e6022' ?

[tazbill]

When you create your stylesheet, you reference them there.

const styleSheet = createStyleSheet('Idea42_mainPage', (theme) => ({
    highlight: (
        theme.palette.type === 'light' 
        ? {
            color: theme.palette.accent[800],
            backgroundColor: theme.palette.accent[50],
            } 
        : {
                color: theme.palette.accent[50],
                backgroundColor: theme.palette.accent[800],
            }
    ),
}

[pencilcheck]

createStyleSheet is not there anymore in latest code, how do you propose to fix this?

[UchihaVeha]

You can use plain function:

const styles = theme => ({
  root: {
    padding: `${theme.spacing.unit * 3}px`
  }
});

export default withStyles(styles, { name: 'MyComponent' })(MyComponent)