22

Details

I went looking into Material Components (MDC) for Web and landed to using CDN (hosted CSS and JavaScript libraries):

  • https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
  • https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

This is by virtue from their getting-started-docs-page in [1]. Similarly, MDC has this predecessor-slash-lighter-library Material Design Lite (MDL) which you could easily customize the theme colors. It can be done through its custom CSS theme builder. [2]

However, according to MDC Web's Theming Guide: [3]

... At the moment, MDC Web supports theming with Sass and with CSS Custom Property, with plans for CDN support as well, once that service is available.

It turns out, modifying the theme colors through the MDC's CDN URL is currently not an option.

So again back to my question, how could one set the primary and secondary colors in the new MDC for Web using the CDN?

References

  1. Getting started, Material Components for the Web
  2. Custom CSS theme builder, Material Design Lite
  3. Theming guide, Material Components for the Web
Abel Callejo
  • 13,779
  • 10
  • 69
  • 84

2 Answers2

26

If you're using MDC Web's CSS from CDN, you can modify a theme using CSS custom properties (variables) like this:

/* my-style.css */

:root {
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
}

The full list of CSS custom properties for MDC Theme is here. For instance, here how you can modify text color on top of a primary/secondary backgrounds:

/* my-style.css */

:root {
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
}

Note that this CSS should come after importing the MDC Web's CSS file, e.g.:

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="my-style.css">

MDL theme customizer you've mentioned has nothing to do with MDC Web. MDL is an MDC Web's predecessor which is deprecated in favor of MDC Web.

Rustem Gareev
  • 804
  • 1
  • 7
  • 14
  • As it turns out, this is the only viable solution. However, its **CSS custom properties** works well only with the background colors. Hacky tweaks are still needed for the text colors. – Abel Callejo Sep 19 '18 at 02:29
  • Here is an example of a hacky tweak I mentioned: `` `` `` `` – Abel Callejo Sep 19 '18 at 02:47
  • To change color on primary, you can set `--mdc-theme-on-primary: #fff;` variable via CSS custom properties, without hacks. I will add it to the answer. – Rustem Gareev Sep 19 '18 at 04:37
  • Not always the case. Here is a [jsfiddle sample code](http://jsfiddle.net/k8ptmxdz/2/) where it shows that `--mdc-theme-on-primary` doesn't work for the class `mdc-button--raised`. `--mdc-theme-primary` worked well in replacing the color of the theme but no success for `--mdc-theme-on-primary` . – Abel Callejo Sep 19 '18 at 05:54
  • JSFiddle is not representative. Here's the Codepen which works fine without hacks: https://codepen.io/rustemgareev/pen/ZMmgvv Also, you should not use `mdc-theme--primary` class on the raised button. – Rustem Gareev Sep 19 '18 at 06:13
  • 1
    Sorry, I just checked this locally and found that you should modify variables after importing the MDC Web's CDN code, I'll modify the answer. – Rustem Gareev Sep 19 '18 at 06:27
2

Looking at the pages you linked to, this appears to explain that you should edit the 'mdc-theme--primary--bg' class to make changes to primary background colour. So you could probably do something like this in your page css or <style> tags:

.mdc-theme--primary-bg {
  background-color: red
}

There are also classes listed there for secondary and other options :) enter image description here

DeltaMarine101
  • 753
  • 2
  • 8
  • 24