/* ============================================================================ THEME SYSTEM - Easy Color Scheme Switching ============================================================================ How to use: 1. Add data-theme attribute to tag 2. Set value to any theme name: "light", "dark", "medieval", "cyberpunk", "neon", "forest" 3. Example: JavaScript usage: document.body.setAttribute('data-theme', 'cyberpunk'); ============================================================================ */ /* ============================================================================ LIGHT THEME (Default) - Mango Tango Orange Theme ============================================================================ */ :root, [data-theme="light"] { /* Brand Colors - Mango Tango Orange */ --primary: #ff8200; --primary-dark: #e67700; --secondary: #ff4757; --accent: #ffa502; /* Semantic Colors */ --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; /* Background Colors */ --bg: #f8fafc; --bg-gradient-1: #ff8200; --bg-gradient-2: #ff4757; --panel-bg: rgba(255, 255, 255, 0.95); --card-bg: #ffffff; --input-bg: #ffffff; /* Text Colors */ --text-primary: #1e293b; --text-secondary: #64748b; --dark: #1e293b; --light: #f8fafc; --gray: #64748b; /* Border & Shadow */ --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Canvas */ --canvas-opacity: 0.3; } /* ============================================================================ DARK THEME ============================================================================ */ [data-theme="dark"] { /* Brand Colors */ --primary: #818cf8; --primary-dark: #6366f1; --secondary: #a78bfa; --accent: #34d399; /* Semantic Colors */ --success: #34d399; --danger: #f87171; --warning: #fbbf24; --info: #60a5fa; /* Background Colors */ --bg: #0f172a; --bg-gradient-1: #1e293b; --bg-gradient-2: #334155; --panel-bg: rgba(30, 41, 59, 0.95); --card-bg: #1e293b; --input-bg: #334155; /* Text Colors */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --dark: #f1f5f9; --light: #1e293b; --gray: #94a3b8; /* Border & Shadow */ --border: #334155; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); /* Canvas */ --canvas-opacity: 0.15; } /* ============================================================================ MEDIEVAL THEME ============================================================================ */ [data-theme="medieval"] { /* Brand Colors - Earthy, aged tones */ --primary: #8b6914; --primary-dark: #6b5110; --secondary: #a0522d; --accent: #228b22; /* Semantic Colors */ --success: #228b22; --danger: #8b0000; --warning: #daa520; --info: #4682b4; /* Background Colors - Parchment and stone */ --bg: #2b2520; --bg-gradient-1: #3d3529; --bg-gradient-2: #2b2520; --panel-bg: rgba(61, 53, 41, 0.95); --card-bg: #3d3529; --input-bg: #4a4030; /* Text Colors - Ink on parchment */ --text-primary: #f5deb3; --text-secondary: #d2b48c; --dark: #f5deb3; --light: #2b2520; --gray: #a0826d; /* Border & Shadow */ --border: #5d4e37; --shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4); /* Canvas */ --canvas-opacity: 0.1; } /* ============================================================================ CYBERPUNK THEME ============================================================================ */ [data-theme="cyberpunk"] { /* Brand Colors - Neon and electric */ --primary: #ff00ff; --primary-dark: #cc00cc; --secondary: #00ffff; --accent: #ffff00; /* Semantic Colors */ --success: #00ff00; --danger: #ff0066; --warning: #ff9900; --info: #0099ff; /* Background Colors - Dark tech */ --bg: #0a0a0f; --bg-gradient-1: #1a0a1f; --bg-gradient-2: #0f0a1a; --panel-bg: rgba(20, 10, 30, 0.95); --card-bg: #1a0a2e; --input-bg: #16213e; /* Text Colors - Bright neon */ --text-primary: #00ffff; --text-secondary: #ff00ff; --dark: #00ffff; --light: #0a0a0f; --gray: #9933ff; /* Border & Shadow */ --border: #ff00ff; --shadow: 0 0 10px rgba(255, 0, 255, 0.3), 0 0 20px rgba(0, 255, 255, 0.2); --shadow-lg: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3); /* Canvas */ --canvas-opacity: 0.2; } /* ============================================================================ NEON THEME ============================================================================ */ [data-theme="neon"] { /* Brand Colors - Vibrant neon */ --primary: #00ff41; --primary-dark: #00cc33; --secondary: #ff0080; --accent: #00d9ff; /* Semantic Colors */ --success: #00ff41; --danger: #ff0055; --warning: #ffbb00; --info: #00d9ff; /* Background Colors - Dark with glow */ --bg: #0d0d0d; --bg-gradient-1: #1a1a2e; --bg-gradient-2: #0f0f1e; --panel-bg: rgba(26, 26, 46, 0.95); --card-bg: #1a1a2e; --input-bg: #16162e; /* Text Colors - Bright neon glow */ --text-primary: #00ff41; --text-secondary: #00d9ff; --dark: #00ff41; --light: #0d0d0d; --gray: #00d9ff; /* Border & Shadow */ --border: #00ff41; --shadow: 0 0 15px rgba(0, 255, 65, 0.4), 0 0 30px rgba(255, 0, 128, 0.2); --shadow-lg: 0 0 30px rgba(0, 255, 65, 0.6), 0 0 60px rgba(255, 0, 128, 0.4); /* Canvas */ --canvas-opacity: 0.25; } /* ============================================================================ FOREST THEME ============================================================================ */ [data-theme="forest"] { /* Brand Colors - Nature inspired */ --primary: #2d5016; --primary-dark: #1e3510; --secondary: #4a7c59; --accent: #7cb342; /* Semantic Colors */ --success: #7cb342; --danger: #c62828; --warning: #f9a825; --info: #4e79a7; /* Background Colors - Forest ambiance */ --bg: #1a2f1a; --bg-gradient-1: #2d4a2d; --bg-gradient-2: #1e3a1e; --panel-bg: rgba(45, 74, 45, 0.95); --card-bg: #2d4a2d; --input-bg: #3a5a3a; /* Text Colors - Natural tones */ --text-primary: #e8f5e9; --text-secondary: #a5d6a7; --dark: #e8f5e9; --light: #1a2f1a; --gray: #81c784; /* Border & Shadow */ --border: #4a7c59; --shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3); /* Canvas */ --canvas-opacity: 0.2; } /* ============================================================================ OCEAN THEME ============================================================================ */ [data-theme="ocean"] { /* Brand Colors - Deep sea */ --primary: #006994; --primary-dark: #004d6d; --secondary: #0097a7; --accent: #26c6da; /* Semantic Colors */ --success: #26a69a; --danger: #e53935; --warning: #ff9800; --info: #29b6f6; /* Background Colors - Ocean depths */ --bg: #0a1929; --bg-gradient-1: #1e3a5f; --bg-gradient-2: #0d2742; --panel-bg: rgba(30, 58, 95, 0.95); --card-bg: #1e3a5f; --input-bg: #2c4f7c; /* Text Colors - Aqua tones */ --text-primary: #e1f5fe; --text-secondary: #81d4fa; --dark: #e1f5fe; --light: #0a1929; --gray: #4fc3f7; /* Border & Shadow */ --border: #0097a7; --shadow: 0 4px 8px rgba(0, 151, 167, 0.2), 0 2px 4px rgba(0, 105, 148, 0.3); --shadow-lg: 0 10px 20px rgba(0, 151, 167, 0.3), 0 4px 8px rgba(0, 105, 148, 0.4); /* Canvas */ --canvas-opacity: 0.2; } /* ============================================================================ SUNSET THEME ============================================================================ */ [data-theme="sunset"] { /* Brand Colors - Warm sunset */ --primary: #ff6f00; --primary-dark: #e65100; --secondary: #ff5252; --accent: #ffd740; /* Semantic Colors */ --success: #66bb6a; --danger: #ef5350; --warning: #ffb300; --info: #42a5f5; /* Background Colors - Twilight */ --bg: #1a0f2e; --bg-gradient-1: #3d2463; --bg-gradient-2: #2e1a47; --panel-bg: rgba(61, 36, 99, 0.95); --card-bg: #3d2463; --input-bg: #4e3178; /* Text Colors - Warm glow */ --text-primary: #fff3e0; --text-secondary: #ffcc80; --dark: #fff3e0; --light: #1a0f2e; --gray: #ffab91; /* Border & Shadow */ --border: #ff6f00; --shadow: 0 4px 8px rgba(255, 111, 0, 0.2), 0 2px 4px rgba(255, 82, 82, 0.2); --shadow-lg: 0 10px 20px rgba(255, 111, 0, 0.3), 0 4px 8px rgba(255, 82, 82, 0.3); /* Canvas */ --canvas-opacity: 0.2; } /* ============================================================================ MONOCHROME THEME ============================================================================ */ [data-theme="monochrome"] { /* Brand Colors - Grayscale */ --primary: #424242; --primary-dark: #212121; --secondary: #616161; --accent: #757575; /* Semantic Colors */ --success: #616161; --danger: #424242; --warning: #757575; --info: #616161; /* Background Colors - Pure grayscale */ --bg: #fafafa; --bg-gradient-1: #e0e0e0; --bg-gradient-2: #eeeeee; --panel-bg: rgba(255, 255, 255, 0.95); --card-bg: #ffffff; --input-bg: #f5f5f5; /* Text Colors - Black and white */ --text-primary: #212121; --text-secondary: #757575; --dark: #212121; --light: #fafafa; --gray: #9e9e9e; /* Border & Shadow */ --border: #e0e0e0; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Canvas */ --canvas-opacity: 0.1; } /* ============================================================================ RETRO THEME ============================================================================ */ [data-theme="retro"] { /* Brand Colors - 80s inspired */ --primary: #ff6b9d; --primary-dark: #e85d8e; --secondary: #ffa07a; --accent: #98d8c8; /* Semantic Colors */ --success: #98d8c8; --danger: #ff6b9d; --warning: #ffd700; --info: #87ceeb; /* Background Colors - Retro vibes */ --bg: #2d132c; --bg-gradient-1: #522546; --bg-gradient-2: #3b1f3a; --panel-bg: rgba(82, 37, 70, 0.95); --card-bg: #522546; --input-bg: #6b3058; /* Text Colors - Pastel */ --text-primary: #fff5f7; --text-secondary: #ffb3d9; --dark: #fff5f7; --light: #2d132c; --gray: #e8a0bf; /* Border & Shadow */ --border: #ff6b9d; --shadow: 0 4px 8px rgba(255, 107, 157, 0.3), 0 2px 4px rgba(255, 160, 122, 0.2); --shadow-lg: 0 10px 20px rgba(255, 107, 157, 0.4), 0 4px 8px rgba(255, 160, 122, 0.3); /* Canvas */ --canvas-opacity: 0.15; } /* ============================================================================ THEME TRANSITION ============================================================================ */ body { transition: background-color 0.5s ease, color 0.5s ease; } /* All elements that use theme colors get smooth transitions */ * { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* Prevent transitions on page load */ body.no-transition * { transition: none !important; }