CODEWITHSUNDEEP
reactjsmaterial-ui
benn98
benn98

Reputation: 125

Material ui custom theme implementation

how can I implement custom theme in material-ui next? I read the documentation but I really diden't understand it

Upvotes: 0

Views: 1627

Answers (1)

richbai90
richbai90

Reputation: 5204

It's pretty straight forward here's an example

// First we need the theme provider and the theme creator
import {createMuiTheme, MuiThemeProvider} from 'material-ui/styles';

// For this example I'll also be using the amber and blue color profiles
import amber from 'material-ui/colors/amber';
import blue from 'material-ui/colors/blue';

// Now let us create our theme

const theme = createMuiTheme({
    palette: {
        type: 'dark',
        primary: amber,
        secondary: {
            ...blue // I'm using the spread operator because I want to overwrite some colors
            A400: '#A7FFEB' // Overwrite the accent 400 color with custom
        }
    }
});

// Let my components know about the theme

ReactDOM.render(
    <MuiThemeProvider theme={theme}>
        <App/>
    </MuiThemeProvider>
)

This is about as simple as it gets but it gets the point across. The color profiles provided by material-ui are objects that look like this:

{
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  A100: string;
  A200: string;
  A400: string;
  A700: string;
  contrastDefaultColor: 'light' | 'dark';
}

So if you wanted to make your own, you could very easily by creating an object that follows the interface above. The theme provider accepts a primary palette, a secondary palette, and an error palette. It decides internally which colors to use of that palette depending on how you configure your components.

There are a ton of other options that you could set, and the full documentation is here

Here is a custom script I developed to help build a custom theme if it's helpful

import tinycolor from 'tinycolor2'



function buildPaletteFrom(color, accent) {
    accent = accent || color;
    color = tinycolor(color).darken(25);

    let i = 1;
    let palette = {};
    while (i < 10) {
        color = color.lighten(5);
        palette[(10 - i) * 100] = color.toHexString();
        i++;
    }

    palette['50'] = tinycolor(palette['100']).lighten(5);
    palette['contrastDefaultColor'] = tinycolor(palette['500']).isLight() ? dark : light;

    palette['A100'] = tinycolor(accent).lighten(20).saturate().brighten().toHexString();
    palette['A200'] = tinycolor(accent).lighten(15).saturate().brighten().toHexString();
    palette['A400'] = tinycolor(accent).toHexString();
    palette['A700'] = tinycolor(accent).darken(10).saturate().brighten().toHexString();

    if (palette['A400'] === palette['500']) {
        palette['A400'] = tinycolor(palette['500']).lighten(5).saturate().brighten().toHexString();
    }

    return palette
}

You can use it like this

const primary = '#56B9D0';
const secondary = '#F24C27';
const accent = '#F8BA42';
const light = '#FEFEFE';
const dark = '#3B3F42';


const theme = createMuiTheme({
    palette: {
        primary: buildPaletteFrom(primary),
        secondary: buildPaletteFrom(secondary, accent),
        light: buildPaletteFrom(light),
        dark: buildPaletteFrom(dark),
        common: {
            white: light,
            black: dark,
        }
    }
});

Upvotes: 4

Related Questions