CODEWITHSUNDEEP
material-designmaterial-components
Keir Finlow-Bates
Keir Finlow-Bates

Reputation: 1053

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?

Upvotes: 1

Views: 858

Answers (1)

Steven Tang
Steven Tang

Reputation: 964

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.

Upvotes: 3

Related Questions