Theme Builder

Theme Configuration

When the save for future visits checkbox is checked, cookies will be created to store your theme for later visits and other pages. If you do not check this checkbox, the default theme will be applied when you leave this page.

Select a primary color, a secondary color, the secondary color's hue, and optionally toggle the light theme to view a specific theme. When you have selected colors you like, either reference Using with Sass or pre-compiled themes. Not all themes will already be compiled and hosted on unpkg.

Theme Preview

Look at this

@import '~react-md/src/scss/react-md';

$md-light-theme: true; // optional for light theme
$md-primary-color: $md-light-blue-500;
$md-secondary-color: $md-deep-orange-a-200;

@include react-md-everything;

// Or for a subsection
@include react-md-theme-everything($md-light-blue-500, $md-deep-orange-a-200, $md-light-theme, 'custom-theme');
Sass (Scss)

This current theme is unavailable as a precomiled package. Only accents of 400 and the light-theme have been precompiled.