/* ============================================================ D4W.XYZ — Theme Definitions Each theme defines the full CSS variable set on an element carrying the matching data-theme attribute (set on ). ============================================================ */ [data-theme="yellow_gray"] { --bg-primary: #2c2c2c; --bg-secondary: #363636; --bg-tertiary: #404040; --bg-elevated: #484848; --accent-primary: #E8F23D; --accent-secondary: #C9D62E; --accent-glow: rgba(232, 242, 61, 0.15); --text-primary: #F0F0F0; --text-secondary: #AAAAAA; --text-muted: #666666; --border-color: #555555; --border-accent: #E8F23D; --button-bg: #565656; --button-hover: #666666; --piano-white-key: #E8E8E8; --piano-black-key: #222222; --meter-low: #5CB85C; --meter-mid: #F5C842; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.5); --window-titlebar-bg: #3a3a3a; --window-border: #555555; } [data-theme="dark_blue"] { --bg-primary: #1a1f2e; --bg-secondary: #232940; --bg-tertiary: #2c3450; --bg-elevated: #343d5c; --accent-primary: #4A9EFF; --accent-secondary: #2E7FE0; --accent-glow: rgba(74, 158, 255, 0.15); --text-primary: #F0F4FF; --text-secondary: #9AAACC; --text-muted: #5A6788; --border-color: #3A4566; --border-accent: #4A9EFF; --button-bg: #3F4A6E; --button-hover: #4B5780; --piano-white-key: #E8ECF8; --piano-black-key: #1A1F2E; --meter-low: #5CB85C; --meter-mid: #4A9EFF; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.6); --window-titlebar-bg: #232940; --window-border: #3A4566; } [data-theme="green_dark"] { --bg-primary: #1a2a1a; --bg-secondary: #213421; --bg-tertiary: #2a402a; --bg-elevated: #334d33; --accent-primary: #4CAF50; --accent-secondary: #3D8C40; --accent-glow: rgba(76, 175, 80, 0.15); --text-primary: #EFF5EF; --text-secondary: #9DBB9D; --text-muted: #5C7A5C; --border-color: #3A4F3A; --border-accent: #4CAF50; --button-bg: #3D5E3D; --button-hover: #486F48; --piano-white-key: #E8F0E8; --piano-black-key: #1A2A1A; --meter-low: #4CAF50; --meter-mid: #F5C842; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.6); --window-titlebar-bg: #213421; --window-border: #3A4F3A; } [data-theme="purple_dark"] { --bg-primary: #1e1a2e; --bg-secondary: #272140; --bg-tertiary: #322a50; --bg-elevated: #3d335f; --accent-primary: #9B59FF; --accent-secondary: #7D3FE0; --accent-glow: rgba(155, 89, 255, 0.15); --text-primary: #F2EFFF; --text-secondary: #B3A6D9; --text-muted: #6C5F8A; --border-color: #463A66; --border-accent: #9B59FF; --button-bg: #493E70; --button-hover: #554981; --piano-white-key: #ECE8F8; --piano-black-key: #1E1A2E; --meter-low: #5CB85C; --meter-mid: #9B59FF; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.6); --window-titlebar-bg: #272140; --window-border: #463A66; } [data-theme="ember"] { --bg-primary: #2B2624; --bg-secondary: #35302C; --bg-tertiary: #403835; --bg-elevated: #4A4140; --accent-primary: #FF6B1A; --accent-secondary: #E0551A; --accent-glow: rgba(255, 107, 26, 0.18); --text-primary: #F5EDE8; --text-secondary: #BFA89C; --text-muted: #7A6A62; --border-color: #574E49; --border-accent: #FF6B1A; --button-bg: #4A4140; --button-hover: #5A5050; --piano-white-key: #F0E6E0; --piano-black-key: #221E1C; --meter-low: #8BC34A; --meter-mid: #F5C842; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.6); --window-titlebar-bg: #35302C; --window-border: #574E49; } /* Same orange accent as ember, but a much darker, near-black brownish gray. */ [data-theme="magma"] { --bg-primary: #18120F; --bg-secondary: #1F1714; --bg-tertiary: #281E19; --bg-elevated: #322620; --accent-primary: #FF6B1A; --accent-secondary: #E0551A; --accent-glow: rgba(255, 107, 26, 0.18); --text-primary: #F0E2DA; --text-secondary: #A38B7E; --text-muted: #6B5849; --border-color: #3A2C24; --border-accent: #FF6B1A; --button-bg: #2C211B; --button-hover: #3A2C24; --piano-white-key: #F0E2DA; --piano-black-key: #110C09; --meter-low: #8BC34A; --meter-mid: #F5C842; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.7); --window-titlebar-bg: #1F1714; --window-border: #3A2C24; } [data-theme="pawdaw"] { --bg-primary: #3E2F26; --bg-secondary: #4A3A2F; --bg-tertiary: #573F30; --bg-elevated: #63483A; --accent-primary: #E8A86C; --accent-secondary: #D4905A; --accent-glow: rgba(232, 168, 108, 0.18); --text-primary: #F5E6D8; --text-secondary: #C9A98C; --text-muted: #8A6F5C; --border-color: #6B5042; --border-accent: #E8A86C; --button-bg: #5A4536; --button-hover: #6B5444; --piano-white-key: #F5E6D8; --piano-black-key: #2A1F18; --meter-low: #8BC34A; --meter-mid: #E8A86C; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.5); --window-titlebar-bg: #4A3A2F; --window-border: #6B5042; } /* Darker than navy, lighter than black — a deep midnight blue. */ [data-theme="midnight"] { --bg-primary: #0D1220; --bg-secondary: #131A2E; --bg-tertiary: #1B2438; --bg-elevated: #232E47; --accent-primary: #5B7FFF; --accent-secondary: #4566DB; --accent-glow: rgba(91, 127, 255, 0.18); --text-primary: #E8ECFF; --text-secondary: #8C9BC4; --text-muted: #4F5C7D; --border-color: #2A3550; --border-accent: #5B7FFF; --button-bg: #1F2A42; --button-hover: #2A3650; --piano-white-key: #E8ECFF; --piano-black-key: #0A0E1A; --meter-low: #5CB85C; --meter-mid: #5B7FFF; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.7); --window-titlebar-bg: #131A2E; --window-border: #2A3550; } /* Dark gray with hot pink and white accents. */ [data-theme="darksakura"] { --bg-primary: #232325; --bg-secondary: #2B2B2E; --bg-tertiary: #353538; --bg-elevated: #3F3F43; --accent-primary: #FF4FA3; --accent-secondary: #E03D8E; --accent-glow: rgba(255, 79, 163, 0.18); --text-primary: #F5F0F2; --text-secondary: #B8AEB4; --text-muted: #756C72; --border-color: #46444A; --border-accent: #FF4FA3; --button-bg: #3A3A3E; --button-hover: #47474C; --piano-white-key: #FFFFFF; --piano-black-key: #1A1A1C; --meter-low: #8BC34A; --meter-mid: #F5C842; --meter-high: #D9534F; --clip-opacity: 0.85; --shadow: 0 2px 8px rgba(0,0,0,0.6); --window-titlebar-bg: #2B2B2E; --window-border: #46444A; } [data-theme="light_mode"] { --bg-primary: #EFEFEF; --bg-secondary: #FFFFFF; --bg-tertiary: #E2E2E2; --bg-elevated: #F7F7F7; --accent-primary: #D4A000; --accent-secondary: #B38600; --accent-glow: rgba(212, 160, 0, 0.15); --text-primary: #222222; --text-secondary: #555555; --text-muted: #999999; --border-color: #CCCCCC; --border-accent: #D4A000; --button-bg: #E5E5E5; --button-hover: #D6D6D6; --piano-white-key: #FFFFFF; --piano-black-key: #222222; --meter-low: #5CB85C; --meter-mid: #D4A000; --meter-high: #D9534F; --clip-opacity: 0.9; --shadow: 0 2px 8px rgba(0,0,0,0.15); --window-titlebar-bg: #E6E6E6; --window-border: #CCCCCC; } [data-theme="icy"] { --bg-primary: #DCE6F6; --bg-secondary: #E9F1FB; --bg-tertiary: #CDDCF2; --bg-elevated: #F1F6FD; --accent-primary: #6E8FCB; --accent-secondary: #5A78B5; --accent-glow: rgba(110, 143, 203, 0.18); --text-primary: #2A3A52; --text-secondary: #5C6E8C; --text-muted: #93A5C2; --border-color: #BCCCE6; --border-accent: #6E8FCB; --button-bg: #D3E0F4; --button-hover: #C2D3EE; --piano-white-key: #FFFFFF; --piano-black-key: #3B4A66; --meter-low: #5CB85C; --meter-mid: #E0A845; --meter-high: #D9534F; --clip-opacity: 0.88; --shadow: 0 2px 8px rgba(110,143,203,0.25); --window-titlebar-bg: #D3E0F4; --window-border: #BCCCE6; } [data-theme="garden"] { --bg-primary: #E8F0E4; --bg-secondary: #F2F8EF; --bg-tertiary: #DCE8D6; --bg-elevated: #FAFCF8; --accent-primary: #98A290; --accent-secondary: #818B7A; --accent-glow: rgba(152, 162, 144, 0.2); --text-primary: #33402E; --text-secondary: #6B7A63; --text-muted: #9FAE96; --border-color: #C8D4C0; --border-accent: #98A290; --button-bg: #DCE8D6; --button-hover: #CCDAC4; --piano-white-key: #FFFFFF; --piano-black-key: #3A4536; --meter-low: #6FAE5C; --meter-mid: #D4A000; --meter-high: #D9534F; --clip-opacity: 0.9; --shadow: 0 2px 8px rgba(0,0,0,0.12); --window-titlebar-bg: #DCE8D6; --window-border: #C8D4C0; } /* Light pale pinks with a splash of hot pink. */ [data-theme="sakura"] { --bg-primary: #FBEFF2; --bg-secondary: #FFF6F8; --bg-tertiary: #F6E2E8; --bg-elevated: #FFFAFC; --accent-primary: #FF4FA3; --accent-secondary: #E03D8E; --accent-glow: rgba(255, 79, 163, 0.15); --text-primary: #4A2E38; --text-secondary: #8C6B76; --text-muted: #C9A8B2; --border-color: #EBD0D8; --border-accent: #FF4FA3; --button-bg: #F6E2E8; --button-hover: #EFD2DB; --piano-white-key: #FFFFFF; --piano-black-key: #4A2E38; --meter-low: #6FAE5C; --meter-mid: #D4A000; --meter-high: #D9534F; --clip-opacity: 0.9; --shadow: 0 2px 8px rgba(0,0,0,0.1); --window-titlebar-bg: #F6E2E8; --window-border: #EBD0D8; }