export interface ThemeColors { primary: string; secondary: string; accent: string; error: string; bgPrimary: string; bgSecondary: string; textPrimary: string; textSecondary: string; textOnPrimary: string; } export interface ThemeDefinition { id: string; name: string; description: string; light: ThemeColors; dark: ThemeColors; } /** * All 11 themes matching the KMM/iOS theme system. * Hex values are taken directly from ThemeColors.kt. */ export const themes: ThemeDefinition[] = [ { id: "default", name: "Default", description: "Warm orange with teal accents", light: { primary: "#E07A3A", secondary: "#0D7C66", accent: "#D4A574", error: "#DC2626", bgPrimary: "#FFFFFF", bgSecondary: "#F7F7F7", textPrimary: "#1C1917", textSecondary: "#78716C", textOnPrimary: "#FFFFFF", }, dark: { primary: "#F0A070", secondary: "#4FC9AF", accent: "#DDB892", error: "#EF4444", bgPrimary: "#0A0A0A", bgSecondary: "#161616", textPrimary: "#FAFAFA", textSecondary: "#A1A1A1", textOnPrimary: "#0A0A0A", }, }, { id: "teal", name: "Teal", description: "Blue-green with warm accents", light: { primary: "#069FC3", secondary: "#0054A4", accent: "#EFC707", error: "#DD1C1A", bgPrimary: "#FFF0D0", bgSecondary: "#FFFFFF", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#60CCE2", secondary: "#60A5D8", accent: "#EFC707", error: "#FF5244", bgPrimary: "#091829", bgSecondary: "#1A2E3E", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "ocean", name: "Ocean", description: "Deep blues and coral tones", light: { primary: "#006B8F", secondary: "#008A8A", accent: "#FF7E50", error: "#DD1C1A", bgPrimary: "#E4EBF1", bgSecondary: "#BCCAD5", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#49B5D1", secondary: "#60D1C6", accent: "#FF7E50", error: "#FF5244", bgPrimary: "#161B22", bgSecondary: "#313A4B", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "forest", name: "Forest", description: "Earth greens and golden hues", light: { primary: "#2C5015", secondary: "#6B8E22", accent: "#FFD600", error: "#DD1C1A", bgPrimary: "#EBEEE2", bgSecondary: "#C1C8AD", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#93C66B", secondary: "#AFD182", accent: "#FFD600", error: "#FF5244", bgPrimary: "#181E17", bgSecondary: "#384436", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "sunset", name: "Sunset", description: "Warm oranges and reds", light: { primary: "#FF4500", secondary: "#FF6246", accent: "#FFD600", error: "#DD1C1A", bgPrimary: "#F7F0E8", bgSecondary: "#DCD0BA", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#FF9E60", secondary: "#FFAD7C", accent: "#FFD600", error: "#FF5244", bgPrimary: "#201813", bgSecondary: "#433329", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "monochrome", name: "Monochrome", description: "Elegant grayscale", light: { primary: "#333333", secondary: "#666666", accent: "#999999", error: "#DD1C1A", bgPrimary: "#F0F0F0", bgSecondary: "#D4D4D4", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#E5E5E5", secondary: "#BFBFBF", accent: "#D1D1D1", error: "#FF5244", bgPrimary: "#161616", bgSecondary: "#3B3B3B", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "lavender", name: "Lavender", description: "Soft purple with pink accents", light: { primary: "#6B418A", secondary: "#8A60AF", accent: "#E24982", error: "#DD1C1A", bgPrimary: "#F1EFF5", bgSecondary: "#D9D1DF", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#D1AFE2", secondary: "#DDBFEA", accent: "#FF9EC6", error: "#FF5244", bgPrimary: "#17131E", bgSecondary: "#393042", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "crimson", name: "Crimson", description: "Bold red with warm highlights", light: { primary: "#B51E28", secondary: "#992D38", accent: "#E26000", error: "#DD1C1A", bgPrimary: "#F6EDEB", bgSecondary: "#DECFCC", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#FF827C", secondary: "#F99993", accent: "#FFB56B", error: "#FF5244", bgPrimary: "#1B1215", bgSecondary: "#412E39", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "midnight", name: "Midnight", description: "Deep navy with sky blue", light: { primary: "#1E4993", secondary: "#2D60AF", accent: "#4993E2", error: "#DD1C1A", bgPrimary: "#EDF0F7", bgSecondary: "#CCD5E2", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#82B5EA", secondary: "#93C6F2", accent: "#9ED8FF", error: "#FF5244", bgPrimary: "#12161F", bgSecondary: "#2F3848", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "desert", name: "Desert", description: "Warm terracotta and sand tones", light: { primary: "#AF6049", secondary: "#9E7C60", accent: "#D1932D", error: "#DD1C1A", bgPrimary: "#F6F0EA", bgSecondary: "#E5D8C6", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#F2B593", secondary: "#EAD1AF", accent: "#FFD86B", error: "#FF5244", bgPrimary: "#1F1C16", bgSecondary: "#494138", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, { id: "mint", name: "Mint", description: "Fresh green with turquoise", light: { primary: "#38AF93", secondary: "#60C6AF", accent: "#2D9EAF", error: "#DD1C1A", bgPrimary: "#EDF6F0", bgSecondary: "#D1E2D8", textPrimary: "#111111", textSecondary: "#444444", textOnPrimary: "#FFFFFF", }, dark: { primary: "#93F2D8", secondary: "#BFF9EA", accent: "#6BEAF2", error: "#FF5244", bgPrimary: "#161F1F", bgSecondary: "#384949", textPrimary: "#F5F5F5", textSecondary: "#C6C6C6", textOnPrimary: "#FFFFFF", }, }, ]; /** Default theme ID */ export const DEFAULT_THEME_ID = "default"; /** Get a theme definition by ID, falls back to Default */ export function getThemeById(id: string): ThemeDefinition { return themes.find((t) => t.id === id) ?? themes[0]; }