Building a theme picker using custom CSS properties
Having a theme available for your application is a common and important use case that is already covered by popular Angular libraries. You may be aware that Angular Material already supports several available themes (for example, the popular deeppurple-amber and indigo-pink). The common approach of using preprocessor variables when using SCSS has been available for some time. But now, you can support dynamic theming using custom CSS properties without having to generate the CSS files using a preprocessor. This adds new options for interactive theming that we will cover in this section.
Given that further CSS rules can be built using CSS Custom Properties, we can now change several styling rules in one go, directly from one of the components in the application. Here, one or more CSS classes can be calculated on the fly via the --headerbackground custom property or simply by attaching the value of the property as the CSS class, like...