Hierarchical Theme Management
Using section-specific theme palettes for different application areas
You've now entered the Seasons section of the application, which has its own set of available themes:
In this example the user can't select themes (no picker in the navbar). Each component sets the Global Theme using the ThemeService to set the theme, that will apply as long as that component is active.
These themes are completely different from the Material themes in the main section. This demonstrates how the SpiderBaby theming system can provide different theme contexts for different application areas.
Hierarchical Theme Architecture
How it works
When entering this section, we replace the available system themes using DynamicThemeConfigService:
This technique is perfect for:
- Multi-tenant applications with different branding per tenant
- Separate themed areas within a single application
- Seasonal or time-based theme variations
- Feature-specific theme contexts
Using Themes in Components
Local Theme Application
Each seasonal card below uses its own theme without affecting the rest of the application or being affected by the resto of the application:
Global Theme Application
Clicking "Go to [Season]" applies the theme to the entire section: Including the navbar and all other components.
Try Different Themes
Select from seasonal theme only available in this section:
Seasonal Theme Examples
sbApplyTheme directive. @for (season of _seasonData(); track season.title) {
<sb-season-info-card [sbApplyTheme]="season.theme" [data]="season" />
}