Theming

To take advantage of theming, you must be using scss.

Firstly import the required functions and mixins into your scss file.

@import '~@material-design/core/theme';

Then to create a theme, you must choose two palettes and assemble them into a theme. Below is an example using blue as the primary palette, and red as the accent palette.

$app-primary: umd-palette(blue);
$app-accent: umd-palette(red);
$app-theme: light-theme($app-primary, $app-accent);

@include material-theme($app-theme);

You can also use the dark theme by replacing light-theme above with dark-theme, e.g.

$app-primary: umd-palette(blue);
$app-accent: umd-palette(red);
$app-theme: dark-theme($app-primary, $app-accent);

@include material-theme($app-theme);

Color Palettes

The available color palettes can be found in the material design guidelines.

To use them in your app, take the palette name, lowercase it and replace any spaces with -.

For example

Red => red
Light Blue => light-blue

Custom Palette

If you would like to use a palette not provided by material, for custom branding for example, you can easily create one like so:

$my-brand-palette: (
    50: #FFEBEE dark, // dark means any text used on top of this colour should be dark
    100: #FFCDD2 dark,
    200: #EF9A9A dark,
    300: #E57373 dark,
    400: #EF5350 light,  // light means any text used on top of this colour should be light
    500: #F44336 light,
    600: #E53935 light,
    700: #D32F2F light,
    800: #C62828 light,
    900: #B71C1C light,
    A100: #FF8A80 dark,
    A200: #FF5252 light,
    A400: #FF1744 light,
    A700: #D50000 light,
}