# Theming Material Components Web in 3 minutes

As someone who's not too familiar with the front-end, I struggled to get basic themes working on Material Components Web. So to save you the trouble, here's what you need to do.

### Pre-requisites

You need Node.JS. We're going to assume that you have this already.

### Install sass

npm i -g sass

### Install components you need

Install into your project.

npm i --save @material/button
npm i --save @material/chips
npm i --save @material/radio
# etc.

### Create an .scss file

You can call it anything you want, say app-theme.scss. In this file, you will be able to customize Material Components by reassigning color/other variables.

This is how you do it:

@use "@material/theme" with (
  $primary: #689f38,
  $secondary: #e64a19,
  $on-primary: #fff,
  $on-secondary: #fff,
);

Below it (in the same scss file), add all the components you want to use:

@use "@material/shape";
@use "@material/button/mdc-button";
@use "@material/checkbox/mdc-checkbox";
@use "@material/chips/mdc-chips";
@use "@material/data-table/mdc-data-table";
@use "@material/drawer/mdc-drawer";
@use "@material/fab/mdc-fab";
@use "@material/form-field/mdc-form-field";

### Compile it

Include your node_modules directory with the -I option since that's where the material components have been installed. The following example assumes you're in the project's root directory, and you've installed @material/components as mentioned earlier.

sass path/to/app-theme.scss -I node_modules/ > path/to/output/theme.css

### That's it

Include output/theme.css in your html page.