4

I would like to add a named color to my theme such as warn

import React from 'react'
import { MuiThemeProvider } from '@material-ui/core/styles'
import createMuiTheme from '@material-ui/core/styles/createMuiTheme'

const theme = createMuiTheme({
  palette: {
    primary: { main: '#30b5c8', warn: { main: '#000000' } },
    secondary: { main: '#fadc35' },
    warn: { main: '#ff9100', light: '#ffa733', dark: '#b26500' },
  },
})

export default ({ children }) => {
  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
}

However, the warn property of this object is ignored by material-ui. Is it possible to add this color/property?

Material-ui's palette once rendered

  {
    common: { black: '#000', white: '#fff' },
    type: 'light',
    primary: {
      light: '#7986cb',
      main: '#3f51b5',
      dark: '#303f9f',
      contrastText: '#fff'
    },
    secondary: {
      light: '#ff4081',
      main: '#f50057',
      dark: '#c51162',
      contrastText: '#fff'
    },
    error: {
      light: '#e57373',
      main: '#f44336',
      dark: '#d32f2f',
      contrastText: '#fff'
    },
    grey: {
      '50': '#fafafa',
      '100': '#f5f5f5',
      '200': '#eeeeee',
      '300': '#e0e0e0',
      '400': '#bdbdbd',
      '500': '#9e9e9e',
      '600': '#757575',
      '700': '#616161',
      '800': '#424242',
      '900': '#212121',
      A100: '#d5d5d5',
      A200: '#aaaaaa',
      A400: '#303030',
      A700: '#616161'
    },
    contrastThreshold: 3,
    getContrastText: [Function: getContrastText],
    augmentColor: [Function: augmentColor],
    tonalOffset: 0.2,
    text: {
      primary: 'rgba(0, 0, 0, 0.87)',
      secondary: 'rgba(0, 0, 0, 0.54)',
      disabled: 'rgba(0, 0, 0, 0.38)',
      hint: 'rgba(0, 0, 0, 0.38)'
    },
    divider: 'rgba(0, 0, 0, 0.12)',
    background: { paper: '#fff', default: '#fafafa' },
    action: {
      active: 'rgba(0, 0, 0, 0.54)',
      hover: 'rgba(0, 0, 0, 0.08)',
      hoverOpacity: 0.08,
      selected: 'rgba(0, 0, 0, 0.14)',
      disabled: 'rgba(0, 0, 0, 0.26)',
      disabledBackground: 'rgba(0, 0, 0, 0.12)'
    }
  }
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • I would suggest to look at this [answer](https://stackoverflow.com/questions/50069724/how-to-add-multiple-material-ui-palette-colors) – Davit Mkrtchyan Nov 05 '19 at 12:02
  • I do not see the same theme result as what you are showing (https://codesandbox.io/s/theme-palette-pm4hb). The palette you're showing doesn't even include your customizations to `primary` and `secondary`. You seem to be looking at the default theme rather than the theme created by your code. – Ryan Cogswell Nov 05 '19 at 16:03
  • Ah yes indeed Ryan. Very good point. I had not realised this. – Jamie Hutber Nov 05 '19 at 20:57

1 Answers1

1

You need the function createPalette, you can see the definition here. Sadly that function is not exposed, so, you had two ways to do what you want:

  1. Get out that function and use it.
  2. Make it the variants of colors with this website and with that result choose wisely every lighten and generate contrastText with the function getContrastRatio located in '@material-ui/core/styles'.
fractefactos
  • 353
  • 4
  • 10