This demo showcases the ThemeGeneratorService API. Each card applies its theme only to itself and its children—without affecting the rest of the app, or being affected by the rest of the app. You can change themes, toggle dark mode, and reset to defaults, all scoped to a single card.
This approach is ideal for combined websites or applications where different sections, widgets, or embedded components require independent theming. For example, you can safely preview or apply custom themes to specific cards, dashboards, or micro-frontends without impacting the global look and feel of the rest of your site.
These element will not be affected by the global app theme. Try for yourself with the theme picker or dark mode switch in the nav.