popagent

Latest change 575490fe67b97f5e9d8b54f5f008c1877ed84864 - Add popular appearance themes by AkurAI Build

export const APPEARANCE_THEMES = [
  { id: "light", label: "Light" },
  { id: "dark", label: "Dark" },
  { id: "dracula", label: "Dracula" },
  { id: "nord", label: "Nord" },
  { id: "tokyo-night", label: "Tokyo Night" },
  { id: "catppuccin", label: "Catppuccin" },
  { id: "gruvbox", label: "Gruvbox" },
  { id: "solarized-light", label: "Solarized Light" },
] as const;

export type AppearanceTheme = typeof APPEARANCE_THEMES[number]["id"];

const STORAGE_KEY = "popagent-appearance";

export function parseAppearanceTheme(value: string | null): AppearanceTheme | undefined {
  return APPEARANCE_THEMES.some((theme) => theme.id === value) ? value as AppearanceTheme : undefined;
}

export function themeColorScheme(theme: AppearanceTheme): "light" | "dark" {
  return theme === "light" || theme === "solarized-light" ? "light" : "dark";
}

export function preferredTheme(): AppearanceTheme {
  if (typeof window === "undefined") return "dark";
  const saved = parseAppearanceTheme(window.localStorage.getItem(STORAGE_KEY));
  if (saved) return saved;
  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
}

export function applyTheme(theme: AppearanceTheme) {
  document.documentElement.dataset.theme = theme;
  document.documentElement.style.colorScheme = themeColorScheme(theme);
}

export function saveTheme(theme: AppearanceTheme) {
  window.localStorage.setItem(STORAGE_KEY, theme);
  applyTheme(theme);
}