Primary color does not match the theme

Looking at the default theme I would Based on the demos I expect the button background color to be #2196f3 but it’s actually #3f51b5. Possibly the demo page is just using a different demo theme and I’m not understanding how to extend the existing light theme.

Ultimately I want to be able to override the default theme to provide a new primary and accent color. I in the past I’ve used the pre 1.0 steps. Now it is unclear to me from the docks how to do this without providing an entire new theme. That’s a lot when I just want to override a few variables.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Primary theme color should be used

Current Behavior

After files are processed through webpack from create-react-app setup (not ejected) the background color for appbar and button is #3f51b5

Steps to Reproduce (for bugs)

https://codesandbox.io/s/612mpxw7kn

1. Add a button as follows

<Button raised color="primary">
  Default
</Button>
``

## Context
Ultimately I want to be able to override the default theme to provide a new primary and accent color. I in the past I've used the [pre 1.0 steps](http://www.material-ui.com/#/customization/themes). Now it is unclear to me from the docks how to do this without providing an entire new theme. That a lot when I just want to override a few variables.

## Your Environment
App was created from `create-react-app 1.4.3`

```package.json
{
  "dependencies": {
    "material-ui": "^1.0.0-beta.27",
    "material-ui-icons": "^1.0.0-beta.17",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "typeface-roboto": "0.0.50"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json,css}": [
      "prettier --single-quote --no-semi --trailing-comma all --jsx-bracket-same-line --write",
      "git add"
    ]
  },
  "scripts": {
    "precommit": "lint-staged",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "lint-staged": "^6.0.0",
    "prettier": "^1.9.2"
  }
}

[ralphsmith80]

Thanks guys! You pointed out a major missing expectation. The demo page does not represent the default theme. Not sure if there are plans to align that when 1.0 is out of beta, but I think it would be a good idea so the demo represents what you get out of the box.

Also another point of confusion is around the palette example. Overriding A400 has no effect in the example as the accent color being used is A200. While I understand accent colors are prefixed with A it’s not clear which variant (100-700) is used for what state (active, hover, focused, etc…).

I don’t know if it’s worth filing a different issue for that or not.

[yihangho]

I agree that option 5 is good enough. However, I think it will also be very helpful if the documentation pointed out that it is not using the default palette, hence differences should be expected. The reason is that it is possible that someone (like myself) was wondering if it is caused by some kind of misconfigurations (e.g., missing stylesheets, etc).