How to apply custom theme in material ui

You should first import your color from 'material-ui/styles/colors'and then use them in palette object like this :

import React, { Component } from 'react';import {render} from 'react-dom';import {indigo500, indigo700, redA200} from 'material-ui/styles/colors';import getMuiTheme from 'material-ui/styles/getMuiTheme';import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';import injectTapEventPlugin from 'react-tap-event-plugin';injectTapEventPlugin();import Main from './Main';const muiTheme = getMuiTheme({    palette: {        primary1Color: indigo500,        primary2Color: indigo700,        accent1Color: redA200,        pickerHeaderColor: indigo500,    },});class App extends Component {    render() {        return (            <div>                <MuiThemeProvider muiTheme={muiTheme}>                    <Main />                </MuiThemeProvider>            </div>        );    }}render(<App/>, document.getElementById('app')); //you should be having a div with an id of app in your index.html file

and the Main.js file is

import React, { Component } from 'react';import FloatingActionButton from 'material-ui/FloatingActionButton';export default class Main extends Component {    render() {        return (            <div>                <AppBar title="Title"/>                <FloatingActionButton secondary={true} />            </div>        );    }}

For me it worked with:

import React, {Component} from 'react';import {createMuiTheme} from '@material-ui/core/styles';import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';const theme = createMuiTheme({    palette: {        primary: {            main: '#0b5994',        },        secondary: {            main: '#1d83c6',        },    },});class App extends Component {    render() {        return (            <div className="App">                <MuiThemeProvider theme={theme}>                    /* content here! */                </MuiThemeProvider>            </div>        );    }}export default App;

I am pretty sure you need to have

static childContextTypes = {  muiTheme: React.PropTypes.object,};

before your

getChildContext()

method. Once that is done you should be able to remove any theme related stuff from componentWillMount()

Now, this won't work for base text. But I can confirm that the theme is being applied. I tested it by adding an appBar component and changing the color in your theme.js file. I also added a List with ListItems and that text style is what you are looking for.

Here is a link to the gist of your modified App.jsx file.

Also, as a side note in you server.js you have a small typo on line 5 you should have

new webpackDevServer(webpack(config), {

not

new WebpackDevServer(webpack(config), {