feat(frontend): wire ChicoryTV SPA themes

refs #79

web/src/designSystem.ts

@@ -1,3 +1,64 @@
 import '../../design-system/styles.css';
 
 export const designSystemStylesheet = '../../design-system/styles.css';
+
+export type DesignSystemThemeId = 'warm' | 'cool' | 'dual';
+
+export type DesignSystemTheme = {
+  id: DesignSystemThemeId;
+  label: string;
+  description: string;
+};
+
+export const defaultDesignSystemTheme: DesignSystemThemeId = 'warm';
+export const designSystemThemeStorageKey = 'ctv-theme';
+
+export const designSystemThemes: DesignSystemTheme[] = [
+  {
+    id: 'warm',
+    label: 'Warm chicory',
+    description: 'Warm chicory theme'
+  },
+  {
+    id: 'cool',
+    label: 'Cool periwinkle',
+    description: 'Cool periwinkle theme'
+  },
+  {
+    id: 'dual',
+    label: 'Dual accent',
+    description: 'Dual accent theme'
+  }
+];
+
+function isDesignSystemTheme(value: string | null): value is DesignSystemThemeId {
+  return value === 'warm' || value === 'cool' || value === 'dual';
+}
+
+function getStorage(): Storage | undefined {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  try {
+    return window.localStorage;
+  } catch {
+    return undefined;
+  }
+}
+
+export function getStoredDesignSystemTheme(): DesignSystemThemeId {
+  const storedTheme = getStorage()?.getItem(designSystemThemeStorageKey) ?? null;
+
+  return isDesignSystemTheme(storedTheme) ? storedTheme : defaultDesignSystemTheme;
+}
+
+export function applyDesignSystemTheme(theme: DesignSystemThemeId): void {
+  if (theme === defaultDesignSystemTheme) {
+    document.documentElement.removeAttribute('data-theme');
+  } else {
+    document.documentElement.dataset.theme = theme;
+  }
+
+  getStorage()?.setItem(designSystemThemeStorageKey, theme);
+}