vega/src/lib/themes.ts

interface ThemeColors {
  bg: string;
  "bg-raised": string;
  "bg-hover": string;
  border: string;
  "border-subtle": string;
  text: string;
  "text-muted": string;
  "text-dim": string;
  accent: string;
  "accent-hover": string;
  "accent-text": string;
  zap: string;
  "zap-text": string;
  danger: string;
  warning: string;
  success: string;
}

export interface Theme {
  id: string;
  name: string;
  colors: ThemeColors;
}

export const themes: Theme[] = [
  {
    id: "midnight",
    name: "Midnight",
    colors: {
      bg: "#0a0a0a",
      "bg-raised": "#111111",
      "bg-hover": "#1a1a1a",
      border: "#222222",
      "border-subtle": "#1a1a1a",
      text: "#e0e0e0",
      "text-muted": "#777777",
      "text-dim": "#555555",
      accent: "#8b5cf6",
      "accent-hover": "#7c3aed",
      "accent-text": "#ffffff",
      zap: "#f59e0b",
      "zap-text": "#000000",
      danger: "#ef4444",
      warning: "#f59e0b",
      success: "#22c55e",
    },
  },
  {
    id: "light",
    name: "Light",
    colors: {
      bg: "#f5f5f5",
      "bg-raised": "#ffffff",
      "bg-hover": "#e8e8e8",
      border: "#d4d4d4",
      "border-subtle": "#e5e5e5",
      text: "#1a1a1a",
      "text-muted": "#6b7280",
      "text-dim": "#9ca3af",
      accent: "#7c3aed",
      "accent-hover": "#6d28d9",
      "accent-text": "#ffffff",
      zap: "#d97706",
      "zap-text": "#ffffff",
      danger: "#dc2626",
      warning: "#d97706",
      success: "#16a34a",
    },
  },
  {
    id: "catppuccin",
    name: "Catppuccin Mocha",
    colors: {
      bg: "#1e1e2e",
      "bg-raised": "#313244",
      "bg-hover": "#45475a",
      border: "#45475a",
      "border-subtle": "#313244",
      text: "#cdd6f4",
      "text-muted": "#a6adc8",
      "text-dim": "#6c7086",
      accent: "#cba6f7",
      "accent-hover": "#b4befe",
      "accent-text": "#1e1e2e",
      zap: "#f9e2af",
      "zap-text": "#1e1e2e",
      danger: "#f38ba8",
      warning: "#f9e2af",
      success: "#a6e3a1",
    },
  },
  {
    id: "sepia",
    name: "Sepia",
    colors: {
      bg: "#2b2018",
      "bg-raised": "#382a1f",
      "bg-hover": "#453527",
      border: "#5a4636",
      "border-subtle": "#382a1f",
      text: "#e8d5c4",
      "text-muted": "#b89c84",
      "text-dim": "#7a6452",
      accent: "#e09850",
      "accent-hover": "#c47f3a",
      "accent-text": "#2b2018",
      zap: "#f0c040",
      "zap-text": "#2b2018",
      danger: "#d45040",
      warning: "#e0a040",
      success: "#7ab860",
    },
  },
  {
    id: "gruvbox",
    name: "Gruvbox",
    colors: {
      bg: "#282828",
      "bg-raised": "#3c3836",
      "bg-hover": "#504945",
      border: "#504945",
      "border-subtle": "#3c3836",
      text: "#ebdbb2",
      "text-muted": "#a89984",
      "text-dim": "#665c54",
      accent: "#fe8019",
      "accent-hover": "#d65d0e",
      "accent-text": "#282828",
      zap: "#fabd2f",
      "zap-text": "#282828",
      danger: "#fb4934",
      warning: "#fabd2f",
      success: "#b8bb26",
    },
  },
  {
    id: "nord",
    name: "Nord Frost",
    colors: {
      bg: "#2e3440",
      "bg-raised": "#3b4252",
      "bg-hover": "#434c5e",
      border: "#4c566a",
      "border-subtle": "#3b4252",
      text: "#eceff4",
      "text-muted": "#d8dee9",
      "text-dim": "#7b88a1",
      accent: "#88c0d0",
      "accent-hover": "#81a1c1",
      "accent-text": "#2e3440",
      zap: "#ebcb8b",
      "zap-text": "#2e3440",
      danger: "#bf616a",
      warning: "#ebcb8b",
      success: "#a3be8c",
    },
  },
  {
    id: "hackerman",
    name: "Hackerman",
    colors: {
      bg: "#0a0a0a",
      "bg-raised": "#0d1117",
      "bg-hover": "#161b22",
      border: "#1a2332",
      "border-subtle": "#131a24",
      text: "#00ff41",
      "text-muted": "#00bb2d",
      "text-dim": "#006b1a",
      accent: "#00ff41",
      "accent-hover": "#33ff66",
      "accent-text": "#0a0a0a",
      zap: "#ffff00",
      "zap-text": "#0a0a0a",
      danger: "#ff0000",
      warning: "#ffff00",
      success: "#00ff41",
    },
  },
];

export const DEFAULT_THEME_ID = "midnight";

export function getTheme(id: string): Theme | undefined {
  return themes.find((t) => t.id === id);
}

export function applyTheme(theme: Theme): void {
  const root = document.documentElement;
  for (const [key, value] of Object.entries(theme.colors)) {
    root.style.setProperty(`--color-${key}`, value);
  }
}