added color/ theme settings, new config window

frontend/src/store/controllers/theme-controller.ts

@@ -0,0 +1,65 @@
+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);
+    }
+}