adds color themeing support to the site

src/app/services/theme.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+
+import { StationConfig } from '../interfaces/station-config';
+
+/** CSS custom property names mapped from StationConfig color fields. */
+const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
+  { field: 'color_primary', prop: '--color-primary' },
+  { field: 'color_primary_light', prop: '--color-primary-light' },
+  { field: 'color_primary_dark', prop: '--color-primary-dark' },
+  { field: 'color_primary_muted', prop: '--color-primary-muted' },
+  { field: 'color_accent', prop: '--color-accent' },
+  { field: 'color_accent_light', prop: '--color-accent-light' },
+  { field: 'color_accent_dark', prop: '--color-accent-dark' },
+  { field: 'color_accent_muted', prop: '--color-accent-muted' },
+  { field: 'color_background', prop: '--color-cream' },
+  { field: 'color_text', prop: '--color-dark' },
+  { field: 'color_success', prop: '--color-success' },
+  { field: 'color_danger', prop: '--color-danger' },
+  { field: 'color_info', prop: '--color-info' },
+];
+
+/** Build a gradient CSS value from three color stops. */
+function gradient(from: string, mid: string, to: string): string {
+  return `linear-gradient(135deg, ${from} 0%, ${mid} 40%, ${to} 100%)`;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  /**
+   * Apply color theme from StationConfig as CSS custom properties on `:root`.
+   * Also generates derived gradient variables.
+   */
+  apply(config: StationConfig): void {
+    const root = document.documentElement.style;
+
+    for (const { field, prop } of COLOR_MAP) {
+      const value = (config as any)[field];
+      if (value) {
+        root.setProperty(prop, value);
+      }
+    }
+
+    // Derived gradients
+    root.setProperty(
+      '--sky-gradient',
+      gradient(
+        config.color_primary_dark,
+        config.color_primary,
+        config.color_primary_light,
+      ),
+    );
+    root.setProperty(
+      '--sunset-gradient',
+      gradient(
+        config.color_accent_dark,
+        config.color_accent,
+        config.color_accent_light,
+      ),
+    );
+    root.setProperty(
+      '--mixed-gradient',
+      `linear-gradient(135deg, ${config.color_primary_dark} 0%, ${config.color_primary} 50%, ${config.color_accent} 100%)`,
+    );
+  }
+}