Material-components-web: Is a custom colour scheme possible with unpkg CDN?

[PeteCrighton]

I apologise if this is a basic question, but I am rather unexperienced … I spent a lot of time reading the documentation, but still am not quite confident.

I was going to load the MDC .css from _unpkg_, but do need to have a custom colour scheme. As I understand it now, I have to compile the MDC .scss files, so all the colours are being calculated. So, do I need to host the MDC locally then to be able to do that?
I guess part of my confusion comes from the Theming Guide, where _unpkg_ is used in Step 1, but Step 3 uses a local Sass file. The @import (kind of) obviously does not work then if you try to combine the steps.

[moog16]

@PeteCrighton, you can just use the CSS file from unpkg. Having a scss build step is not necessary when using plain CSS files.

Step #2 is describing how to can use MDC's predefined classes in your HTML markup. The classes use default primary and secondary colors. You can update these colors via CSS Custom Properties as described in Step #4. Please note that CSS Custom Properties are not supported in IE.

If you choose to use Sass, step #3 describes how to customize your webpage via Sass variables.

Does that answer your question?

[moog16]

@PeteCrighton, to answer the other part of your question we are not able to supply a sass file over unpkg, since the browser cannot parse Sass files. In order to use Sass files you need to import the sass file(s) into your project.

We do agree that the Themeing Guide is a bit confusing, which we will revisit.

[aaronhudon]

@moog16 at what point do we modify css variables to achieve a desired theme, vs modifying Sass variables?

[PeteCrighton]

Yes, that was part of my confusion. But I think I get it now … if I want to have all theme colors automatically calculated based on mdc-theme-primary, mdc-theme-secondary, and mdc-theme-background, I have to use Sass and import the files. If I want to include the CSS via _unpkg_, I have to override every single custom property (that I want to use) manually.

[moog16]

@PeteCrighton That's correct:

• CSS (unpkg) -> override each custom property individually.
• Sass (download/import) -> use sass variables to automatically calculate the rest of the colors/variables for you.

@aaronhudon: We don't recommend using CSS variables if you can help it. They are really there for developers that do not use Sass or if you want to use _unpkg_. For the majority of the cases out there I suggest modifying Sass variables.

1. Depending on your target browsers, CSS Variables aren't supported by everyone (IE11, Edge15 partial support).
2. Setting just mdc-theme-primary, mdc-theme-secondary, and mdc-theme-background is a lot simpler. Theming should look more consistent as well.
3. If you do have edge cases, you should defer to using our Sass mixins and custom classes. IE. button sass mixins

I'm leaving this issue open to track updating the theming.md doc.

[aaronhudon]

@moog16 thanks for this - i think others would appreciate this type of explanation in the documentation too.

[lynnmercier]

• [ ] Document how to use Sass mixins
• [ ] Document how dark theme is basically just a new theme
• [ ] Document how to use Sass variables in mdc-theme
• [ ] Document how to use CSS variables in mdc-theme