Comparing light and dark themes

The color palette of a theme takes a type property value that can be either light or dark. By default, themes are light. Changing the theme to dark does not change the other palette values of your theme (primary, secondary, error).

How to do it...

Let's create a dark theme and a light theme. Both themes will use the same color values for the intentions (primary, secondary, error). The example will use a Storybook control to change themes:

Here's the source that uses this value to choose between a light and dark theme and apply it to the Material-UI components:

import React, { Fragment } from 'react';

import {
  withStyles,
  createMuiTheme,
  MuiThemeProvider
} from '@material...