Multi-Theme Demo

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.

How Local Theming Works The following code applies the selected theme only to this card and its children, without affecting the rest of the app:

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.

Theme: DefaultChange theme and dark mode for this card only in real-time
Theme: DefaultChange theme and dark mode for this card only in real-time
Theme: Deep OceanChange theme and dark mode for this card only in real-time
Name: Deep Ocean
ID: deep-ocean
Dark Mode: Enabled
Primary Color: #1E3A8A
Secondary Color: #06B6D4
Theme: Cherry BlossomChange theme and dark mode for this card only in real-time