the-biergarten-app/web/frontend/app/features/theme/themes.ts

export type ThemeName =
    'biergarten-lager' | 'biergarten-stout' | 'biergarten-cassis' | 'biergarten-weizen';

export interface ThemeOption {
    value: ThemeName;
    label: string;
    /** Used where the segmented control is narrow, such as the landing page. */
    shortLabel: string;
    /** A compact mood descriptor for theme pickers. */
    shortVibe: string;
    vibe: string;
}

export const defaultThemeName: ThemeName = 'biergarten-lager';
export const themeCookieName = 'biergarten-theme';

export const biergartenThemes: ThemeOption[] = [
    {
        value: 'biergarten-lager',
        label: 'Biergarten Lager',
        shortLabel: 'Lager',
        shortVibe: 'Muted parchment',
        vibe: 'Muted parchment, mellow amber, daytime beer garden',
    },
    {
        value: 'biergarten-stout',
        label: 'Biergarten Stout',
        shortLabel: 'Stout',
        shortVibe: 'Charred barrel',
        vibe: 'Charred barrel, deep roast, cozy evening cellar',
    },
    {
        value: 'biergarten-cassis',
        label: 'Biergarten Cassis',
        shortLabel: 'Cassis',
        shortVibe: 'Blackberry barrel',
        vibe: 'Blackberry barrel, sour berry dark, vivid night market',
    },
    {
        value: 'biergarten-weizen',
        label: 'Biergarten Weizen',
        shortLabel: 'Weizen',
        shortVibe: 'Bright spring',
        vibe: 'Ultra-light young barley, green undertone, bright spring afternoon',
    },
];

export const isBiergartenTheme = (value: string | null | undefined): value is ThemeName => {
    return biergartenThemes.some((theme) => theme.value === value);
};

export const parseThemeCookie = (cookieHeader: string | null): ThemeName => {
    const match = cookieHeader?.match(new RegExp(`(?:^|; )${themeCookieName}=([^;]*)`));
    const value = match ? decodeURIComponent(match[1]) : null;
    return isBiergartenTheme(value) ? value : defaultThemeName;
};