// AUDIO_HAXOR — WALKTHROUGH

Tutorial index Docs hub
Progress
17 / 19

17.Theme, CRT, neon, color schemes

Dark vs light, CRT scanlines, neon glow, five built-in color schemes, and a 16-slot custom color editor — all synced to the tray popover in real time.

Dark / light theme

Pref key: theme ("dark" or "light"). Toggle with Cmd+Y or the Theme button in the HUD header. The setting flips document.documentElement.data-theme, which cascades into every [data-theme="light"] rule in frontend/hud.css. loadSettings() in frontend/js/settings.js captures ROOT_DEFAULTS at boot so scheme resets fall back to the correct variant. Default key is configurable in Settings → Keyboard Shortcuts as the toggleTheme entry.

CRT scanlines

Pref key: crtEffects. Toggle with F1 or the CRT button. The effect is a pair of animated overlay elements — #crtH (horizontal scanlines + vignette) and #crtV (vertical roll). When off, a .no-crt class is added to the relevant elements and the overlays fade. A toast confirms the state change. The setting is honored in the tray popover too via its own .crt-wash overlay.

Neon glow

Pref key: neonGlow. Toggle with F2 or the Neon button. When off, no-neon-glow is added to <body>, and every box-shadow: 0 0 Xpx var(--*-glow) rule degrades to a flat border. Useful on OLED laptops where pulsing shadows waste battery.

SCHEME_VAR_KEYS — the 22 controllable variables

Exported as window.SCHEME_VAR_KEYS from settings.js. Every color scheme defines values for these CSS variables; the tray popover receives the same map via the appearance field of update_tray_now_playing.

--accent         --accent-light    --accent-glow
--cyan           --cyan-glow       --cyan-dim
--magenta        --magenta-glow
--green          --green-bg
--yellow         --yellow-glow
--orange         --orange-bg
--red
--text           --text-dim        --text-muted
--bg-primary     --bg-secondary    --bg-card    --bg-hover
--border         --border-glow

Built-in color schemes

From COLOR_SCHEMES (~lines 28–199) in settings.js. Each has vars (dark) and optional lightVars. Click any tile in the Settings → Color Scheme grid to apply.

  1. Cyberpunk — the default. Hot pink (#ff2a6d) accent with cyan (#05d9e8) highlights. Deep-blue backgrounds. Light variant: muted pink + teal.
  2. Midnight — deep blue + electric purple. Accent #7c3aed, cyan swapped for sky-blue #38bdf8.
  3. Matrix — terminal green on black. Neon #39ff14 accent; light variant uses a dark-green-on-white terminal look.
  4. Ember — warm amber + orange. Good for rooms with warm light bias.
  5. Arctic — cool whites + icy blue. Calmer than Cyberpunk, still cyberpunk-adjacent.

applyColorScheme(name) (~line 240) reads the scheme, clears any inline overrides, and calls setProperty() for each variable. It also updates the colorScheme pref and wipes customSchemeVars so a custom override isn't hiding behind the scheme.

Custom color editor

Settings → Color Scheme → Custom scheme editor exposes 16 color inputs for the most visible variables — Accent, Accent Light, Cyan, Magenta, Green, Yellow, Orange, Red, Text, Text Dim, Text Muted, Background, BG Secondary, Card BG, BG Hover, Border, Border Glow. Pick a color, click Apply, and the UI updates instantly. Save the current palette as a named preset with Save as Preset — stored alongside the built-ins for one-click recall. Delete Saved wipes your custom presets.

applySchemeVars(vars) (~line 300) writes the map into prefs.customSchemeVars and sets each variable. In light mode, background and text variables are filtered out so the cascade can handle the light/dark split.

Tray popover sync

Whenever you change theme or scheme, the main window emits tray-popover-ui-theme to the popover window and includes the full appearance map in the next update_tray_now_playing payload. The popover's applyTrayDocumentTheme() flips data-theme, and inline style overrides apply every custom variable — so your menu bar HUD matches the main window in the same frame.

Docs hub & tutorial sync

This very page uses the same hud-static.css and hud-theme.js as the main app. Toggle the theme here and the change applies to the docs hub and every tutorial page instantly — the hub is intentionally not a separate CSS universe.

TipWant a palette that matches your studio desk? Take a photo, sample three colors with your OS picker, paste them into the custom editor for --accent, --cyan, and --magenta, then save it as a preset named after your studio. Every time you open the app you're looking at your room, reflected in code.