From 5ab585ab4aa7d03273ddc77b321f6fe4b6048a3b Mon Sep 17 00:00:00 2001
From: Vincent Koc <vincentkoc@ieee.org>
Date: Wed, 11 Mar 2026 01:19:10 -0400
Subject: [PATCH] UI: normalize light theme data token

---
 ui/src/ui/app-settings.test.ts | 16 ++++++++++++++++
 ui/src/ui/app-settings.ts      |  3 ++-
 ui/src/ui/theme.ts             |  4 ++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/src/ui/app-settings.test.ts b/ui/src/ui/app-settings.test.ts
index c7b20510795..ff726d925d0 100644
--- a/ui/src/ui/app-settings.test.ts
+++ b/ui/src/ui/app-settings.test.ts
@@ -216,4 +216,20 @@ describe("setTabFromRoute", () => {
     listeners[0]?.({ matches: false } as MediaQueryListEvent);
     expect(host.themeResolved).toBe("openknot-light");
   });
+
+  it("normalizes light family themes to the shared light CSS token", async () => {
+    appSettings ??= await import("./app-settings.ts");
+    const root = {
+      dataset: {} as DOMStringMap,
+      style: { colorScheme: "" } as CSSStyleDeclaration & { colorScheme: string },
+    };
+    vi.stubGlobal("document", { documentElement: root } as Document);
+
+    const host = createHost("chat");
+    appSettings.applyResolvedTheme(host, "dash-light");
+
+    expect(host.themeResolved).toBe("dash-light");
+    expect(root.dataset.theme).toBe("light");
+    expect(root.style.colorScheme).toBe("light");
+  });
 });
diff --git a/ui/src/ui/app-settings.ts b/ui/src/ui/app-settings.ts
index 28afa2ec2b4..f7ed785b69a 100644
--- a/ui/src/ui/app-settings.ts
+++ b/ui/src/ui/app-settings.ts
@@ -38,6 +38,7 @@ import { saveSettings, type UiSettings } from "./storage.ts";
 import { startThemeTransition, type ThemeTransitionContext } from "./theme-transition.ts";
 import {
   colorSchemeForTheme,
+  dataThemeForTheme,
   resolveTheme,
   type ResolvedTheme,
   type ThemeMode,
@@ -299,7 +300,7 @@ export function applyResolvedTheme(host: SettingsHost, resolved: ResolvedTheme)
     return;
   }
   const root = document.documentElement;
-  root.dataset.theme = resolved;
+  root.dataset.theme = dataThemeForTheme(resolved);
   root.style.colorScheme = colorSchemeForTheme(resolved);
 }
 
diff --git a/ui/src/ui/theme.ts b/ui/src/ui/theme.ts
index 1e30beab47d..84f075a4ba1 100644
--- a/ui/src/ui/theme.ts
+++ b/ui/src/ui/theme.ts
@@ -97,3 +97,7 @@ export function colorSchemeForTheme(theme: ResolvedTheme): "light" | "dark" {
     ? "light"
     : "dark";
 }
+
+export function dataThemeForTheme(theme: ResolvedTheme): ResolvedTheme | "light" {
+  return colorSchemeForTheme(theme) === "light" ? "light" : theme;
+}