Interface themes: CaYaDev, Dark, Light, Device default, High Contrast and more (#770)

[CaYatur]

Closes #770.

What

Settings → Application → Interface Theme offers seven themes and a Device default option:

• CaYaDev, the current look and still the default;
• Dark (neutral graphite);
• Light;
• High Contrast (WCAG AAA);
• Midnight, Sepia and Neon.

Device default follows the OS light/dark preference and switches live.

The theme changes the panel only. The visualizer output, the stream overlay and user colours are untouched. The setting is ui.theme: it travels with settings backups and survives Reset to Defaults.

How

• src/shared/ui-themes.js holds 64 colour tokens per theme. Channel tokens (--fg-rgb) are used as rgb(var(--fg-rgb) / a), so hover tints flip on light themes.
• About 320 colour literals in admin.css/studio.css became tokens. :root is the CaYaDev table.
• The timeline and mapping canvases read tokens and redraw on a theme change.
• theme-boot.js applies the theme in <head>. The main process opens the window in the theme's background and passes the theme in the address, so there is no dark flash. README shots stay CaYaDev, and nativeTheme.themeSource is not touched.

CaYaDev changes (intentional)

• --muted2 goes from #8a6f79 to #a1858f. Hint text was 3.4–4.4:1 on cards and needs 4.5:1.
• Code comments go from #6d5f72 to #9a8aa0 (they were 3.3:1).
• Solid danger button goes from #e5484d to #d93a40 (white text was 3.9:1).
• Gradient end on filled buttons is a new token, --accent-grad = #ea2636. --accent2 stays #ff4d5e for headings. White text was 3.96:1 mid-gradient.

Pixel comparison against screenshots taken before any CSS change, with these set back to their old values: the remaining differences were live content, the new picker and one consolidated status green.

Correction (#774): those screenshots did not cover every surface. Reading the old CSS afterwards found more visible CaYaDev changes:

• near-identical status shades merged into one per role;
• the Performance View moved from its own neutral greys to the panel's surfaces;
• the lyric editor and MCP snippets moved to the code editor's colours;
• Studio's solid danger button became the panel's red;
• the mapping guide line changed from cyan to info blue;
• the selected tempo marker became the strong text colour.

#774 also fixes clip cells that this PR's audit skipped: slot-colour tint, countdowns, and the sourceless slot. CHANGELOG and ROADMAP list all of it.

Tests

npm test passes 3215 (+32). The new tests check:

• token completeness;
• :root parity with the CaYaDev table;
• no colour literal in the panel CSS or panel scripts outside the table (a content allowlist with reasons, which cannot go stale);
• every var() is defined;
• 128 contrast rules per theme;
• every CSS rule that sets both a text colour and a background, measured in every theme;
• the head script in a fake DOM.

Self-test (--smoke, isolated profile): PASS. A new step picks every theme from the picker, scrolls every category and measures the drawn contrast of each visible text, about 2,600 per theme.

Theme	Lowest ratio	Below threshold
CaYaDev	4.54	0
Dark	4.54	0
Light	4.96	0
High Contrast	7.8	0
Midnight	4.54	0
Sepia	5.12	0
Neon	4.54	0

Also checked by hand in Light and Sepia: the timeline with clips, automation and markers, the clip deck, the shader code editor, search results, confirm dialogs and toasts.

[cayadraft]

@CaYatur

CaYaDraft — pull request

Summary
Interface themes: CaYaDev, Dark, Light, Device default, High Contrast and more (#770)

Files
CHANGELOG.md (modified, +40/-0)
@@ -5,6 +5,46 @@ GitHub. The full reasoning and the measurements behind each change are in [ROADM

Unreleased

+### Control panel
+
+- Interface themes [770]. Settings → Application → Interface Theme offers seven themes and

• Device default:
• • CaYaDev, the existing look and still the default;
• • Dark, a neutral graphite;
• • Light;
• • High Contrast, black with yellow, held to W…

README.md (modified, +5/-2)
@@ -17,7 +17,7 @@ layers and 40 GPU effects, an OBS overlay, Spout / Syphon, **project


[![Platform](https://img.shields.io/badge/platform-Windows%20%…

README.tr.md (modified, +5/-2)
@@ -18,7 +18,7 @@ destesi**, ve MCP üzerinden yapay zekâ kontrolü.


[![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20macOS%20%7C%20Linux-111997.sv…

ROADMAP.md (modified, +43/-1)
@@ -93,6 +93,7 @@ hands, and a row only moves up once it ships.
|---|:--:|---|
| Per-app audio capture on macOS and Linux | v3.1.6 | On main (#514, #517). Linux verified in WSLg with PulseAudio; macOS written on ScreenCaptureKit and compiled in CI, never run on a Mac. Windows shipped in v3.1.3 |
| Live level meter per application | v3.1.6 | Done on main (#516): a moving dB-scale bar per ap…

src/admin/admin.css (modified, +232/-139)
@@ -5,30 +5,91 @@

• SPDX-License-Identifier: MIT
  */
  :root {

• /* Arayüz teması (Settings: interface themes (CaYaDev, dark, light, device default, high contrast) #770). Bu blok CaYaDev temasının AYNISI: renkler

• src/shared/ui-themes.js tablosundan gelir ve test ikisini karşılaştırır.
  

• Başka bir tema seçilince theme-boot.js değerleri <html>e yazar.
  

• Bu dosyada :root dışında renk yazılmaz; bkz. tests/ui-themes.test.js. */
  

• /* Yüzeyler */
  --bg: #0b0910;…

src/admin/admin.js (modified, +110/-2)
@@ -662,6 +662,8 @@
return window.SVUpdatesPanel ? window.SVUpdatesPanel.panel() : null;
case 'language':
return languageCtrl();

•  case 'uitheme':
  

•    return uiThemeCtrl();
   case 'extendedrange':
     return extendedRangeCtrl();
   case 'n…
  

Note
The local model is unavailable, so this is only the title and file list.

---

Stopping here. I will not merge, push, or change this pull request until you ask.

/caya explain describes the diff. /caya plan previews the next edit. /caya revise adds a commit.