/* * ReceiptVault — Themes CSS * 10 built-in themes defined as CSS custom properties. * Applied via [data-theme="name"] on . * * Variables used throughout app.css: * --color-bg Main page background * --color-surface Card / panel surface * --color-surface-alt Slightly elevated surface * --color-border Border / divider color * --color-accent Primary brand / accent color * --color-accent-rgb Accent as R,G,B components (for rgba()) * --color-accent-dark Darker accent shade * --color-accent-light Lighter accent shade * --color-text Primary text * --color-text-muted Secondary / muted text * --color-text-on-accent Text drawn ON accent-colored surfaces * --color-success Green * --color-warning Amber / orange * --color-danger Red * --color-nav-bg Navigation bar background * --color-nav-text Navigation bar text / icon color * --color-stats-bg Stats banner background * --shadow-sm Small box-shadow * --shadow-md Medium box-shadow * --shadow-lg Large box-shadow * --radius-sm / --radius-md / --radius-lg * --transition-fast Quick transition */ /* ============================================================ 1. MIDNIGHT PRO (dark navy + electric blue) ============================================================ */ [data-theme="midnight-pro"] { --color-bg: #0f1729; --color-surface: #1a2540; --color-surface-alt: #243050; --color-border: #2d3a55; --color-accent: #3b82f6; --color-accent-rgb: 59, 130, 246; --color-accent-dark: #1d4ed8; --color-accent-light: #93c5fd; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-on-accent: #ffffff; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-nav-bg: #111827; --color-nav-text: #f1f5f9; --color-stats-bg: #1a2540; --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 4px 14px rgba(0,0,0,.55); --shadow-lg: 0 8px 30px rgba(0,0,0,.65); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 2. ARCTIC LIGHT (white + teal) ============================================================ */ [data-theme="arctic-light"] { --color-bg: #eef2f7; --color-surface: #ffffff; --color-surface-alt: #f8fafc; --color-border: #e2e8f0; --color-accent: #14b8a6; --color-accent-rgb: 20, 184, 166; --color-accent-dark: #0f766e; --color-accent-light: #99f6e4; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-on-accent: #ffffff; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-nav-bg: #ffffff; --color-nav-text: #0f172a; --color-stats-bg: #e0f2fe; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 8px 30px rgba(0,0,0,.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 3. SUNSET AMBER (warm cream + deep orange) ============================================================ */ [data-theme="sunset-amber"] { --color-bg: #fef9f0; --color-surface: #ffffff; --color-surface-alt: #fff7ed; --color-border: #fed7aa; --color-accent: #f97316; --color-accent-rgb: 249, 115, 22; --color-accent-dark: #c2410c; --color-accent-light: #fdba74; --color-text: #431407; --color-text-muted: #9a3412; --color-text-on-accent: #ffffff; --color-success: #15803d; --color-warning: #b45309; --color-danger: #b91c1c; --color-nav-bg: #7c2d12; --color-nav-text: #fff7ed; --color-stats-bg: #ffedd5; --shadow-sm: 0 1px 3px rgba(122,52,0,.12); --shadow-md: 0 4px 12px rgba(122,52,0,.16); --shadow-lg: 0 8px 30px rgba(122,52,0,.22); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 4. FOREST BREEZE (sage + dark green) ============================================================ */ [data-theme="forest-breeze"] { --color-bg: #f0faf4; --color-surface: #ffffff; --color-surface-alt: #ecfdf5; --color-border: #a7f3d0; --color-accent: #16a34a; --color-accent-rgb: 22, 163, 74; --color-accent-dark: #14532d; --color-accent-light: #86efac; --color-text: #14532d; --color-text-muted: #166534; --color-text-on-accent: #ffffff; --color-success: #15803d; --color-warning: #a16207; --color-danger: #b91c1c; --color-nav-bg: #14532d; --color-nav-text: #f0fdf4; --color-stats-bg: #dcfce7; --shadow-sm: 0 1px 3px rgba(20,83,45,.10); --shadow-md: 0 4px 12px rgba(20,83,45,.14); --shadow-lg: 0 8px 30px rgba(20,83,45,.20); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 5. OBSIDIAN (near-black + neon violet) ============================================================ */ [data-theme="obsidian"] { --color-bg: #0a0a0f; --color-surface: #141420; --color-surface-alt: #1e1e2e; --color-border: #2a2a42; --color-accent: #a855f7; --color-accent-rgb: 168, 85, 247; --color-accent-dark: #7c3aed; --color-accent-light: #d8b4fe; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-on-accent: #ffffff; --color-success: #4ade80; --color-warning: #fbbf24; --color-danger: #f87171; --color-nav-bg: #0a0a14; --color-nav-text: #e2e8f0; --color-stats-bg: #1e1e2e; --shadow-sm: 0 1px 3px rgba(0,0,0,.55); --shadow-md: 0 4px 12px rgba(0,0,0,.65); --shadow-lg: 0 8px 30px rgba(168,85,247,.18); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 6. CHERRY BLOSSOM (pastel pink + rose) ============================================================ */ [data-theme="cherry-blossom"] { --color-bg: #fff0f6; --color-surface: #ffffff; --color-surface-alt: #ffe4ee; --color-border: #fecaca; --color-accent: #e11d48; --color-accent-rgb: 225, 29, 72; --color-accent-dark: #9f1239; --color-accent-light: #fda4af; --color-text: #4c0519; --color-text-muted: #9f1239; --color-text-on-accent: #ffffff; --color-success: #15803d; --color-warning: #b45309; --color-danger: #9f1239; --color-nav-bg: #9f1239; --color-nav-text: #fff0f6; --color-stats-bg: #ffe4ee; --shadow-sm: 0 1px 3px rgba(159,18,57,.10); --shadow-md: 0 4px 12px rgba(159,18,57,.15); --shadow-lg: 0 8px 30px rgba(159,18,57,.22); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 7. CORPORATE BLUE (light grey + royal blue) ============================================================ */ [data-theme="corporate-blue"] { --color-bg: #f1f5f9; --color-surface: #ffffff; --color-surface-alt: #f8fafc; --color-border: #cbd5e1; --color-accent: #1d4ed8; --color-accent-rgb: 29, 78, 216; --color-accent-dark: #1e3a8a; --color-accent-light: #93c5fd; --color-text: #0f172a; --color-text-muted: #475569; --color-text-on-accent: #ffffff; --color-success: #15803d; --color-warning: #b45309; --color-danger: #dc2626; --color-nav-bg: #1e3a8a; --color-nav-text: #f1f5f9; --color-stats-bg: #dbeafe; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.11); --shadow-lg: 0 8px 30px rgba(30,58,138,.15); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 8. SOLARIZED GOLD (warm yellow-tan + dark gold) ============================================================ */ [data-theme="solarized-gold"] { --color-bg: #fdf6e3; --color-surface: #fffcf0; --color-surface-alt: #eee8d5; --color-border: #d4b896; --color-accent: #b58900; --color-accent-rgb: 181, 137, 0; --color-accent-dark: #7b5e00; --color-accent-light: #e8c84d; --color-text: #073642; --color-text-muted: #586e75; --color-text-on-accent: #ffffff; --color-success: #859900; --color-warning: #cb4b16; --color-danger: #dc322f; --color-nav-bg: #002b36; --color-nav-text: #eee8d5; --color-stats-bg: #eee8d5; --shadow-sm: 0 1px 3px rgba(7,54,66,.10); --shadow-md: 0 4px 12px rgba(7,54,66,.15); --shadow-lg: 0 8px 30px rgba(7,54,66,.22); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 9. NEON CYBER (ultra-dark + neon cyan) ============================================================ */ [data-theme="neon-cyber"] { --color-bg: #030712; --color-surface: #0f172a; --color-surface-alt: #1e293b; --color-border: #164e63; --color-accent: #06b6d4; --color-accent-rgb: 6, 182, 212; --color-accent-dark: #0891b2; --color-accent-light: #67e8f9; --color-text: #ecfdf5; --color-text-muted: #94a3b8; --color-text-on-accent: #030712; --color-success: #4ade80; --color-warning: #facc15; --color-danger: #f43f5e; --color-nav-bg: #030712; --color-nav-text: #ecfdf5; --color-stats-bg: #0f172a; --shadow-sm: 0 1px 3px rgba(0,0,0,.55); --shadow-md: 0 4px 12px rgba(0,0,0,.65); --shadow-lg: 0 8px 30px rgba(6,182,212,.20); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ 10. CLOUD WHITE (minimal white + soft lavender) ============================================================ */ [data-theme="cloud-white"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-alt: #fafafa; --color-border: #ede9ff; --color-accent: #7c3aed; --color-accent-rgb: 124, 58, 237; --color-accent-dark: #5b21b6; --color-accent-light: #c4b5fd; --color-text: #1e293b; --color-text-muted: #64748b; --color-text-on-accent: #ffffff; --color-success: #059669; --color-warning: #d97706; --color-danger: #dc2626; --color-nav-bg: #ffffff; --color-nav-text: #1e293b; --color-stats-bg: #f5f3ff; --shadow-sm: 0 1px 3px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 30px rgba(124,58,237,.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 150ms ease; } /* ============================================================ Theme Preview Swatches (used in Settings theme picker) ============================================================ */ .theme-preview[data-theme-id="midnight-pro"] { background: linear-gradient(135deg, #0f1729 50%, #3b82f6 100%); } .theme-preview[data-theme-id="arctic-light"] { background: linear-gradient(135deg, #eef2f7 50%, #14b8a6 100%); } .theme-preview[data-theme-id="sunset-amber"] { background: linear-gradient(135deg, #fef9f0 50%, #f97316 100%); } .theme-preview[data-theme-id="forest-breeze"] { background: linear-gradient(135deg, #f0faf4 50%, #16a34a 100%); } .theme-preview[data-theme-id="obsidian"] { background: linear-gradient(135deg, #0a0a0f 50%, #a855f7 100%); } .theme-preview[data-theme-id="cherry-blossom"] { background: linear-gradient(135deg, #fff0f6 50%, #e11d48 100%); } .theme-preview[data-theme-id="corporate-blue"] { background: linear-gradient(135deg, #f1f5f9 50%, #1d4ed8 100%); } .theme-preview[data-theme-id="solarized-gold"] { background: linear-gradient(135deg, #fdf6e3 50%, #b58900 100%); } .theme-preview[data-theme-id="neon-cyber"] { background: linear-gradient(135deg, #030712 50%, #06b6d4 100%); } .theme-preview[data-theme-id="cloud-white"] { background: linear-gradient(135deg, #ffffff 50%, #7c3aed 100%); }