/* * app/static/css/themes.css * 5 theme presets selectable from Admin > Branding. * The active theme class is applied to * All themes override only the color tokens — layout/spacing unchanged. */ /* ── Theme 1: Crimson Classic (default — CNN/NDTV bold red) ── */ [data-theme="crimson"] { --color-primary: #d40000; --color-primary-dark: #a30000; --color-primary-light: #ff1a1a; --color-secondary: #1a1a2e; --color-accent: #e8a020; --color-ticker-bg: #d40000; --color-category-tag: #d40000; --color-surface-dark: #111827; } /* ── Theme 2: Midnight Blue (BBC/Reuters cool professional) ── */ [data-theme="midnight"] { --color-primary: #1565c0; --color-primary-dark: #0d47a1; --color-primary-light: #1976d2; --color-secondary: #0a0e1a; --color-accent: #ffc107; --color-ticker-bg: #1565c0; --color-category-tag: #1565c0; --color-surface-dark: #0a0e1a; } /* ── Theme 3: Forest Green (nature/sustainability focus) ── */ [data-theme="forest"] { --color-primary: #2e7d32; --color-primary-dark: #1b5e20; --color-primary-light: #388e3c; --color-secondary: #0f1f10; --color-accent: #f9a825; --color-ticker-bg: #2e7d32; --color-category-tag: #2e7d32; --color-surface-dark: #0f1f10; } /* ── Theme 4: Saffron (Indian national pride — saffron/white/green) ── */ [data-theme="saffron"] { --color-primary: #e65100; --color-primary-dark: #bf360c; --color-primary-light: #f4511e; --color-secondary: #1a0a00; --color-accent: #43a047; --color-ticker-bg: #e65100; --color-category-tag: #e65100; --color-surface-dark: #1a0a00; } /* ── Theme 5: Dark Mode (modern dark newsroom) ── */ [data-theme="dark"] { --color-primary: #ef5350; --color-primary-dark: #c62828; --color-primary-light: #ff7961; --color-secondary: #1c1c1c; --color-accent: #ffd54f; --color-surface: #121212; --color-surface-alt: #1e1e1e; --color-surface-dark: #0a0a0a; --color-text: #e0e0e0; --color-text-muted: #9e9e9e; --color-text-inverse: #121212; --color-border: #2c2c2c; --color-border-dark: #3a3a3a; --color-ticker-bg: #ef5350; --color-category-tag: #ef5350; --color-card-hover: #1e1e1e; }