/* ============================================================ * FILE: /css/themes.css * DARK REALM: IDLE CONQUEST * Theme System — Alternate Color Schemes * ============================================================ * * This file handles theme switching by overriding CSS custom * properties on the element via [data-theme] attribute. * * All base variables are defined in main.css (Section 0). * This file only provides the OVERRIDES for alternate themes. * * Themes Included: * - [data-theme="dark"] — Default gothic dark (already in main.css) * - [data-theme="light"] — Parchment/warm light mode * - [data-theme="blood"] — Red-tinted event theme * - [data-theme="void"] — Ultra-dark prestige mode * - [data-theme="forest"] — Green nature theme * - [data-theme="ocean"] — Blue abyssal theme * ============================================================ */ /* ============================================================ * THEME: LIGHT (Parchment) * Warm, readable, old-scroll aesthetic * ============================================================ */ html[data-theme="light"] { --bg-primary: #f5f0e8; --bg-secondary: #ede6d8; --bg-tertiary: #e0d8c8; --bg-elevated: #d5ccb8; --bg-surface: #c8bfa8; --bg-overlay: rgba(30, 25, 15, 0.85); --bg-glass: rgba(245, 240, 232, 0.75); --text-primary: #1a1510; --text-secondary: #5a5040; --text-tertiary: #8a8070; --text-disabled: #b0a898; --text-inverse: #f5f0e8; --text-link: #6040a0; --accent-primary: #8b6914; --accent-primary-glow: rgba(139, 105, 20, 0.25); --accent-secondary: #c05030; --success: #3a7a50; --warning: #a07020; --danger: #a03030; --info: #3060a0; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 6px rgba(0, 0, 0, 0.08); } html[data-theme="light"] #top-bar { border-bottom-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] #bottom-bar { border-top-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .nav-btn.active { color: #6b5010; } /* ============================================================ * THEME: BLOOD MOON (Event) * Crimson-drenched, aggressive, limited-time events * ============================================================ */ html[data-theme="blood"] { --bg-primary: #0d0708; --bg-secondary: #150a0c; --bg-tertiary: #200e12; --bg-elevated: #2d1218; --bg-surface: #3a1820; --bg-overlay: rgba(8, 3, 4, 0.92); --text-primary: #f0d8d8; --text-secondary: #c09898; --text-tertiary: #906868; --accent-primary: #d04040; --accent-primary-glow: rgba(208, 64, 64, 0.5); --accent-secondary: #ff6040; --accent-secondary-glow: rgba(255, 96, 64, 0.45); --success: #50a050; --warning: #d09030; --danger: #ff3040; --info: #804060; --rarity-legendary: #ff4040; --rarity-mythic: #ff2040; --rarity-primordial: #ff1040; } html[data-theme="blood"] #loading-screen { background: radial-gradient(ellipse at center, #200a0c 0%, #0d0708 70%); } html[data-theme="blood"] #enemy-sprite.boss { border-color: #ff4040; box-shadow: 0 0 50px rgba(255, 64, 64, 0.5), 0 0 100px rgba(255, 0, 0, 0.3); } html[data-theme="blood"] #enemy-health-bar { background: linear-gradient(to bottom, #ff2020 0%, #c01010 50%, #800808 100%); } /* ============================================================ * THEME: VOID (Prestige Mode) * Ultra-dark, minimal, cosmic horror * ============================================================ */ html[data-theme="void"] { --bg-primary: #020208; --bg-secondary: #050510; --bg-tertiary: #080818; --bg-elevated: #0c0c22; --bg-surface: #10102c; --bg-overlay: rgba(0, 0, 4, 0.95); --text-primary: #c0c0e0; --text-secondary: #706090; --text-tertiary: #484068; --text-disabled: #302848; --accent-primary: #8060c0; --accent-primary-glow: rgba(128, 96, 192, 0.4); --accent-secondary: #6040a0; --accent-secondary-glow: rgba(96, 64, 160, 0.35); --accent-tertiary: #a080e0; --success: #5080a0; --warning: #8060a0; --danger: #604080; --info: #4060a0; --rarity-common: #606080; --rarity-uncommon: #7060a0; --rarity-rare: #8060c0; --rarity-epic: #a070e0; --rarity-legendary: #c080ff; --rarity-mythic: #d0a0ff; --rarity-primordial: #e0c0ff; } html[data-theme="void"] #loading-screen { background: radial-gradient(ellipse at center, #080818 0%, #020208 70%); } html[data-theme="void"] #click-attack-btn { border-color: #8060c0; box-shadow: 0 0 30px rgba(128, 96, 192, 0.3), 0 8px 32px rgba(0, 0, 0, 0.8); } html[data-theme="void"] #click-damage-text { color: #a080e0; } html[data-theme="void"] .nav-btn.active { color: #8060c0; } html[data-theme="void"] .nav-btn.active::before { background: #8060c0; box-shadow: 0 0 8px rgba(128, 96, 192, 0.5); } /* ============================================================ * THEME: FOREST (Nature) * Green, earthy, tranquil * ============================================================ */ html[data-theme="forest"] { --bg-primary: #0a100a; --bg-secondary: #0e180e; --bg-tertiary: #142214; --bg-elevated: #1a2e1a; --bg-surface: #223a22; --text-primary: #d0e0c8; --text-secondary: #90a888; --text-tertiary: #607858; --accent-primary: #50a050; --accent-primary-glow: rgba(80, 160, 80, 0.4); --accent-secondary: #80c060; --accent-secondary-glow: rgba(128, 192, 96, 0.35); --success: #40b040; --warning: #a0a030; --danger: #a04040; --info: #4080a0; --rarity-uncommon: #50b050; --rarity-rare: #409060; --rarity-epic: #60a040; } /* ============================================================ * THEME: OCEAN (Abyssal) * Deep blue, mysterious, aquatic * ============================================================ */ html[data-theme="ocean"] { --bg-primary: #060d14; --bg-secondary: #0a1520; --bg-tertiary: #0e1e30; --bg-elevated: #122840; --bg-surface: #183250; --text-primary: #c0d8f0; --text-secondary: #80a0c0; --text-tertiary: #507090; --accent-primary: #4080c0; --accent-primary-glow: rgba(64, 128, 192, 0.4); --accent-secondary: #40a0d0; --accent-secondary-glow: rgba(64, 160, 208, 0.35); --success: #4080a0; --warning: #809040; --danger: #804060; --info: #3060a0; --rarity-rare: #4080d0; --rarity-epic: #4090c0; } /* ============================================================ * THEME TRANSITION * Smooth fade when switching themes * ============================================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.4s ease-out, color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out !important; } /* ============================================================ * END OF themes.css * File size: ~185 lines * Six complete themes ready for dynamic switching * ============================================================ */