fix: theme color parsing breaks on #rgb shorthand hex (#1213)

* refactor: add pure hexToRgb helper that handles #rgb shorthand

* fix: handle #rgb shorthand hex in theme color parsing

* test: hexToRgb expands shorthand and rejects invalid input

static/js/color/hex.js

@@ -0,0 +1,14 @@
+// static/js/color/hex.js
+//
+// Parse a CSS hex color into {r, g, b}. Pure — no DOM — so it can be reused
+// across modules and unit-tested under node.
+
+// Accepts "#rgb", "#rrggbb" (with or without the leading '#'). Returns null
+// for anything that isn't a valid 3- or 6-digit hex color.
+export function hexToRgb(hex) {
+  let h = String(hex || '').trim().replace(/^#/, '');
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return null;
+  const n = parseInt(h, 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}

static/js/theme.js

@@ -4,6 +4,7 @@
 import Storage from './storage.js';
 import uiModule from './ui.js';
 import { initColorPickers, attachColorPicker } from './colorPicker.js';
+import { hexToRgb } from './color/hex.js';
 import { makeWindowDraggable } from './windowDrag.js';
 import { snapModalToZone } from './tileManager.js';
 
@@ -128,10 +129,10 @@ function _syncCustomThemesToServer(ct) {
 
 // --- Syntax color derivation from theme base colors ---
 function hexToHSL(hex) {
-  hex = hex.replace('#', '');
+  const rgb = hexToRgb(hex) || { r: 0, g: 0, b: 0 };
-  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const r = rgb.r / 255;
-  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const g = rgb.g / 255;
-  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  const b = rgb.b / 255;
   const max = Math.max(r, g, b), min = Math.min(r, g, b);
   let h, s, l = (max + min) / 2;
   if (max === min) { h = s = 0; }
@@ -1797,8 +1798,7 @@ function _initPerlinFlow() {
     if (bg !== _cachedBg) {
       _cachedBg = bg;
       // Parse hex to rgb for rgba fade
-      const h = bg.replace('#', '');
+      const { r, g, b } = hexToRgb(bg) || { r: 0, g: 0, b: 0 };
-      const r = parseInt(h.substring(0, 2), 16), g = parseInt(h.substring(2, 4), 16), b = parseInt(h.substring(4, 6), 16);
       _fadeStyle = `rgba(${r},${g},${b},0.02)`;
     }
     return _fadeStyle;
@@ -1982,9 +1982,8 @@ function _initEmbers() {
     return s.getPropertyValue('--bg-effect-color').trim() || s.getPropertyValue('--fg').trim() || '#c9a95a';
   }
   function rgba(hex, a) {
-    const h = hex.replace('#', '');
+    const { r, g, b } = hexToRgb(hex) || { r: 0, g: 0, b: 0 };
-    const n = parseInt(h, 16);
+    return `rgba(${r},${g},${b},${a})`;
-    return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
   }
   function draw() {
     if (!document.body.classList.contains('bg-pattern-embers')) {

tests/test_hex_to_rgb_js.py

@@ -0,0 +1,49 @@
+"""Pin the pure hexToRgb helper (static/js/color/hex.js).
+
+Driven through `node --input-type=module` (same approach as test_compare_js.py);
+skips when `node` is not installed.
+
+Regression: theme.js parsed hex with fixed substring(0,2)/(2,4)/(4,6) slices, so
+a 3-digit shorthand like "#abc" produced NaN channels (the color picker already
+expanded shorthand correctly — theme parsing did not).
+"""
+import json
+import shutil
+import subprocess
+from pathlib import Path
+
+import pytest
+
+_REPO = Path(__file__).resolve().parent.parent
+_HELPER = _REPO / "static" / "js" / "color" / "hex.js"
+_HAS_NODE = shutil.which("node") is not None
+
+
+def _rgb(hex_str: str):
+    js = (
+        f"import {{ hexToRgb }} from '{_HELPER.as_posix()}';"
+        f"console.log(JSON.stringify(hexToRgb({json.dumps(hex_str)})));"
+    )
+    proc = subprocess.run(
+        ["node", "--input-type=module"],
+        input=js, capture_output=True, text=True, cwd=str(_REPO), timeout=30,
+    )
+    assert proc.returncode == 0, proc.stderr
+    return json.loads(proc.stdout.strip())
+
+
+@pytest.mark.skipif(not _HAS_NODE, reason="node binary not on PATH")
+def test_shorthand_expands():
+    assert _rgb("#abc") == {"r": 0xAA, "g": 0xBB, "b": 0xCC}
+
+
+@pytest.mark.skipif(not _HAS_NODE, reason="node binary not on PATH")
+def test_full_form_and_no_hash():
+    assert _rgb("#ff8800") == {"r": 255, "g": 136, "b": 0}
+    assert _rgb("ff8800") == {"r": 255, "g": 136, "b": 0}
+
+
+@pytest.mark.skipif(not _HAS_NODE, reason="node binary not on PATH")
+def test_invalid_returns_null():
+    assert _rgb("nothex") is None
+    assert _rgb("") is None