title: How can I make a theme-able Angular Material NPM module?
body: <p>Is it possible to build an npm module that uses <a href="https://material.angular.io/" rel="noreferrer">Angular Material</a> and allows the components it defines to be styled by the consuming app's custom theme?</p>
  
  <p>As an example, say I create an npm module that includes a component with the following template:</p>
  
  <pre><code>&lt;button mat-raised-button color="accent"&gt;Click me!&lt;/button&gt;
  </code></pre>
  
  <p>Is it possible to import this component into two different apps, each of which defines <a href="https://material.angular.io/guide/theming" rel="noreferrer">a custom Angular Material theme</a>, and have the button take on the "accent" color of the current app's theme?</p>
  
  <p>Currently, I'm using <a href="https://github.com/dherges/ng-packagr" rel="noreferrer">ng-packagr</a> to build Angular-friendly npm modules.  However, as far as I can tell, this module includes a <code>.scss</code> compilation stage as part of the packaging process, which means any styles defined in the module lose their ability to be customized by a theme in an app that uses the module.</p>