fix(theme): normalize theme-derived colors to canonical hex

Tailwind v4 / Lightning CSS minifies hex literals in the generated CSS
(`#ffffff` -> `#fff`), so reading a `--color-*` token back with
getComputedStyle can yield 3/4-digit shorthand. Monaco's token color map
validates with a strict 6/8-hex regex and throws `Illegal value for token
color: #fff` — and since the standalone theme service folds
`editor.background` into a token rule, a minified white app background
(Hub Delight) crashes the editor on theme switch. The same shorthand also
leaked into the Settings "Copy as JSON" output.

Add normalizeThemeColor() and apply it everywhere a color is derived from a
theme: monaco-setup readVar (fixes the crash), XTerminal terminal theme,
Settings copy-as-JSON (emits canonical long-form hex), and effectiveAppBg.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: big-guy

src/renderer/components/Settings.tsx

@@ -12,6 +12,7 @@ import { AgentIcon } from './AgentIcon'
 import { InterfaceToggle } from './InterfaceToggle'
 import { BUILT_IN_THEMES_BY_MODE, type ThemeOption } from '../themes'
 import { SEMANTIC_KEYS } from '../theme-apply'
+import { normalizeThemeColor } from '../theme-color'
 import type { CustomTheme, UiScale } from '../../shared/state/settings'
 import { SCALES, scaleSpec } from '../../shared/state/settings'
 import { QRCodeSVG } from 'qrcode.react'
