66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
import type { ThemeState, BackgroundShade } from '../theme-store';
|
|
import { themeStore } from '../theme-store';
|
|
|
|
/**
|
|
* ThemeController connects a Lit component to the ThemeStore.
|
|
*
|
|
* Most components do not need this because CSS custom properties
|
|
* cascade into Shadow DOM automatically. Use this controller only
|
|
* in components that need to read or change theme values (e.g. the
|
|
* config page colour picker).
|
|
*/
|
|
export class ThemeController implements ReactiveController {
|
|
private host: ReactiveControllerHost;
|
|
private unsubscribe?: () => void;
|
|
|
|
constructor(host: ReactiveControllerHost) {
|
|
this.host = host;
|
|
host.addController(this);
|
|
}
|
|
|
|
// ===================================================================
|
|
// LIFECYCLE HOOKS
|
|
// ===================================================================
|
|
|
|
hostConnected(): void {
|
|
this.unsubscribe = themeStore.subscribe(() => {
|
|
this.host.requestUpdate();
|
|
});
|
|
}
|
|
|
|
hostDisconnected(): void {
|
|
this.unsubscribe?.();
|
|
}
|
|
|
|
// ===================================================================
|
|
// STATE ACCESSORS
|
|
// ===================================================================
|
|
|
|
get state(): Readonly<ThemeState> {
|
|
return themeStore.getState();
|
|
}
|
|
|
|
get accentColor(): string {
|
|
return this.state.accentColor;
|
|
}
|
|
|
|
get backgroundShade(): BackgroundShade {
|
|
return this.state.backgroundShade;
|
|
}
|
|
|
|
// ===================================================================
|
|
// ACTIONS
|
|
// ===================================================================
|
|
|
|
async setAccentColor(color: string): Promise<void> {
|
|
await themeStore.setAccentColor(color);
|
|
}
|
|
|
|
async setBackgroundShade(
|
|
shade: BackgroundShade,
|
|
): Promise<void> {
|
|
await themeStore.setBackgroundShade(shade);
|
|
}
|
|
}
|