title: How to set primary and secondary colors in Material Design Components for Web?
body: <h3>Details</h3>
  
  <p>I went looking into Material Components (MDC) for Web and landed to using CDN (hosted CSS and JavaScript libraries):</p>
  
  <ul>
  <li><code>https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css</code></li>
  <li><code>https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js</code></li>
  </ul>
  
  <p>This is by virtue from their <em>getting-started-docs-page</em> in [<a href="https://material.io/develop/web/docs/getting-started/" rel="noreferrer">1</a>]. Similarly, MDC has this <em>predecessor-slash-lighter-library</em> Material Design Lite (MDL) which you could easily customize the theme colors. It can be done through its custom CSS theme builder. <sup>[<a href="https://getmdl.io/customize/index.html" rel="noreferrer">2</a>]</sup></p>
  
  <p>However, according to MDC Web's Theming Guide: <sup>[<a href="https://material.io/develop/web/docs/theming/" rel="noreferrer">3</a>]</sup></p>
  
  <blockquote>
    <p>... 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.</p>
  </blockquote>
  
  <p>It turns out, modifying the theme colors through the MDC's CDN URL is currently not an option.</p>
  
  <p>So again back to my question, how could one set the primary and secondary colors in the new MDC for Web using the CDN?</p>
  
  <h3>References</h3>
  
  <ol>
  <li><a href="https://material.io/develop/web/docs/getting-started/" rel="noreferrer">Getting started, Material Components for the Web</a></li>
  <li><a href="https://getmdl.io/customize/index.html" rel="noreferrer">Custom CSS theme builder, Material Design Lite</a></li>
  <li><a href="https://material.io/develop/web/docs/theming/" rel="noreferrer">Theming guide, Material Components for the Web</a></li>
  </ol>