Skip to main content
Colors And Theming - Theme Builder


Primary colorteal (site default)
Secondary colorpink (site default)
Accent hue200 (site default)
Compliance Levellarge (3:1)
Theme Preview

Look at this

# SCSS Usage
12345678@import '~@react-md/theme/dist/color-palette';

$rmd-theme-primary: $rmd-teal-500;
$rmd-theme-secondary: $rmd-pink-a-200;
// other variable overrides

@import '~react-md/dist/react-md';
@include react-md-utils;
# Pre-compiled Usage
1234567+import "react-md/dist/css/react-md.teal-pink-200-light.min.css";
 import React from "react";
 import { render } from "react-dom";

 import App from "./App";

 render(<App />, document.getElementById("root"));
# CDN Usage (
1234567891011     <meta
       content="Web site created using create-react-app"
     <link rel="apple-touch-icon" href="logo192.png" />
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="" />