/* ============================================================ MiddlewareOS — Theme System ============================================================ Each theme overrides the same CSS variables defined in main.css. Switching is instant (CSS-only); the active theme is stored in localStorage as 'mos.theme' and applied via . Adding a new theme: 1. Add a [data-theme="name"] block below 2. Add an entry to THEMES in frontend/js/services/theme.js 3. That's it — every existing component re-skins automatically. ============================================================ */ /* DARK (default) — control-room aesthetic, caustic lime accent */ :root, [data-theme="dark"] { --ink-0: #0a0e14; --ink-1: #0f141c; --ink-2: #141a24; --ink-3: #1c2330; --ink-4: #242c3c; --ink-5: #2e3848; --ink-6: #3a4658; --paper-0: #f5f7fa; --paper-1: #d4dae6; --paper-2: #9aa3b6; --paper-3: #6b7488; --paper-4: #4a5266; --accent: #c8ff5a; --accent-soft: #c8ff5a22; --accent-line: #c8ff5a44; --line: #ffffff0d; --line-strong: #ffffff1a; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #1a2030 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #18221c 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #0a0e14 0%, #080c11 100%); } /* DIM — softer dark, easier on the eyes for long sessions */ [data-theme="dim"] { --ink-0: #1a1d24; --ink-1: #1f232c; --ink-2: #252934; --ink-3: #2c313e; --ink-4: #353b4a; --ink-5: #404757; --ink-6: #4d5564; --paper-0: #e8ebf2; --paper-1: #c4cad8; --paper-2: #8e96a8; --paper-3: #6a7081; --paper-4: #4f5566; --accent: #7dd3fc; --accent-soft: #7dd3fc1f; --accent-line: #7dd3fc44; --line: #ffffff0a; --line-strong: #ffffff15; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #20283a 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #1c2434 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #1a1d24 0%, #181b22 100%); } /* LIGHT — clean operations console, navy accent */ [data-theme="light"] { --ink-0: #f5f7fa; --ink-1: #ffffff; --ink-2: #f8fafc; --ink-3: #eef1f6; --ink-4: #e3e7ee; --ink-5: #d4dae6; --ink-6: #b8c0cf; --paper-0: #0f1419; --paper-1: #1c2330; --paper-2: #4a5266; --paper-3: #6b7488; --paper-4: #9aa3b6; --accent: #2563eb; --accent-soft: #2563eb14; --accent-line: #2563eb44; --line: #00000010; --line-strong: #0000001f; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #e8eef8 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #ecf5ee 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #f5f7fa 0%, #eef1f6 100%); } /* SOLARIZED — based on Ethan Schoonover's solarized palette */ [data-theme="solarized"] { --ink-0: #002b36; --ink-1: #073642; --ink-2: #0a4452; --ink-3: #0e5061; --ink-4: #155b6e; --ink-5: #1c697d; --ink-6: #2d7a8e; --paper-0: #fdf6e3; --paper-1: #eee8d5; --paper-2: #93a1a1; --paper-3: #839496; --paper-4: #586e75; --accent: #b58900; --accent-soft: #b5890022; --accent-line: #b5890055; --line: #ffffff0d; --line-strong: #ffffff1a; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #0e5061 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #1c697d 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #002b36 0%, #001e26 100%); } /* SYNTHWAVE — neon retro, magenta + cyan on deep purple */ [data-theme="synthwave"] { --ink-0: #1a0d2e; --ink-1: #1f1138; --ink-2: #261643; --ink-3: #2e1a52; --ink-4: #3a2168; --ink-5: #482a7e; --ink-6: #563496; --paper-0: #f0e6ff; --paper-1: #d4c2ff; --paper-2: #9c8ad6; --paper-3: #7c6aaf; --paper-4: #5d4d87; --accent: #ff2d95; --accent-soft: #ff2d951f; --accent-line: #ff2d9555; --line: #ffffff10; --line-strong: #ffffff20; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #ff2d951a 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #00e5ff1a 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #1a0d2e 0%, #100722 100%); } /* AMBER — phosphor terminal nostalgia */ [data-theme="amber"] { --ink-0: #0a0700; --ink-1: #120c00; --ink-2: #1c1300; --ink-3: #261b00; --ink-4: #322300; --ink-5: #402d00; --ink-6: #4f3800; --paper-0: #ffd388; --paper-1: #ffb84d; --paper-2: #cc9036; --paper-3: #99692a; --paper-4: #6b491e; --accent: #ff9500; --accent-soft: #ff95001f; --accent-line: #ff950055; --line: #ff950010; --line-strong: #ff950020; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #2a1d00 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #1f1500 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #0a0700 0%, #060400 100%); } /* HIGH-CONTRAST — accessibility-focused, maximum readability */ [data-theme="contrast"] { --ink-0: #000000; --ink-1: #0a0a0a; --ink-2: #141414; --ink-3: #1f1f1f; --ink-4: #2e2e2e; --ink-5: #404040; --ink-6: #525252; --paper-0: #ffffff; --paper-1: #f0f0f0; --paper-2: #c0c0c0; --paper-3: #989898; --paper-4: #707070; --accent: #ffff00; --accent-soft: #ffff0022; --accent-line: #ffff0066; --line: #ffffff20; --line-strong: #ffffff40; --backdrop-1: none; --backdrop-2: none; --backdrop-3: linear-gradient(180deg, #000000 0%, #000000 100%); } /* OCEAN — calm blue, easy on the eyes, business-friendly */ [data-theme="ocean"] { --ink-0: #0c1922; --ink-1: #102232; --ink-2: #142b3f; --ink-3: #19354c; --ink-4: #1f405b; --ink-5: #284f70; --ink-6: #325f86; --paper-0: #e6f1f7; --paper-1: #c1d6e3; --paper-2: #8ba9bd; --paper-3: #678296; --paper-4: #4a6273; --accent: #00d4d4; --accent-soft: #00d4d41f; --accent-line: #00d4d455; --line: #ffffff0d; --line-strong: #ffffff1a; --backdrop-1: radial-gradient(1200px 600px at 80% -10%, #1c405e 0%, transparent 60%); --backdrop-2: radial-gradient(900px 500px at -10% 110%, #0f3041 0%, transparent 55%); --backdrop-3: linear-gradient(180deg, #0c1922 0%, #08121a 100%); } /* ============================================================ Override the body backdrop (originally hardcoded in main.css) so each theme's backdrop applies. main.css's body::before still renders, but the gradients now come from theme variables. ============================================================ */ body::before { background: var(--backdrop-1, radial-gradient(1200px 600px at 80% -10%, #1a2030 0%, transparent 60%)), var(--backdrop-2, radial-gradient(900px 500px at -10% 110%, #18221c 0%, transparent 55%)), var(--backdrop-3, linear-gradient(180deg, #0a0e14 0%, #080c11 100%)) !important; } body { background: var(--ink-0); transition: background var(--t-med), color var(--t-med); } /* ============================================================ THEME SWITCHER UI in topbar ============================================================ */ .theme-switcher { position: relative; display: inline-flex; align-items: center; } .theme-switcher-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--paper-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all var(--t-fast); } .theme-switcher-btn:hover { border-color: var(--accent-line); color: var(--paper-1); } .theme-switcher-btn::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); } .theme-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 6px; z-index: 1000; display: none; } .theme-menu.open { display: block; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); background: transparent; border: 0; color: var(--paper-1); cursor: pointer; font-size: 12px; text-align: left; transition: background var(--t-fast); } .theme-option:hover { background: var(--ink-3); } .theme-option.active { background: var(--accent-soft); color: var(--accent); } .theme-swatch { display: inline-flex; border-radius: 50%; overflow: hidden; width: 18px; height: 18px; border: 1px solid var(--line-strong); flex-shrink: 0; } .theme-swatch span { display: block; width: 6px; height: 18px; } .theme-option-label { flex: 1; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; } .theme-option-meta { color: var(--paper-3); font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } /* Light-theme specific tweaks (since light needs different shadows) */ [data-theme="light"] .stat, [data-theme="light"] .card, [data-theme="light"] .panel { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); } [data-theme="light"] body::after { display: none; } /* High-contrast — disable atmospheric stuff */ [data-theme="contrast"] body::before, [data-theme="contrast"] body::after { display: none; } [data-theme="contrast"] .card, [data-theme="contrast"] .stat, [data-theme="contrast"] .panel { border-width: 2px; box-shadow: none; }