Spaces:
Running
Running
| export interface AuraTheme { | |
| id: string; | |
| name: string; | |
| subtitle: string; | |
| previewColors: [string, string, string]; | |
| brandGradient: string; | |
| brandHoverGradient: string; | |
| userBubbleGradient: string; | |
| userBubbleBorder: string; | |
| actionButtonGradient: string; | |
| actionButtonHover: string; | |
| accentText: string; | |
| accentBg: string; | |
| accentBorder: string; | |
| assistantBubbleBg: string; | |
| assistantBubbleBorder: string; | |
| glowColor: string; | |
| iconGradient: string; | |
| } | |
| export const AURA_THEMES: AuraTheme[] = [ | |
| { | |
| id: "aura-nebula", | |
| name: "Aura Nebula", | |
| subtitle: "Signature Purple to Pink with Sunset Touch", | |
| previewColors: ["#a855f7", "#ec4899", "#f97316"], | |
| brandGradient: "from-purple-500 via-fuchsia-500 to-pink-500", | |
| brandHoverGradient: "from-purple-500 via-pink-500 via-red-500 to-orange-400", | |
| userBubbleGradient: "from-purple-600 via-fuchsia-600 to-pink-600", | |
| userBubbleBorder: "border-purple-400/30", | |
| actionButtonGradient: "from-purple-600 via-fuchsia-600 to-pink-600", | |
| actionButtonHover: "hover:from-purple-500 hover:via-fuchsia-500 hover:to-pink-500", | |
| accentText: "text-purple-600 dark:text-purple-400", | |
| accentBg: "bg-purple-500/10", | |
| accentBorder: "border-purple-500/20 dark:border-purple-500/30", | |
| assistantBubbleBg: "bg-white dark:bg-slate-900/90 hover:border-purple-500/30", | |
| assistantBubbleBorder: "border-purple-500/20 dark:border-purple-500/25", | |
| glowColor: "rgba(168, 85, 247, 0.35)", | |
| iconGradient: "from-purple-600 via-fuchsia-600 to-pink-500", | |
| }, | |
| { | |
| id: "sunset-horizon", | |
| name: "Sunset Horizon", | |
| subtitle: "Vibrant Pink, Crimson Red & Amber Orange", | |
| previewColors: ["#ec4899", "#ef4444", "#f97316"], | |
| brandGradient: "from-pink-500 via-rose-500 to-orange-500", | |
| brandHoverGradient: "from-purple-600 via-pink-500 via-red-500 to-amber-400", | |
| userBubbleGradient: "from-pink-600 via-rose-600 to-amber-600", | |
| userBubbleBorder: "border-pink-400/30", | |
| actionButtonGradient: "from-pink-600 via-rose-600 to-orange-600", | |
| actionButtonHover: "hover:from-pink-500 hover:via-rose-500 hover:to-orange-500", | |
| accentText: "text-pink-600 dark:text-rose-400", | |
| accentBg: "bg-pink-500/10", | |
| accentBorder: "border-pink-500/20 dark:border-rose-500/30", | |
| assistantBubbleBg: "bg-white dark:bg-slate-900/90 hover:border-pink-500/30", | |
| assistantBubbleBorder: "border-pink-500/20 dark:border-rose-500/25", | |
| glowColor: "rgba(244, 63, 94, 0.35)", | |
| iconGradient: "from-pink-600 via-rose-600 to-orange-500", | |
| }, | |
| { | |
| id: "emerald-matrix", | |
| name: "Cyber Emerald", | |
| subtitle: "Futuristic Mint, Emerald & Cyber Teal", | |
| previewColors: ["#10b981", "#14b8a6", "#06b6d4"], | |
| brandGradient: "from-emerald-400 via-teal-400 to-cyan-400", | |
| brandHoverGradient: "from-teal-400 via-emerald-400 via-yellow-400 to-amber-400", | |
| userBubbleGradient: "from-emerald-600 via-teal-600 to-cyan-600", | |
| userBubbleBorder: "border-emerald-400/30", | |
| actionButtonGradient: "from-emerald-600 via-teal-600 to-cyan-600", | |
| actionButtonHover: "hover:from-emerald-500 hover:via-teal-500 hover:to-cyan-500", | |
| accentText: "text-emerald-600 dark:text-emerald-400", | |
| accentBg: "bg-emerald-500/10", | |
| accentBorder: "border-emerald-500/20 dark:border-emerald-500/30", | |
| assistantBubbleBg: "bg-white dark:bg-slate-900/90 hover:border-emerald-500/30", | |
| assistantBubbleBorder: "border-emerald-500/20 dark:border-emerald-500/25", | |
| glowColor: "rgba(16, 185, 129, 0.35)", | |
| iconGradient: "from-emerald-600 via-teal-600 to-cyan-500", | |
| }, | |
| { | |
| id: "ocean-sapphire", | |
| name: "Oceanic Sapphire", | |
| subtitle: "Deep Cobalt Blue, Royal Indigo & Ice Cyan", | |
| previewColors: ["#3b82f6", "#6366f1", "#06b6d4"], | |
| brandGradient: "from-blue-500 via-indigo-500 to-cyan-400", | |
| brandHoverGradient: "from-indigo-600 via-blue-500 via-pink-500 to-orange-400", | |
| userBubbleGradient: "from-blue-600 via-indigo-600 to-cyan-600", | |
| userBubbleBorder: "border-blue-400/30", | |
| actionButtonGradient: "from-blue-600 via-indigo-600 to-cyan-600", | |
| actionButtonHover: "hover:from-blue-500 hover:via-indigo-500 hover:to-cyan-500", | |
| accentText: "text-blue-600 dark:text-blue-400", | |
| accentBg: "bg-blue-500/10", | |
| accentBorder: "border-blue-500/20 dark:border-blue-500/30", | |
| assistantBubbleBg: "bg-white dark:bg-slate-900/90 hover:border-blue-500/30", | |
| assistantBubbleBorder: "border-blue-500/20 dark:border-blue-500/25", | |
| glowColor: "rgba(59, 130, 246, 0.35)", | |
| iconGradient: "from-blue-600 via-indigo-600 to-cyan-500", | |
| }, | |
| { | |
| id: "solar-amber", | |
| name: "Solar Flare", | |
| subtitle: "Radiant Gold, Warm Amber & Sunset Crimson", | |
| previewColors: ["#f59e0b", "#f97316", "#ef4444"], | |
| brandGradient: "from-amber-400 via-orange-500 to-rose-500", | |
| brandHoverGradient: "from-purple-500 via-pink-500 via-orange-400 to-yellow-300", | |
| userBubbleGradient: "from-amber-600 via-orange-600 to-rose-600", | |
| userBubbleBorder: "border-amber-400/30", | |
| actionButtonGradient: "from-amber-600 via-orange-600 to-rose-600", | |
| actionButtonHover: "hover:from-amber-500 hover:via-orange-500 hover:to-rose-500", | |
| accentText: "text-amber-600 dark:text-amber-400", | |
| accentBg: "bg-amber-500/10", | |
| accentBorder: "border-amber-500/20 dark:border-amber-500/30", | |
| assistantBubbleBg: "bg-white dark:bg-slate-900/90 hover:border-amber-500/30", | |
| assistantBubbleBorder: "border-amber-500/20 dark:border-amber-500/25", | |
| glowColor: "rgba(245, 158, 11, 0.35)", | |
| iconGradient: "from-amber-500 via-orange-500 to-rose-500", | |
| }, | |
| { | |
| id: "obsidian-silver", | |
| name: "Obsidian Titanium", | |
| subtitle: "Stealth Slate, Titanium Silver & Pure Platinum", | |
| previewColors: ["#94a3b8", "#cbd5e1", "#f8fafc"], | |
| brandGradient: "from-slate-300 via-zinc-200 to-white", | |
| brandHoverGradient: "from-purple-400 via-pink-400 via-rose-400 to-orange-400", | |
| userBubbleGradient: "from-slate-700 via-zinc-800 to-slate-900", | |
| userBubbleBorder: "border-slate-500/40", | |
| actionButtonGradient: "from-slate-700 via-zinc-800 to-slate-900", | |
| actionButtonHover: "hover:from-slate-600 hover:via-zinc-700 hover:to-slate-800", | |
| accentText: "text-slate-300 dark:text-slate-200", | |
| accentBg: "bg-slate-500/10", | |
| accentBorder: "border-slate-500/20 dark:border-slate-500/30", | |
| assistantBubbleBg: "bg-white dark:bg-slate-900/90 hover:border-slate-500/30", | |
| assistantBubbleBorder: "border-slate-300 dark:border-slate-700", | |
| glowColor: "rgba(203, 213, 225, 0.25)", | |
| iconGradient: "from-slate-600 via-zinc-600 to-slate-400", | |
| }, | |
| ]; | |
| export function getAuraTheme(themeId?: string): AuraTheme { | |
| const found = AURA_THEMES.find((t) => t.id === themeId); | |
| return found || AURA_THEMES[0]; // Default to Aura Nebula (Purple to Pink) | |
| } | |