How can I make a theme-able Angular Material NPM module?

Question

Is it possible to build an npm module that uses Angular Material and allows the components it defines to be styled by the consuming app\'s custom theme?

As an example, s

Answer 1

The essentials on how to do this are partly covered by the Angular Material Theming Your Own Components guide. In addition to theming your components, your library ("npm module") also needs to provide an entry point for all of its own styling in the same way that the Angular Material library does via its angular-material-theme() mixin. This is normally done by defining a mixin to define styles and call all component theming mixins, rather than creating a stylesheet file with style definitions. The mixin takes a theme as a parameter, and uses that theme to define all of its own styling as well as applying theming to any of its components. For example, your library might have its own _theme.scss file that any consuming application could import, which would define the mixin:

@import '~@angular/material/theming';
@import './components/my-component/_my-component-theme'; // component theming file with mixin
@mixin library-theme($theme) {

    @include angular-material-theme($theme); // angular material

    @include my-component-theme($theme); // component theming

    // define non-component styles
}

The consuming application would need to import your library's theming file, create its own theme, and then call your library's theming mixin.

There is obviously more detail to it, but those are the basics. For reference, I recommend you look at how Angular Material does its own theming via GitHub.