@@ -3478,7 +3479,10 @@ function readBuiltInThemeJson(opt: ThemeOption): string {
     const colors: Record<string, string> = {}
     for (const key of SEMANTIC_KEYS) {
       const v = cs.getPropertyValue(`--color-${key}`).trim()
-      if (v) colors[key] = v
+      // Emit canonical long-form hex so the copied theme round-trips cleanly:
+      // the CSS pipeline minifies `#ffffff` to `#fff`, but a copied theme
+      // should read as the author wrote it. Non-hex values pass through as-is.
+      if (v) colors[key] = normalizeThemeColor(v, v)
     }
     return JSON.stringify({ name: opt.label, mode: opt.mode, colors }, null, 2) + '\n'
   } finally {

src/renderer/components/XTerminal.tsx

@@ -8,6 +8,7 @@ import '@xterm/xterm/css/xterm.css'
 import type { StateEvent } from '../../shared/state'
 import { getClientId, subscribeActiveTransportReconnect, useSettings, useTerminalSession } from '../store'
 import { getBackend, useBackend } from '../backend'
+import { normalizeThemeColor } from '../theme-color'
 import {
   makeFileLinkProvider,
   loadWorktreeFiles,
@@ -230,11 +231,14 @@ function buildTerminalTheme(
   bgVar = '--color-app'
 ): NonNullable<ConstructorParameters<typeof Terminal>[0]>['theme'] {
   const rootStyle = getComputedStyle(document.documentElement)
-  const bg =
-    rootStyle.getPropertyValue(bgVar).trim() ||
-    rootStyle.getPropertyValue('--color-app').trim() ||
+  // Normalize theme-derived colors: minified shorthand like `#fff` is valid
+  // for xterm, but keeping every theme-derived color canonical avoids surprises
+  // and matches the Monaco path. See theme-color.ts.
+  const bg = normalizeThemeColor(
+    rootStyle.getPropertyValue(bgVar).trim() || rootStyle.getPropertyValue('--color-app'),
     '#0a0a0a'
-  const fg = rootStyle.getPropertyValue('--color-fg-bright').trim() || '#e5e5e5'
+  )
+  const fg = normalizeThemeColor(rootStyle.getPropertyValue('--color-fg-bright'), '#e5e5e5')
   return {
     background: bg,
     foreground: fg,

src/renderer/monaco-setup.ts

@@ -3,6 +3,7 @@
 // standalone chunk and returns a Worker constructor.
 import * as monaco from 'monaco-editor'
 import { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME } from '../shared/state/settings'
+import { normalizeThemeColor } from './theme-color'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
@@ -131,8 +132,10 @@ configureTypescriptDefaults()
 // Pull current Tailwind theme tokens from a source element and build a Monaco
 // theme that tracks them. Called once at boot and on theme changes.
 function readVar(source: HTMLElement, name: string, fallback: string): string {
-  const v = getComputedStyle(source).getPropertyValue(name).trim()
-  return v || fallback
+  const v = getComputedStyle(source).getPropertyValue(name)
+  // Normalize to canonical hex: the value may be minified shorthand (`#fff`)
+  // that Monaco's strict token color parser would throw on. See theme-color.ts.
+  return normalizeThemeColor(v, fallback)
 }
 
 /** Resolve a CSS color (hex/oklch/named/var) to its luminance and decide if

src/renderer/theme-apply.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME } from '../shared/state/settings'
 import type { ResolvedTheme } from './hooks/useActiveTheme'
+import { normalizeThemeColor } from './theme-color'
 
 // Tracks which `--color-*` properties we set inline on the documentElement
 // during the previous apply, so the next apply can clear leftovers
@@ -66,9 +67,10 @@ export function applyTheme(theme: ResolvedTheme): void {
  *  Used as `lastEffectiveAppBg` so main can choose a matching window
  *  background on the next boot. */
 export function effectiveAppBg(theme: ResolvedTheme): string {
+  const fallback = theme.mode === 'dark' ? '#0a0a0a' : '#fdf6e3'
   if (theme.kind === 'custom') {
-    return theme.colors.app ?? (theme.mode === 'dark' ? '#0a0a0a' : '#fdf6e3')
+    return normalizeThemeColor(theme.colors.app ?? fallback, fallback)
   }
   // First swatch on every built-in is its app background hex.
-  return theme.swatches[0]
+  return normalizeThemeColor(theme.swatches[0] ?? fallback, fallback)
 }

src/renderer/theme-color.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { normalizeThemeColor } from './theme-color'
+
+describe('normalizeThemeColor', () => {
+  const FB = '#0a0a0a'
+
+  it('expands 3-digit shorthand (the Lightning CSS minification case)', () => {
+    expect(normalizeThemeColor('#fff', FB)).toBe('#ffffff')
+    expect(normalizeThemeColor('#000', FB)).toBe('#000000')
+    expect(normalizeThemeColor('#abc', FB)).toBe('#aabbcc')
+  })
+
+  it('expands 4-digit shorthand with alpha', () => {
+    expect(normalizeThemeColor('#fff8', FB)).toBe('#ffffff88')
+    expect(normalizeThemeColor('#0000', FB)).toBe('#00000000')
+  })
+
+  it('passes valid 6- and 8-digit hex through unchanged', () => {
+    expect(normalizeThemeColor('#24292e', FB)).toBe('#24292e')
+    expect(normalizeThemeColor('#3a424d55', FB)).toBe('#3a424d55')
+  })
+
+  it('trims surrounding whitespace before matching', () => {
+    expect(normalizeThemeColor('  #fff  ', FB)).toBe('#ffffff')
+    expect(normalizeThemeColor('\t#24292e\n', FB)).toBe('#24292e')
+  })
+
+  it('falls back for empty / whitespace-only input', () => {
+    expect(normalizeThemeColor('', FB)).toBe(FB)
+    expect(normalizeThemeColor('   ', FB)).toBe(FB)
+  })
+
+  it('falls back for malformed-length hex', () => {
+    expect(normalizeThemeColor('#ff', FB)).toBe(FB)
+    expect(normalizeThemeColor('#fffff', FB)).toBe(FB)
+    expect(normalizeThemeColor('#fffffff', FB)).toBe(FB)
+  })
+
+  it('falls back for non-hex color forms Monaco token colors reject', () => {
+    expect(normalizeThemeColor('white', FB)).toBe(FB)
+    expect(normalizeThemeColor('rgb(255, 255, 255)', FB)).toBe(FB)
+    expect(normalizeThemeColor('oklch(1 0 0)', FB)).toBe(FB)
+    expect(normalizeThemeColor('var(--x)', FB)).toBe(FB)
+  })
+})

src/renderer/theme-color.ts

@@ -0,0 +1,34 @@
+// Guard for colors derived from theme CSS custom properties.
+//
+// Why this exists: Tailwind v4 (via Lightning CSS) minifies hex literals in
+// the generated stylesheet — `#ffffff` becomes `#fff`, `#000000` becomes
+// `#000`, etc. So reading a `--color-*` token back with getComputedStyle can
+// hand us a 3- or 4-digit shorthand even though the source CSS wrote the long
+// form. Most consumers cope, but Monaco's token color map does not: its
+// ColorMap.getId validates with `/^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/` and
+// THROWS `Illegal value for token color: <c>` on anything that isn't 6/8 hex.
+// Since `editor.foreground` / `editor.background` get folded into a token rule
+// by the standalone theme service, a minified `#fff` background crashes the
+// whole editor the moment it tokenizes (e.g. switching to the Hub Delight
+// theme). Normalizing every theme-derived color to canonical long-form hex
+// before it reaches a consumer keeps the strict ones happy.
+
+/** Expand shorthand hex (`#rgb`/`#rgba`) to long form (`#rrggbb`/`#rrggbbaa`),
+ *  pass valid long-form hex through unchanged, and return `fallback` for
+ *  anything we can't confidently canonicalize (named colors, `rgb()`/`oklch()`,
+ *  malformed 5/7-digit hex, empty). The result is always safe to hand to
+ *  Monaco's strict token color parser when `fallback` itself is valid hex. */
+export function normalizeThemeColor(raw: string, fallback: string): string {
+  const c = raw.trim()
+  if (!c) return fallback
+  const m = /^#([0-9a-fA-F]+)$/.exec(c)
+  if (!m) return fallback
+  const digits = m[1]
+  if (digits.length === 3 || digits.length === 4) {
+    let out = '#'
+    for (const ch of digits) out += ch + ch
+    return out
+  }
+  if (digits.length === 6 || digits.length === 8) return c
+  return fallback
+}