Get Active Theme

curl 'https://api.bio.re/api/v1/themes/active?target=CLIENT'

type ActiveThemePreset = {
  id: string;
  name: string;
  slug: string;
  target: 'CLIENT';
  lightTokens: object;
  darkTokens: object;
  typography: object;
  layout: object;
  assets: object;
  publishedAt: string | null;
};

async function getActiveTheme(): Promise<ActiveThemePreset | null> {
  const url = new URL('https://api.bio.re/api/v1/themes/active');
  url.searchParams.set('target', 'CLIENT');
  const res = await fetch(url);
  const json = await res.json();
  if (!res.ok || !json.success) {
    throw Object.assign(new Error(json?.error?.message ?? 'Active theme fetch failed'), {
      code: json?.error?.code,
    });
  }
  return json.data.preset;
}

import { useQuery } from '@tanstack/react-query';

export const themeKeys = {
  active: () => ['themes', 'active'] as const,
};

export function useActiveTheme() {
  return useQuery({
    queryKey: themeKeys.active(),
    queryFn: async () => {
      const url = new URL('/api/v1/themes/active', window.location.origin);
      url.searchParams.set('target', 'CLIENT');
      const res = await fetch(url);
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw Object.assign(new Error(json?.error?.message ?? 'Active theme fetch failed'), {
          code: json?.error?.code,
          i18nKey: json?.error?.i18nKey,
        });
      }
      return json.data.preset as ActiveThemePreset | null;
    },
    // Active theme rarely flips during a session
    staleTime: 5 * 60_000,
  });
}