/* * themes.css — Coin Catalog v2 * * All 12 built-in themes + 3 custom slots defined as CSS custom properties. * Every color in the app comes from these variables — never hard-coded. * * Variable reference: * --color-bg-body Page background * --color-bg-card Card / panel background * --color-text-main Primary text * --color-text-muted Secondary / helper text * --color-border Standard border * --color-border-light Subtle divider * --color-accent Brand color (buttons, links, highlights) * --color-accent-text Text on accent-colored backgrounds * --color-header-bg Sticky header background * --color-header-text Sticky header text * --color-accord-bg Accordion / sub-panel background * --color-finance-bg Finance grid item background */ /* ========================================================================= Dark (default) ========================================================================= */ [data-theme="dark"] { --color-bg-body: #121212; --color-bg-card: #1e1e1e; --color-text-main: #f8f9fa; --color-text-muted: #adb5bd; --color-border: #495057; --color-border-light: #343a40; --color-accent: #60a5fa; --color-accent-text: #ffffff; --color-header-bg: #000000; --color-header-text: #f8f9fa; --color-accord-bg: #2b3035; --color-finance-bg: #212529; } /* ========================================================================= Light ========================================================================= */ [data-theme="light"] { --color-bg-body: #f4f6f8; --color-bg-card: #ffffff; --color-text-main: #212529; --color-text-muted: #6c757d; --color-border: #dee2e6; --color-border-light: #e9ecef; --color-accent: #0d6efd; --color-accent-text: #ffffff; --color-header-bg: #212529; --color-header-text: #ffffff; --color-accord-bg: #f8f9fa; --color-finance-bg: #f0f2f5; } /* ========================================================================= Midnight (deep blue-black) ========================================================================= */ [data-theme="midnight"] { --color-bg-body: #070d1a; --color-bg-card: #0e1626; --color-text-main: #dfe8f5; --color-text-muted: #8b9bb5; --color-border: #2f4260; --color-border-light: #16213a; --color-accent: #6ea8fe; --color-accent-text: #061020; --color-header-bg: #04080f; --color-header-text: #dfe8f5; --color-accord-bg: #16223a; --color-finance-bg: #0b1220; } /* ========================================================================= Gold ========================================================================= */ /* ========================================================================= Copper ========================================================================= */ [data-theme="copper"] { --color-bg-body: #241a15; --color-bg-card: #33251d; --color-text-main: #f8e6da; --color-text-muted: #dbb49e; --color-border: #c07048; --color-border-light: #65402e; --color-accent: #e08a45; --color-accent-text: #1a0e08; --color-header-bg: #170f0b; --color-header-text: #f8e6da; --color-accord-bg: #4a3226; --color-finance-bg: #2c1e16; } /* ========================================================================= Ocean ========================================================================= */ [data-theme="ocean"] { --color-bg-body: #0c1929; --color-bg-card: #132840; --color-text-main: #d4e8f5; --color-text-muted: #8ab4d0; --color-border: #2d6a8a; --color-border-light: #1a3d55; --color-accent: #5eb8d4; --color-accent-text: #082030; --color-header-bg: #081420; --color-header-text: #d4e8f5; --color-accord-bg: #1a3550; --color-finance-bg: #0f2030; } /* ========================================================================= Deep Forest ========================================================================= */ [data-theme="forest"] { --color-bg-body: #0f1c15; --color-bg-card: #172e22; --color-text-main: #e0f2e9; --color-text-muted: #86b099; --color-border: #2b593f; --color-border-light: #1f3b2a; --color-accent: #4ade80; --color-accent-text: #000000; --color-header-bg: #080f0b; --color-header-text: #e0f2e9; --color-accord-bg: #1e402d; --color-finance-bg: #122419; } /* ========================================================================= Silver ========================================================================= */ [data-theme="silver"] { --color-bg-body: #e2e8f0; --color-bg-card: #ffffff; --color-text-main: #334155; --color-text-muted: #64748b; --color-border: #cbd5e1; --color-border-light: #f1f5f9; --color-accent: #475569; --color-accent-text: #ffffff; --color-header-bg: #475569; --color-header-text: #f8fafc; --color-accord-bg: #f8fafc; --color-finance-bg: #f1f5f9; } /* ========================================================================= Aged Paper ========================================================================= */ [data-theme="paper"] { --color-bg-body: #f5f0e8; --color-bg-card: #fefcf7; --color-text-main: #2c2416; --color-text-muted: #7a6a52; --color-border: #c8b89a; --color-border-light: #e8dece; --color-accent: #8b5e3c; --color-accent-text: #fefcf7; --color-header-bg: #3d2b1f; --color-header-text: #f5f0e8; --color-accord-bg: #ede6d8; --color-finance-bg: #e8dece; } /* ========================================================================= Matrix ========================================================================= */ [data-theme="matrix"] { --color-bg-body: #030503; --color-bg-card: #0a1009; --color-text-main: #a3d4a5; --color-text-muted: #5d8a60; --color-border: #2b552f; --color-border-light: #132216; --color-accent: #3fc261; --color-accent-text: #031604; --color-header-bg: #010201; --color-header-text: #a3d4a5; --color-accord-bg: #112011; --color-finance-bg: #070c07; } /* ========================================================================= Cyberpunk ========================================================================= */ [data-theme="cyberpunk"] { --color-bg-body: #140d1a; --color-bg-card: #1d1426; --color-text-main: #eadcf0; --color-text-muted: #a98bb5; --color-border: #a7548f; --color-border-light: #2d1f36; --color-accent: #b85ca0; --color-accent-text: #160b1d; --color-header-bg: #0c0711; --color-header-text: #eadcf0; --color-accord-bg: #271a30; --color-finance-bg: #180f1d; } [data-theme="cyberpunk"] .card { border-color: var(--color-neon-pink) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--color-neon-pink) 50%, transparent), 0 0 30px color-mix(in srgb, var(--color-neon-pink) 20%, transparent) !important; } [data-theme="cyberpunk"] #app-header { border-bottom-color: var(--color-neon-cyan) !important; box-shadow: 0 2px 20px color-mix(in srgb, var(--color-neon-cyan) 40%, transparent) !important; } /* ========================================================================= Neon ========================================================================= */ [data-theme="neon"] { --color-bg-body: #0a1418; --color-bg-card: #101f26; --color-text-main: #dceff4; --color-text-muted: #83a6ae; --color-border: rgba(255, 149, 0, 0.5); --color-border-light: #16303a; --color-accent: #ff9500; --color-accent-text: #1c0f00; --color-header-bg: #050c0f; --color-header-text: #dceff4; --color-accord-bg: #142c35; --color-finance-bg: #0b171c; } [data-theme="neon"] #app-header { border-bottom-color: var(--color-neon-blue) !important; box-shadow: 0 2px 20px color-mix(in srgb, var(--color-neon-blue) 40%, transparent) !important; } /* ========================================================================= Custom theme slots (colors injected by themes.js via CSS variables) Each slot has its OWN variable namespace so changing one does NOT affect the others. ========================================================================= */ /* ========================================================================= Violet (new) ========================================================================= */ [data-theme="violet"] { --color-bg-body: #121020; --color-bg-card: #1a1730; --color-text-main: #e6e1f5; --color-text-muted: #9c92c0; --color-border: #62599b; --color-border-light: #26203e; --color-accent: #8f82d9; --color-accent-text: #120e26; --color-header-bg: #0b0a15; --color-header-text: #e6e1f5; --color-accord-bg: #242042; --color-finance-bg: #151325; } /* ========================================================================= Sunset (new) ========================================================================= */ /* ========================================================================= Film Noir (new) ========================================================================= */ [data-theme="noir"] { --color-bg-body: #0a0a0a; --color-bg-card: #1a1a1a; --color-text-main: #ffffff; --color-text-muted: #b8b8b8; --color-border: #808080; --color-border-light: #3a3a3a; --color-accent: #c9c9c9; --color-accent-text: #0a0a0a; --color-header-bg: #050505; --color-header-text: #ffffff; --color-accord-bg: #262626; --color-finance-bg: #141414; } [data-theme="custom1"] { --color-bg-body: var(--custom1-bg-body, #1a1a2e); --color-bg-card: var(--custom1-bg-card, #16213e); --color-text-main: var(--custom1-text-main, #e0e0e0); --color-text-muted: var(--custom1-text-muted, #a0a0a0); --color-border: var(--custom1-border, #0f3460); --color-border-light: var(--custom1-border-light, #0a2a4a); --color-accent: var(--custom1-accent, #e94560); --color-accent-text: var(--custom1-accent-text, #ffffff); --color-header-bg: var(--custom1-header-bg, #0f3460); --color-header-text: var(--custom1-header-text, #ffffff); --color-accord-bg: var(--custom1-accord-bg, #0f3460); --color-finance-bg: var(--custom1-finance-bg, #0a2a4a); } [data-theme="custom2"] { --color-bg-body: var(--custom2-bg-body, #1a1a2e); --color-bg-card: var(--custom2-bg-card, #16213e); --color-text-main: var(--custom2-text-main, #e0e0e0); --color-text-muted: var(--custom2-text-muted, #a0a0a0); --color-border: var(--custom2-border, #0f3460); --color-border-light: var(--custom2-border-light, #0a2a4a); --color-accent: var(--custom2-accent, #e94560); --color-accent-text: var(--custom2-accent-text, #ffffff); --color-header-bg: var(--custom2-header-bg, #0f3460); --color-header-text: var(--custom2-header-text, #ffffff); --color-accord-bg: var(--custom2-accord-bg, #0f3460); --color-finance-bg: var(--custom2-finance-bg, #0a2a4a); } [data-theme="custom3"] { --color-bg-body: var(--custom3-bg-body, #1a1a2e); --color-bg-card: var(--custom3-bg-card, #16213e); --color-text-main: var(--custom3-text-main, #e0e0e0); --color-text-muted: var(--custom3-text-muted, #a0a0a0); --color-border: var(--custom3-border, #0f3460); --color-border-light: var(--custom3-border-light, #0a2a4a); --color-accent: var(--custom3-accent, #e94560); --color-accent-text: var(--custom3-accent-text, #ffffff); --color-header-bg: var(--custom3-header-bg, #0f3460); --color-header-text: var(--custom3-header-text, #ffffff); --color-accord-bg: var(--custom3-accord-bg, #0f3460); --color-finance-bg: var(--custom3-finance-bg, #0a2a4a); }