Changing material-ui default theme in react

react
1

Following the meteor react teams examples, I was able to create my own project from scratch and get all the dependencies in place to use material-ui package for my react front end.

var ThemeManager = new mui.Styles.ThemeManager();

is a necessary line of code. According to the material-ui website, something like:

ThemeManager.setTheme(ThemeManager.types.DARK);

should change the default light theme to the only other predefined theme in mui, “dark”.

However, it doesn’t work. Am I missing something??

2

It would help a lot of you could link to a git repo of a whole app, or try this approach on one of the official meteor react examples that use material ui and demonstrate that it doesn’t work.

3

No worries that line of code does work.

4

Is there a away to have custom color of theme?

5

Yes. Check here for more information on that. http://material-ui.com/#/customization/themes

I haven’t tried a fully customized color theme myself, but the instructions seem pretty straight forward. You can just look in the repo on github for the light or dark theme files (which are the two defaults), copy the file and then just replace all the options with your own choices of color.

Let me know if you take this on and get it to work in Meteor.

6

@uberom Thank you :slight_smile: There is an option setPalette to the Theme which set the color palette to the theme. I changed only Primary and accent colors from the Palette and rest are left default. Its working great. :slight_smile:

7

where exactly did you set it?
And some code would be nice

thx :smiley:

8

file: client/app.jsx

appPalette = {
primary1Color: “#1690DB”,
primary2Color: “#2173B3”,
primary3Color: “#A9D2EB”,
accent1Color: “#ED3B3B”,
accent2Color: “#ED2B2B”,
accent3Color: “#F58C8C”

// rest of the palette is set from Theme Manager
}

var ThemeManager = new MUI.Styles.ThemeManager();
ThemeManager.setTheme(ThemeManager.types.LIGHT);
ThemeManager.setPalette(appPalette);

9

I’m wondering if you even need to set the theme to LIGHT at all. That should be the default theme already set whenever you instantiate a new ThemeManager. Have you tried taking that line of code out?

Thanks for the code snippet!

10

@uberom
In the above code snippet, I am setting only Palette instead of whole Theme, which overrides whatever colors are set in palette and for the rest it takes for the theme.

Ok, LIGHT is a default theme so here we don’t need that line of code. But I mentioned it for general purpose if someone wants to use any other theme.

Thanks :smile:

11

Hello, this code works great but where is the logical location to call the setPalette / setTheme function? getChildContext? I am still very new to React. Thanks!

12

@oh3netid just like @uberom said.
and you can passe it in getChildContext. her is an example

getChildContext(){
appPalette = {
primary1Color: “#e67e22”,
primary2Color: “#e67e22”,
primary3Color: “#A9D2EB”,
accent1Color: “#ED3B3B”,
accent2Color: “#ED2B2B”,
accent3Color: “#F58C8C”,
canvasColor: mui.Styles.Colors.redA100,

  // rest of the palette is set from Theme Manager
};
var ThemeManager = mui.Styles.ThemeManager;
var Theme = ThemeManager.getMuiTheme(mui.Styles.LightRawTheme);
var newTheme = ThemeManager.modifyRawThemePalette(Theme,appPalette);

return {
  muiTheme : newTheme
}

}

13

I’m using the Callemall dependency. I am wondering how I can change the AppBar color and height. Is this possible by using inline styles to override the theme variables? Do I need to specify my own raw theme in a separate file?

This is my header.jsx:

injectTapEventPlugin();
var { AppBar } = MUI;
var { ThemeManager, LightRawTheme } = Styles;

Header = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.object
},

getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme(LightRawTheme);
};
},

render: function () {
return (
<AppCanvas>
<AppBar iconElementLeft=
{ <div className="header-left-area">
<FloatingActionButton
title="Register"
iconClassName="muidocs-icon-action-grade"
secondary={true}
mini={true}/>
</div> }
</AppCanvas>
);
}
});
14

@mdeacey The Material UI website recommends doing it like this:

    componentWillMount () {
        let newMuiTheme = this.state.muiTheme;
        newMuiTheme.appBar.color = Styles.Colors.deepPurpleA700;
        newMuiTheme.appBar.height = 150;
        this.setState({
            muiTheme: newMuiTheme,
        });
    },
    getChildContext () {
        return {
            muiTheme: this.state.muiTheme,
        };
    },
    contextTypes: {
        muiTheme: React.PropTypes.object,
    },
    childContextTypes : {
        muiTheme: React.PropTypes.object,
    },
    getInitialState () {
        return {
            muiTheme: this.context.muiTheme,
        };
    },
15

what do your imports look like?

where is the MUI object coming from?