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: Deep OceanChange 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: Violet and LimeChange theme and dark mode for this card only in real-time
Name: Violet and Lime
ID: violet-lime
Dark Mode: Enabled
Primary Color: #8A2BE2
Secondary Color: #32CD32
Theme: DefaultChange theme and dark mode for this card only in real-time