ThemeProvider
Apply a scope's active theme to one element and everything under it, as CSS custom properties — nestable, so a page can mix several themes.
[themeProvider] reads a scope's current theme and dark-mode state from ThemeStore and writes
the matching CSS variables directly onto the element it is bound to, via element.style.setProperty. Every
descendant inherits those variables through normal CSS cascade — including another [themeProvider] further
down, which is what makes nesting themes just a matter of choosing distinct scope names.
Minimal example
Two independently themed panels
import { Component, inject } from "@angular/core";
import { ThemeProviderDirective, ThemeStore } from "@sinequa/atomic-angular";
@Component({
selector: "sample-component",
imports: [ThemeProviderDirective],
template: `
<div themeProvider="sidebar">
<span class="text-(--theme-primary)">Themed by "sidebar"</span>
</div>
<div themeProvider="main">
<span class="text-(--theme-primary)">Themed by "main"</span>
</div>
`,
})
export class SampleComponent {
private readonly themeStore = inject(ThemeStore);
constructor() {
this.themeStore.loadDefaultTheme("sidebar");
this.themeStore.loadDefaultTheme("main", true);
}
}Options
Prop
Type