Search code examples
material-designmaterial-components

How do I build my own material-components-web.min.css?

I've been using material-components-web.min.css to style a Flask app in an MDC web manner. I could go through and edit the colors that I want by hand, but is there a simple method and framework that would allow me to define my own color palette, and then build a material-components-web.min.css with that?

Solution

  • MDC makes it easy to customize colors. You override the default theme color through Sass variables or CSS custom properties. CSS custom properties enables runtime theming.

    CSS Custom Properties

    :root {
  --mdc-theme-secondary: #018786;
  --mdc-theme-secondary-light: #02cecc;
  --mdc-theme-secondary-dark: #004040;
  --mdc-theme-background: #fff;
}

    SASS

    First install the @material/theme package with npm

    npm install --save @material/theme

    Then create a sass file like this to modify the palette:

    $mdc-theme-primary: #9c27b0; 
$mdc-theme-secondary: #ffab40;
$mdc-theme-background: #fff;

@import "@material/theme/mdc-theme";

    Compile the sass file, the outputted CSS file contains all of the rules that will override the default palette. Make sure to link this CSS file in your HTML.

    Documentation: https://material.io/components/web/catalog/theme/

    If you have any other problems or questions, leave a comment.