From dff6e872ac8f889bbcd2f2f734a932fd0216743d Mon Sep 17 00:00:00 2001
From: SandObserver <260779319+SandObserver@users.noreply.github.com>
Date: Thu, 24 Sep 2026 23:35:14 -0400
Subject: [PATCH] Fix: keep Dashboard switch names readable in the light theme

---
 ui/test/dashboard-switch-light.test.mjs | 26 +++++++++++++++++++++++++
 ui/widgets/dashboard-switch/index.html  |  1 +
 2 files changed, 27 insertions(+)
 create mode 100644 ui/test/dashboard-switch-light.test.mjs

diff --git a/ui/test/dashboard-switch-light.test.mjs b/ui/test/dashboard-switch-light.test.mjs
new file mode 100644
index 0000000..be74d1f
--- /dev/null
+++ b/ui/test/dashboard-switch-light.test.mjs
@@ -0,0 +1,26 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const html = fs.readFileSync(
+  path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', 'widgets', 'dashboard-switch', 'index.html'),
+  'utf8',
+);
+
+const luminance = hex => {
+  const [r, g, b] = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255);
+  const lin = v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+const contrast = (a, b) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+test('keychain names on the light card clear 4.5:1', () => {
+  const m = html.match(/html\[data-theme="light"\] \.nm \{ fill:(#[0-9a-fA-F]{6}) \}/);
+  assert.ok(m, 'light theme sets a resting fill for .nm');
+  assert.ok(contrast(m[1], '#FFFFFF') >= 4.5, `${m[1]} on white is ${contrast(m[1], '#FFFFFF').toFixed(2)}:1`);
+});
diff --git a/ui/widgets/dashboard-switch/index.html b/ui/widgets/dashboard-switch/index.html
index 0623fbb..02e4128 100644
--- a/ui/widgets/dashboard-switch/index.html
+++ b/ui/widgets/dashboard-switch/index.html
@@ -30,6 +30,7 @@
   .rail { fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.10) }
   html[data-theme="light"] .rail { fill:rgba(0,0,0,.07); stroke:rgba(0,0,0,.14) }
   html[data-theme="light"],html[data-theme="light"] body { background:#ffffff; color:#000000 }
+  html[data-theme="light"] .nm { fill:#3a3a3c }
   html[data-theme="light"] .kc:hover .nm,html[data-theme="light"] .kc:focus-visible .nm,html[data-theme="light"] .kc.cur .nm { fill:#000000 }
   html[data-theme="light"] .kc:hover .chain,html[data-theme="light"] .kc:focus-visible .chain { filter:drop-shadow(0 3px 4px rgba(0,0,0,0.175)) }
 </style>