Skip to main content
react-md
react-md - Colors And Theming - Theme Builder

Configuration

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

Look at this

SCSS Usage
// Note: have to rename to color since react-md also exports these variables which causes an error
@use '@react-md/theme/dist/color-palette' as color;
@use 'react-md' as * with (
  $rmd-theme-light: true,
  $rmd-theme-primary: color.$rmd-teal-500,
  $rmd-theme-secondary: color.$rmd-pink-a-200,
  // other variable overrides
);

@include react-md-utils;
CDN Usage (jsDelivr)
     <meta
       name="description"
       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 https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      crossorigin
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@4.0.2/dist/css/react-md.teal-pink-200-light.min.css"
+    />