/* alphaTrack UI — themes. * * Each theme sets ONLY surfaces (bg/panel/border/text/muted/danger/chart slots). * Brand accent (--ui-accent / --ui-on-accent) lives in apps.css and stays * constant as themes change — so mtrack is recognizably blue in Aurora or * Paper, ytrack is recognizably red in Cobalt or Sherbet, and so on. * * Apply with: (any slug from the list below) * * Palettes extracted from alphatrack/static/colors.html (24 total). * To add a new theme: add a new rule here AND a row to the UI.themes * registry in ui.js. */ /* ── dark · multi-hue ─────────────────────────────────────────────── */ [data-theme="aurora"] { --ui-bg: #0e0f13; --ui-panel: #181a22; --ui-panel-2: #13151c; --ui-panel-hover: #262833; --ui-border: #262833; --ui-text: #e6e8ee; --ui-text-dim: #8a8f9c; --ui-muted: #8a8f9c; --ui-danger: #ff7a85; --ui-success: #5dd99c; --ui-warning: #ffc66d; --ui-info: #6aa9ff; --ui-c1: #6aa9ff; --ui-c2: #ff7a85; --ui-c3: #ffc66d; --ui-c4: #b58cff; --ui-c5: #5dd99c; --ui-c6: #ff9ec9; } [data-theme="forest-dusk"] { --ui-bg: #11120f; --ui-panel: #1c1d18; --ui-panel-2: #161713; --ui-panel-hover: #2c2d25; --ui-border: #2c2d25; --ui-text: #ece8d9; --ui-text-dim: #948c75; --ui-muted: #948c75; --ui-danger: #e08071; --ui-success: #93c47d; --ui-warning: #e5b958; --ui-info: #7ec0e8; --ui-c1: #7ec0e8; --ui-c2: #e08071; --ui-c3: #e5b958; --ui-c4: #b29ce0; --ui-c5: #93c47d; --ui-c6: #e89bb7; } [data-theme="neon-night"] { --ui-bg: #000000; --ui-panel: #111114; --ui-panel-2: #0a0a0d; --ui-panel-hover: #2a2a30; --ui-border: #2a2a30; --ui-text: #f3f3f5; --ui-text-dim: #7e7e88; --ui-muted: #7e7e88; --ui-danger: #ff5666; --ui-success: #2bd980; --ui-warning: #ffcc33; --ui-info: #3a9eff; --ui-c1: #3a9eff; --ui-c2: #ff5666; --ui-c3: #ffcc33; --ui-c4: #a96bff; --ui-c5: #2bd980; --ui-c6: #ff66b2; } [data-theme="twilight"] { --ui-bg: #14111f; --ui-panel: #1f1b30; --ui-panel-2: #18142a; --ui-panel-hover: #2c2742; --ui-border: #2c2742; --ui-text: #e3def0; --ui-text-dim: #8a8298; --ui-muted: #8a8298; --ui-danger: #ffadc4; --ui-success: #a8e6b9; --ui-warning: #f5d29a; --ui-info: #93b9ff; --ui-c1: #93b9ff; --ui-c2: #ffadc4; --ui-c3: #f5d29a; --ui-c4: #cbb3ff; --ui-c5: #a8e6b9; --ui-c6: #ffb89a; } [data-theme="autumn"] { --ui-bg: #14100c; --ui-panel: #221b14; --ui-panel-2: #1a140e; --ui-panel-hover: #34281d; --ui-border: #34281d; --ui-text: #f0e2cc; --ui-text-dim: #a5907a; --ui-muted: #a5907a; --ui-danger: #c83b3b; --ui-success: #7da650; --ui-warning: #f0c34a; --ui-info: #e7973d; --ui-c1: #e7973d; --ui-c2: #c83b3b; --ui-c3: #f0c34a; --ui-c4: #8a5fa3; --ui-c5: #7da650; --ui-c6: #d77b53; } [data-theme="mineral"] { --ui-bg: #0d0f1a; --ui-panel: #181a2c; --ui-panel-2: #11131f; --ui-panel-hover: #262945; --ui-border: #262945; --ui-text: #dee2f0; --ui-text-dim: #7a809a; --ui-muted: #7a809a; --ui-danger: #e85575; --ui-success: #45c4a4; --ui-warning: #e8b342; --ui-info: #4cb5e8; --ui-c1: #4cb5e8; --ui-c2: #e85575; --ui-c3: #e8b342; --ui-c4: #9a6dd8; --ui-c5: #45c4a4; --ui-c6: #ed7a9e; } /* ── light · multi-hue ─────────────────────────────────────────────── */ [data-theme="paper"] { --ui-bg: #fafaf7; --ui-panel: #ffffff; --ui-panel-2: #f3f3ee; --ui-panel-hover: #e2e2dc; --ui-border: #e2e2dc; --ui-text: #1a1a1c; --ui-text-dim: #6a6a6e; --ui-muted: #6a6a6e; --ui-danger: #dc2626; --ui-success: #16a34a; --ui-warning: #ca8a04; --ui-info: #2563eb; --ui-c1: #2563eb; --ui-c2: #dc2626; --ui-c3: #ca8a04; --ui-c4: #7c3aed; --ui-c5: #16a34a; --ui-c6: #db2777; } [data-theme="linen"] { --ui-bg: #f5f1e8; --ui-panel: #fbf8f0; --ui-panel-2: #eee8da; --ui-panel-hover: #ddd3bd; --ui-border: #ddd3bd; --ui-text: #2a2520; --ui-text-dim: #807666; --ui-muted: #807666; --ui-danger: #c25450; --ui-success: #5a9a5e; --ui-warning: #c9923a; --ui-info: #3f7cac; --ui-c1: #3f7cac; --ui-c2: #c25450; --ui-c3: #c9923a; --ui-c4: #8b6db8; --ui-c5: #5a9a5e; --ui-c6: #c87597; } [data-theme="crisp"] { --ui-bg: #ffffff; --ui-panel: #ffffff; --ui-panel-2: #f6f7f9; --ui-panel-hover: #d9dce2; --ui-border: #d9dce2; --ui-text: #0e0e10; --ui-text-dim: #5e6470; --ui-muted: #5e6470; --ui-danger: #e23748; --ui-success: #0e8a3e; --ui-warning: #b8770f; --ui-info: #1e63d9; --ui-c1: #1e63d9; --ui-c2: #e23748; --ui-c3: #b8770f; --ui-c4: #6f3fcf; --ui-c5: #0e8a3e; --ui-c6: #c1357c; } [data-theme="sandstone"] { --ui-bg: #f5ede0; --ui-panel: #fbf5e9; --ui-panel-2: #ede3cf; --ui-panel-hover: #d5c5a7; --ui-border: #d5c5a7; --ui-text: #2a201a; --ui-text-dim: #847660; --ui-muted: #847660; --ui-danger: #b8534b; --ui-success: #6e8f5c; --ui-warning: #c89542; --ui-info: #3e6b8a; --ui-c1: #3e6b8a; --ui-c2: #b8534b; --ui-c3: #c89542; --ui-c4: #7a5e98; --ui-c5: #6e8f5c; --ui-c6: #b86b78; } [data-theme="sage"] { --ui-bg: #f0f3eb; --ui-panel: #ffffff; --ui-panel-2: #e2e8d8; --ui-panel-hover: #c4d0ac; --ui-border: #c4d0ac; --ui-text: #1a2018; --ui-text-dim: #647062; --ui-muted: #647062; --ui-danger: #b04a4a; --ui-success: #4f8a5c; --ui-warning: #b88a2c; --ui-info: #2c6cb0; --ui-c1: #2c6cb0; --ui-c2: #b04a4a; --ui-c3: #b88a2c; --ui-c4: #7752a0; --ui-c5: #4f8a5c; --ui-c6: #b85988; } [data-theme="sherbet"] { --ui-bg: #fff3e8; --ui-panel: #ffffff; --ui-panel-2: #ffe5cf; --ui-panel-hover: #f5c39b; --ui-border: #f5c39b; --ui-text: #2a1c14; --ui-text-dim: #997760; --ui-muted: #997760; --ui-danger: #e21c6b; --ui-success: #1bb56b; --ui-warning: #ffa70d; --ui-info: #ff5a3a; --ui-c1: #ff5a3a; --ui-c2: #e21c6b; --ui-c3: #ffa70d; --ui-c4: #c333d0; --ui-c5: #1bb56b; --ui-c6: #ff7299; } /* ── dark · blue ─────────────────────────────────────────────── */ [data-theme="cobalt"] { --ui-bg: #08111f; --ui-panel: #122033; --ui-panel-2: #0c1726; --ui-panel-hover: #1e3050; --ui-border: #1e3050; --ui-text: #dbe6f5; --ui-text-dim: #6b81a0; --ui-muted: #6b81a0; --ui-danger: #ff8a9c; --ui-success: #2cc7ee; --ui-warning: #4ad1c0; --ui-info: #3a82ff; --ui-c1: #3a82ff; --ui-c2: #7d9eff; --ui-c3: #4ad1c0; --ui-c4: #8ec8ff; --ui-c5: #2cc7ee; --ui-c6: #a3a8ff; } [data-theme="indigo"] { --ui-bg: #0a0c1f; --ui-panel: #15182f; --ui-panel-2: #0e1124; --ui-panel-hover: #232744; --ui-border: #232744; --ui-text: #dadee8; --ui-text-dim: #6c739a; --ui-muted: #6c739a; --ui-danger: #ff8c9c; --ui-success: #9c6cdb; --ui-warning: #3fb6e0; --ui-info: #4d8cf0; --ui-c1: #4d8cf0; --ui-c2: #6c75f5; --ui-c3: #3fb6e0; --ui-c4: #7a6ce5; --ui-c5: #9c6cdb; --ui-c6: #c570d9; } /* ── light · blue ─────────────────────────────────────────────── */ [data-theme="sky"] { --ui-bg: #f1f6fc; --ui-panel: #ffffff; --ui-panel-2: #e6eef8; --ui-panel-hover: #c9d8eb; --ui-border: #c9d8eb; --ui-text: #0c1828; --ui-text-dim: #5b7596; --ui-muted: #5b7596; --ui-danger: #b8395a; --ui-success: #0d8fbb; --ui-warning: #197d8a; --ui-info: #1e63d9; --ui-c1: #1e63d9; --ui-c2: #3a6cb3; --ui-c3: #197d8a; --ui-c4: #5b4dc9; --ui-c5: #0d8fbb; --ui-c6: #4a8df5; } [data-theme="tide"] { --ui-bg: #ebf6f7; --ui-panel: #ffffff; --ui-panel-2: #dceff1; --ui-panel-hover: #b8d8db; --ui-border: #b8d8db; --ui-text: #0d2024; --ui-text-dim: #587278; --ui-muted: #587278; --ui-danger: #d97565; --ui-success: #4ab8db; --ui-warning: #5fcfc7; --ui-info: #0d8a8a; --ui-c1: #0d8a8a; --ui-c2: #2db5ad; --ui-c3: #5fcfc7; --ui-c4: #157c9b; --ui-c5: #4ab8db; --ui-c6: #176f8a; } /* ── dark · green ─────────────────────────────────────────────── */ [data-theme="moss"] { --ui-bg: #0c130d; --ui-panel: #162119; --ui-panel-2: #101a13; --ui-panel-hover: #213024; --ui-border: #213024; --ui-text: #dde7df; --ui-text-dim: #788a7c; --ui-muted: #788a7c; --ui-danger: #e09060; --ui-success: #2dbf99; --ui-warning: #c5d76c; --ui-info: #4cb471; --ui-c1: #4cb471; --ui-c2: #a3d34c; --ui-c3: #c5d76c; --ui-c4: #5fa78a; --ui-c5: #2dbf99; --ui-c6: #7dd190; } [data-theme="pine"] { --ui-bg: #0a1410; --ui-panel: #14241c; --ui-panel-2: #0e1c15; --ui-panel-hover: #1f3a2c; --ui-border: #1f3a2c; --ui-text: #d8eadf; --ui-text-dim: #6e8a7c; --ui-muted: #6e8a7c; --ui-danger: #e07050; --ui-success: #6cd449; --ui-warning: #aedb53; --ui-info: #2dcc7b; --ui-c1: #2dcc7b; --ui-c2: #5fdcb0; --ui-c3: #aedb53; --ui-c4: #1a9d6e; --ui-c5: #6cd449; --ui-c6: #38c9a8; } /* ── light · green ─────────────────────────────────────────────── */ [data-theme="meadow"] { --ui-bg: #f2f7f0; --ui-panel: #ffffff; --ui-panel-2: #e6efe1; --ui-panel-hover: #c8d8c0; --ui-border: #c8d8c0; --ui-text: #0e1a10; --ui-text-dim: #5a705e; --ui-muted: #5a705e; --ui-danger: #b85a3c; --ui-success: #138a6f; --ui-warning: #b0bf3a; --ui-info: #2c8a4a; --ui-c1: #2c8a4a; --ui-c2: #87a83e; --ui-c3: #b0bf3a; --ui-c4: #466e2e; --ui-c5: #138a6f; --ui-c6: #5fa55a; } [data-theme="matcha"] { --ui-bg: #f4f6e8; --ui-panel: #ffffff; --ui-panel-2: #e8edd5; --ui-panel-hover: #c8d29c; --ui-border: #c8d29c; --ui-text: #1a1f0e; --ui-text-dim: #6c7a4e; --ui-muted: #6c7a4e; --ui-danger: #b85040; --ui-success: #708e22; --ui-warning: #b8c63f; --ui-info: #5c8a1f; --ui-c1: #5c8a1f; --ui-c2: #8ca830; --ui-c3: #b8c63f; --ui-c4: #406b2a; --ui-c5: #708e22; --ui-c6: #c4cf68; } /* ── dark · red ─────────────────────────────────────────────── */ [data-theme="ember"] { --ui-bg: #14090a; --ui-panel: #221213; --ui-panel-2: #1a0d0e; --ui-panel-hover: #36181a; --ui-border: #36181a; --ui-text: #f0dcdc; --ui-text-dim: #998080; --ui-muted: #998080; --ui-danger: #ff5260; --ui-success: #d8806b; --ui-warning: #ff8c5a; --ui-info: #ff6b6b; --ui-c1: #ff6b6b; --ui-c2: #e0405b; --ui-c3: #ff8c5a; --ui-c4: #b94d2b; --ui-c5: #d8806b; --ui-c6: #ff7a9c; } [data-theme="sangria"] { --ui-bg: #150a14; --ui-panel: #24121e; --ui-panel-2: #1c0d18; --ui-panel-hover: #3a1b2e; --ui-border: #3a1b2e; --ui-text: #f0dce5; --ui-text-dim: #9c7e8c; --ui-muted: #9c7e8c; --ui-danger: #a32f4c; --ui-success: #c25179; --ui-warning: #db73a3; --ui-info: #d8485e; --ui-c1: #d8485e; --ui-c2: #a32f4c; --ui-c3: #db73a3; --ui-c4: #6e2854; --ui-c5: #c25179; --ui-c6: #e84480; } /* ── light · red ─────────────────────────────────────────────── */ [data-theme="rose"] { --ui-bg: #fbf3f2; --ui-panel: #ffffff; --ui-panel-2: #f5e4e2; --ui-panel-hover: #e6c8c3; --ui-border: #e6c8c3; --ui-text: #1c0c0c; --ui-text-dim: #8a5e5e; --ui-muted: #8a5e5e; --ui-danger: #a82850; --ui-success: #c46060; --ui-warning: #e85a3a; --ui-info: #c83232; --ui-c1: #c83232; --ui-c2: #a82850; --ui-c3: #e85a3a; --ui-c4: #8a2622; --ui-c5: #c46060; --ui-c6: #d24a7d; } [data-theme="coral"] { --ui-bg: #fff3ee; --ui-panel: #ffffff; --ui-panel-2: #fae5db; --ui-panel-hover: #efc6b6; --ui-border: #efc6b6; --ui-text: #2a0f0a; --ui-text-dim: #94604f; --ui-muted: #94604f; --ui-danger: #b04330; --ui-success: #e07a6b; --ui-warning: #f08a3c; --ui-info: #e85d3e; --ui-c1: #e85d3e; --ui-c2: #d44d3a; --ui-c3: #f08a3c; --ui-c4: #b04330; --ui-c5: #e07a6b; --ui-c6: #e8745c; }