decision/web/src/lib/mood.svelte.ts

// Four moods, two light and two dark: « pierre » and « nuit » (the water),
// « calcaire » and « ardoise » (the ochre). Set before the first paint by
// app.html; a first visit follows the device's light or dark setting.
export const MOODS = ['pierre', 'calcaire', 'nuit', 'ardoise'] as const;
export type Mood = (typeof MOODS)[number];

const isMood = (m: string | undefined): m is Mood => MOODS.includes(m as Mood);

class MoodState {
  current = $state<Mood>('pierre');

  init() {
    const m = document.documentElement.dataset.mood;
    this.current = isMood(m) ? m : 'pierre';
  }

  set(m: Mood) {
    this.current = m;
    const root = document.documentElement;
    root.dataset.mood = m;
    const bg = getComputedStyle(root).getPropertyValue('--bg').trim();
    if (bg) document.querySelector('meta[name="theme-color"]')?.setAttribute('content', bg);
    try {
      localStorage.setItem('ld:mood', m);
    } catch {
      /* private mode: the mood just won't persist */
    }
  }
}

export const mood = new MoodState();