/* * Theme system for Game Score Tracker * * Selected via `data-theme` on (set by the boot snippet + picker in * index.html). Each theme overrides the same CSS custom properties the pages * already consume, so layout and markup stay untouched. * * Themes: * lavender - default identity (purple/teal), light + OS dark variant * arcade - decorative dark surfaces with vivid neon accents (one palette) * paper - warm cream/ink scorecard, light + OS dark variant * forest - calm deep green, light + OS dark variant * * html[data-theme="..."] (specificity 0,1,1) wins over each page's inline * :root and `@media (prefers-color-scheme: dark) :root` (0,1,0) blocks. */ /* ---------- Lavender (default) ---------- */ html[data-theme="lavender"] { --primary-color: #3182ce; --success-color: #38a169; --danger-color: #e53e3e; --warning-color: #dd6b20; --purple-color: #805ad5; --light-gray: #f5f5f5; --text-dark: #333; --text-light: #666; --border-color: #e2e8f0; --bg-white: #ffffff; --card-bg: #ffffff; --input-bg: #f7fafc; --settings-bg: #ffffff; --player-item-bg: #f7fafc; --score-row-bg: #ffffff; --game-card-bg: #f7fafc; --gradient-start: #8884d8; --gradient-end: #82ca9d; --chip-bg: #edf2f7; --chip-hover: #e2e8f0; --input-group-bg: #f0f4f8; --soft-bg: #f7fafc; --chart-bar-end: #2563eb; --stats-grad-start: #3182ce; --stats-grad-end: #667eea; --winner-bg: linear-gradient(45deg, #fef9c3, #fde68a); --winner-border: #f59e0b; --winner-text: #92400e; --summary-bg: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%); --summary-border: #9ae6b4; --tournament-bg: #fffaf0; --tournament-border: #fbd38d; } @media (prefers-color-scheme: dark) { html[data-theme="lavender"] { --light-gray: #1a1a2e; --text-dark: #e2e8f0; --text-light: #a0aec0; --border-color: #374151; --bg-white: #1f2937; --card-bg: #1f2937; --input-bg: #4b5563; --settings-bg: #111827; --player-item-bg: #374151; --score-row-bg: #374151; --game-card-bg: #374151; --gradient-start: #4a4494; --gradient-end: #3d7a4d; --chip-bg: #374151; --chip-hover: #4b5563; --input-group-bg: #4b5563; --soft-bg: #374151; --chart-bar-end: #1d4ed8; --stats-grad-start: #60a5fa; --stats-grad-end: #a78bfa; --winner-bg: linear-gradient(45deg, #92400e, #78350f); --winner-border: #b45309; --winner-text: #fef3c7; --summary-bg: linear-gradient(135deg, #14532d 0%, #166534 100%); --summary-border: #15803d; --tournament-bg: #374151; --tournament-border: #4b5563; } } /* ---------- Arcade (decorative dark, both OS modes) ---------- */ html[data-theme="arcade"] { --primary-color: #4361ee; --success-color: #2a9d8f; --danger-color: #e63946; --warning-color: #e9a200; --purple-color: #9d4edd; --light-gray: #0e0f24; --text-dark: #e8e9ff; --text-light: #a6a7d4; --border-color: #34356b; --bg-white: #15162e; --card-bg: #15162e; --input-bg: #23244a; --settings-bg: #0e0f24; --player-item-bg: #1e1f42; --score-row-bg: #1e1f42; --game-card-bg: #1e1f42; --gradient-start: #3a0ca3; --gradient-end: #7209b7; --chip-bg: #23244a; --chip-hover: #2e2f5c; --input-group-bg: #23244a; --soft-bg: #1e1f42; --chart-bar-end: #7209b7; --stats-grad-start: #4cc9f0; --stats-grad-end: #f72585; --winner-bg: linear-gradient(45deg, #3a0ca3, #7209b7); --winner-border: #f72585; --winner-text: #ffe066; --summary-bg: linear-gradient(135deg, #1b1c3a 0%, #2a2c5a 100%); --summary-border: #34356b; --tournament-bg: #1b1c3a; --tournament-border: #34356b; } /* ---------- Paper (warm cream / ink) ---------- */ html[data-theme="paper"] { --primary-color: #b5651d; --success-color: #5a8f3c; --danger-color: #c1432e; --warning-color: #ca7e10; --purple-color: #9c6644; --light-gray: #f5edd8; --text-dark: #3a2e1f; --text-light: #7a6a52; --border-color: #e6d8b5; --bg-white: #fffdf7; --card-bg: #fffdf7; --input-bg: #f5edd8; --settings-bg: #faf4e6; --player-item-bg: #faf4e6; --score-row-bg: #fffdf7; --game-card-bg: #faf4e6; --gradient-start: #f4a261; --gradient-end: #e9c46a; --chip-bg: #f0e6cc; --chip-hover: #e8dab5; --input-group-bg: #f0e6cc; --soft-bg: #faf4e6; --chart-bar-end: #8a4d12; --stats-grad-start: #b5651d; --stats-grad-end: #ca7e10; --winner-bg: linear-gradient(45deg, #ffe8b0, #f4c869); --winner-border: #ca7e10; --winner-text: #6b4310; --summary-bg: linear-gradient(135deg, #eef6e3 0%, #d6e8bf 100%); --summary-border: #a9c98a; --tournament-bg: #fdf3e0; --tournament-border: #e6c98a; } @media (prefers-color-scheme: dark) { html[data-theme="paper"] { --primary-color: #d99a5b; --success-color: #8fbf6a; --danger-color: #e07a5f; --warning-color: #e0b050; --purple-color: #c08a6a; --light-gray: #211b13; --text-dark: #f0e6d2; --text-light: #c0b095; --border-color: #4a3f2d; --bg-white: #2b241b; --card-bg: #2b241b; --input-bg: #3d3324; --settings-bg: #211b13; --player-item-bg: #352c20; --score-row-bg: #352c20; --game-card-bg: #352c20; --gradient-start: #5c4a2e; --gradient-end: #6b4a35; --chip-bg: #3d3324; --chip-hover: #4a3f2d; --input-group-bg: #3d3324; --soft-bg: #352c20; --chart-bar-end: #b5742e; --stats-grad-start: #e0b050; --stats-grad-end: #d99a5b; --winner-bg: linear-gradient(45deg, #5c4423, #3d2e16); --winner-border: #b58a3c; --winner-text: #ffe9b8; --summary-bg: linear-gradient(135deg, #2c3a1f 0%, #3a4a28 100%); --summary-border: #4a5c34; --tournament-bg: #352c20; --tournament-border: #4a3f2d; } } /* ---------- Forest (deep green calm) ---------- */ html[data-theme="forest"] { --primary-color: #2d6a4f; --success-color: #40916c; --danger-color: #bc4749; --warning-color: #bc6c25; --purple-color: #5f7470; --light-gray: #eef7f1; --text-dark: #1b3a2b; --text-light: #51735f; --border-color: #cfe8da; --bg-white: #ffffff; --card-bg: #ffffff; --input-bg: #eef7f1; --settings-bg: #f3faf6; --player-item-bg: #ecf7f0; --score-row-bg: #ffffff; --game-card-bg: #ecf7f0; --gradient-start: #2d6a4f; --gradient-end: #74c69d; --chip-bg: #e3f2ea; --chip-hover: #d2ebdd; --input-group-bg: #e3f2ea; --soft-bg: #f3faf6; --chart-bar-end: #1b4332; --stats-grad-start: #2d6a4f; --stats-grad-end: #40916c; --winner-bg: linear-gradient(45deg, #d8f3dc, #95d5b2); --winner-border: #40916c; --winner-text: #1b4332; --summary-bg: linear-gradient(135deg, #ecf7f0 0%, #c7ebd5 100%); --summary-border: #95d5b2; --tournament-bg: #f0f9f4; --tournament-border: #b7e4c7; } @media (prefers-color-scheme: dark) { html[data-theme="forest"] { --primary-color: #40916c; --success-color: #52b788; --danger-color: #e5707a; --warning-color: #d68c45; --purple-color: #76928c; --light-gray: #0f1c15; --text-dark: #d8f3e3; --text-light: #95c2a8; --border-color: #2f5641; --bg-white: #14241c; --card-bg: #14241c; --input-bg: #24412f; --settings-bg: #0f1c15; --player-item-bg: #1d3528; --score-row-bg: #1d3528; --game-card-bg: #1d3528; --gradient-start: #1b4332; --gradient-end: #2d6a4f; --chip-bg: #24412f; --chip-hover: #2f5641; --input-group-bg: #24412f; --soft-bg: #1d3528; --chart-bar-end: #2d6a4f; --stats-grad-start: #74c69d; --stats-grad-end: #52b788; --winner-bg: linear-gradient(45deg, #1b4332, #2d6a4f); --winner-border: #52b788; --winner-text: #d8f3dc; --summary-bg: linear-gradient(135deg, #16301f 0%, #1f4a30 100%); --summary-border: #2d6a4f; --tournament-bg: #1d3528; --tournament-border: #2f5641; } }