@agent-native/toolkit 0.213.1 → 0.216.0

package/src/app/i18n/catalogs/fr-FR.ts

@@ -1068,6 +1068,11 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "A travaillé",
   "tool.workedFor": "A travaillé pendant {{duration}}",
   "widget.chart": "Graphique",
+  "widget.chartActions": "Actions du graphique",
+  "widget.chartRowsOmitted":
+    "Ce graphique n’affiche qu’une partie des lignes disponibles.",
+  "widget.dataSources": "Sources de données",
+  "widget.tableActions": "Actions du tableau",
   "widget.dataChart": "Graphique de données",
   "widget.dataInsights": "Informations sur les données",
   "widget.dataTable": "Tableau de données",
@@ -2245,6 +2250,13 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsShell.account.languageAndRegion": "Langue et région",
   "settingsShell.account.languageDescription":
     "S’applique sur tous vos appareils.",
+  "settingsShell.account.appearance": "Apparence",
+  "settingsShell.account.themeFamily": "Famille de thème",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal":
+    "Couleurs d’origine de l’application",
+  "settingsShell.account.themeFamilySaveError":
+    "Impossible de mettre à jour le thème. Réessayez.",
   "settingsShell.account.manage": "Gérer",
   "settingsShell.account.name": "Nom",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/hi-IN.ts

@@ -1491,6 +1491,10 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "काम किया",
   "tool.workedFor": "{{duration}} तक काम किया",
   "widget.chart": "चार्ट",
+  "widget.chartActions": "चार्ट कार्रवाइयाँ",
+  "widget.chartRowsOmitted": "यह चार्ट उपलब्ध पंक्तियों में से केवल कुछ दिखाता है।",
+  "widget.dataSources": "डेटा स्रोत",
+  "widget.tableActions": "टेबल कार्रवाइयाँ",
   "widget.dataChart": "डेटा चार्ट",
   "widget.dataInsights": "डेटा इनसाइट्स",
   "widget.dataTable": "डेटा तालिका",
@@ -2063,6 +2067,12 @@ const messages: ToolkitAgentChatTranslation = {
     "इस बदलाव की पुष्टि करने के निर्देशों के लिए अपना ईमेल देखें।",
   "settingsShell.account.languageAndRegion": "भाषा और क्षेत्र",
   "settingsShell.account.languageDescription": "आपके सभी डिवाइस पर लागू होता है।",
+  "settingsShell.account.appearance": "रूप-रंग",
+  "settingsShell.account.themeFamily": "थीम शैली",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "ऐप के मूल रंग",
+  "settingsShell.account.themeFamilySaveError":
+    "थीम शैली अपडेट नहीं की जा सकी। फिर कोशिश करें।",
   "settingsShell.account.manage": "प्रबंधित करें",
   "settingsShell.account.name": "नाम",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/ja-JP.ts

@@ -1536,6 +1536,11 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "作業しました",
   "tool.workedFor": "{{duration}} 作業しました",
   "widget.chart": "チャート",
+  "widget.chartActions": "チャート操作",
+  "widget.chartRowsOmitted":
+    "このグラフには、利用可能な行の一部のみが表示されます。",
+  "widget.dataSources": "データソース",
+  "widget.tableActions": "テーブル操作",
   "widget.dataChart": "データチャート",
   "widget.dataInsights": "データインサイト",
   "widget.dataTable": "データテーブル",
@@ -2093,6 +2098,12 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsShell.account.languageAndRegion": "言語と地域",
   "settingsShell.account.languageDescription":
     "すべてのデバイスに適用されます。",
+  "settingsShell.account.appearance": "外観",
+  "settingsShell.account.themeFamily": "テーマ",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "アプリのオリジナルカラー",
+  "settingsShell.account.themeFamilySaveError":
+    "テーマを更新できませんでした。もう一度お試しください。",
   "settingsShell.account.manage": "管理",
   "settingsShell.account.name": "名前",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/ko-KR.ts

@@ -1510,6 +1510,10 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "작업함",
   "tool.workedFor": "{{duration}} 동안 작업함",
   "widget.chart": "차트",
+  "widget.chartActions": "차트 작업",
+  "widget.chartRowsOmitted": "이 차트에는 사용 가능한 행 중 일부만 표시됩니다.",
+  "widget.dataSources": "데이터 소스",
+  "widget.tableActions": "표 작업",
   "widget.dataChart": "데이터 차트",
   "widget.dataInsights": "데이터 인사이트",
   "widget.dataTable": "데이터 테이블",
@@ -2057,6 +2061,12 @@ const messages: ToolkitAgentChatTranslation = {
     "이메일을 확인하고 안내에 따라 이 변경을 확정하세요.",
   "settingsShell.account.languageAndRegion": "언어 및 지역",
   "settingsShell.account.languageDescription": "모든 기기에 적용됩니다.",
+  "settingsShell.account.appearance": "모양",
+  "settingsShell.account.themeFamily": "테마 스타일",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "앱의 원래 색상",
+  "settingsShell.account.themeFamilySaveError":
+    "테마 스타일을 업데이트하지 못했습니다. 다시 시도하세요.",
   "settingsShell.account.manage": "관리",
   "settingsShell.account.name": "이름",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/pt-BR.ts

@@ -1055,6 +1055,11 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "Trabalhou",
   "tool.workedFor": "Trabalhou por {{duration}}",
   "widget.chart": "Gráfico",
+  "widget.chartActions": "Ações do gráfico",
+  "widget.chartRowsOmitted":
+    "Este gráfico mostra apenas algumas das linhas disponíveis.",
+  "widget.dataSources": "Fontes de dados",
+  "widget.tableActions": "Ações da tabela",
   "widget.dataChart": "Gráfico de dados",
   "widget.dataInsights": "Insights de dados",
   "widget.dataTable": "Tabela de dados",
@@ -2220,6 +2225,12 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsShell.account.languageAndRegion": "Idioma e região",
   "settingsShell.account.languageDescription":
     "Vale para todos os seus dispositivos.",
+  "settingsShell.account.appearance": "Aparência",
+  "settingsShell.account.themeFamily": "Família do tema",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "Cores originais do app",
+  "settingsShell.account.themeFamilySaveError":
+    "Não foi possível atualizar o tema. Tente novamente.",
   "settingsShell.account.manage": "Gerenciar",
   "settingsShell.account.name": "Nome",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/zh-CN.ts

@@ -1419,6 +1419,10 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "已处理",
   "tool.workedFor": "处理了 {{duration}}",
   "widget.chart": "图表",
+  "widget.chartActions": "图表操作",
+  "widget.chartRowsOmitted": "此图表仅显示部分可用行。",
+  "widget.dataSources": "数据来源",
+  "widget.tableActions": "表格操作",
   "widget.dataChart": "数据图表",
   "widget.dataInsights": "数据洞察",
   "widget.dataTable": "数据表",
@@ -1940,6 +1944,11 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsShell.account.emailChangeSent": "请查看您的邮箱，按说明确认此更改。",
   "settingsShell.account.languageAndRegion": "语言和地区",
   "settingsShell.account.languageDescription": "适用于您的所有设备。",
+  "settingsShell.account.appearance": "外观",
+  "settingsShell.account.themeFamily": "主题样式",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "原应用配色",
+  "settingsShell.account.themeFamilySaveError": "无法更新主题样式。请重试。",
   "settingsShell.account.manage": "管理",
   "settingsShell.account.name": "姓名",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/zh-TW.ts

@@ -1424,6 +1424,10 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "已處理",
   "tool.workedFor": "處理了 {{duration}}",
   "widget.chart": "圖表",
+  "widget.chartActions": "圖表操作",
+  "widget.chartRowsOmitted": "此圖表僅顯示部分可用資料列。",
+  "widget.dataSources": "資料來源",
+  "widget.tableActions": "表格操作",
   "widget.dataChart": "資料圖表",
   "widget.dataInsights": "資料洞察",
   "widget.dataTable": "資料表",
@@ -1950,6 +1954,12 @@ const messages: ToolkitAgentChatTranslation = {
     "請查看您的電子郵件，依照說明確認此變更。",
   "settingsShell.account.languageAndRegion": "語言和地區",
   "settingsShell.account.languageDescription": "套用至您的所有裝置。",
+  "settingsShell.account.appearance": "外觀",
+  "settingsShell.account.themeFamily": "主題樣式",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "原始應用程式配色",
+  "settingsShell.account.themeFamilySaveError":
+    "無法更新主題樣式，請再試一次。",
   "settingsShell.account.manage": "管理",
   "settingsShell.account.name": "姓名",
   "settingsShell.account.nameDescription":

package/src/app/providers/AppProviders.spec.tsx

@@ -9,12 +9,17 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { resetAgentEngineReadinessForTests } from "../../../../core/src/client/agent-engine-readiness.js";
 
 const useSessionMock = vi.fn();
+const useThemeFamilyMock = vi.fn();
 vi.mock("@agent-native/core/client/use-session", async (importOriginal) => ({
   ...(await importOriginal<
     typeof import("@agent-native/core/client/use-session")
   >()),
   useSession: () => useSessionMock(),
 }));
+vi.mock("@agent-native/core/client/ui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@agent-native/core/client/ui")>()),
+  useThemeFamily: () => useThemeFamilyMock(),
+}));
 vi.mock("@agent-native/core/client/action-query-cache", () => ({
   ActionQueryCacheGate: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="action-query-cache-gate">{children}</div>
@@ -48,9 +53,34 @@ let originalLocation: Location;
 let originalParent: Window;
 let originalFetch: typeof window.fetch;
 let originalModelContext: PropertyDescriptor | undefined;
+let originalLocalStorage: PropertyDescriptor | undefined;
 let originalDocumentTitle: string;
 let replaceMock: ReturnType<typeof vi.fn>;
 
+function createTestLocalStorage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    get length() {
+      return values.size;
+    },
+    clear() {
+      values.clear();
+    },
+    getItem(key) {
+      return values.get(String(key)) ?? null;
+    },
+    key(index) {
+      return [...values.keys()][index] ?? null;
+    },
+    removeItem(key) {
+      values.delete(String(key));
+    },
+    setItem(key, value) {
+      values.set(String(key), String(value));
+    },
+  };
+}
+
 beforeEach(() => {
   resetAgentEngineReadinessForTests();
   container = document.createElement("div");
@@ -64,6 +94,14 @@ beforeEach(() => {
     document,
     "modelContext",
   );
+  originalLocalStorage = Object.getOwnPropertyDescriptor(
+    window,
+    "localStorage",
+  );
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    value: createTestLocalStorage(),
+  });
   Object.defineProperty(window, "fetch", {
     configurable: true,
     value: vi
@@ -102,6 +140,11 @@ afterEach(() => {
     configurable: true,
     value: originalFetch,
   });
+  if (originalLocalStorage) {
+    Object.defineProperty(window, "localStorage", originalLocalStorage);
+  } else {
+    delete (window as Window & { localStorage?: Storage }).localStorage;
+  }
   if (originalModelContext) {
     Object.defineProperty(document, "modelContext", originalModelContext);
   } else {
@@ -115,6 +158,7 @@ function renderProviders(props: {
   isPublicPath?: boolean;
   sessionBypass?: boolean;
   skipFirstRunOnboarding?: boolean;
+  enableThemeFamily?: boolean;
   disableWebMcp?: boolean;
   children?: React.ReactNode;
 }) {
@@ -183,6 +227,33 @@ const SIGNED_IN_SESSION = {
 };
 
 describe("AppProviders session gate", () => {
+  it("mounts theme-family sync by default in an authenticated app shell", async () => {
+    useSessionMock.mockReturnValue(SIGNED_IN_SESSION);
+
+    renderProviders({ skipFirstRunOnboarding: true });
+    await act(async () => {
+      await import("./ThemeFamilySync.js");
+    });
+
+    expect(useThemeFamilyMock).toHaveBeenCalledOnce();
+  });
+
+  it("allows an authenticated app shell to disable theme-family sync", () => {
+    useSessionMock.mockReturnValue(SIGNED_IN_SESSION);
+
+    renderProviders({ skipFirstRunOnboarding: true, enableThemeFamily: false });
+
+    expect(useThemeFamilyMock).not.toHaveBeenCalled();
+  });
+
+  it("does not load theme-family settings on public routes", () => {
+    useSessionMock.mockReturnValue(SIGNED_OUT_SESSION);
+
+    renderProviders({ isPublicPath: true });
+
+    expect(useThemeFamilyMock).not.toHaveBeenCalled();
+  });
+
   it("uses Toolkit's theme-aware toaster by default", () => {
     useSessionMock.mockReturnValue(SIGNED_OUT_SESSION);
 

package/src/app/providers/AppProviders.tsx

@@ -95,6 +95,8 @@ export interface AppProvidersProps {
    */
   ownsDocument?: boolean;
 
+  enableThemeFamily?: boolean;
+
   documentTitleFallback?: string;
 
   children: React.ReactNode;
@@ -397,6 +399,8 @@ function AgentEngineReadinessBootstrap() {
   return null;
 }
 
+const ThemeFamilySync = React.lazy(() => import("./ThemeFamilySync.js"));
+
 function ProvidersInner({
   queryClient,
   defaultTheme = "system",
@@ -507,6 +511,7 @@ export function AppProviders({
   i18n,
   documentTitleFallback,
   ownsDocument = true,
+  enableThemeFamily = true,
   children,
 }: AppProvidersProps) {
   const fallback = clientOnlyFallback ?? (
@@ -543,6 +548,11 @@ export function AppProviders({
         children
       ) : (
         <>
+          {ownsDocument && enableThemeFamily ? (
+            <React.Suspense fallback={null}>
+              <ThemeFamilySync />
+            </React.Suspense>
+          ) : null}
           <AgentEngineReadinessBootstrap />
           <FirstRunOnboardingStartupGate
             suppressSurface={skipFirstRunOnboarding}

package/src/app/providers/ThemeFamilySync.tsx

@@ -0,0 +1,6 @@
+import { useThemeFamily } from "@agent-native/core/client/ui";
+
+export default function ThemeFamilySync() {
+  useThemeFamily();
+  return null;
+}

package/src/app/settings/account/PreferencesSettings.spec.tsx

@@ -25,6 +25,9 @@ vi.mock("../VoiceTranscriptionSection.js", () => ({
     <div data-testid="voice" data-compact={String(!!compact)} />
   ),
 }));
+vi.mock("./ThemeFamilySettings.js", () => ({
+  ThemeFamilySettings: () => <div data-testid="theme-family-settings" />,
+}));
 
 import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 
@@ -70,12 +73,14 @@ describe("PreferencesSettings", () => {
     const groups = [...container.querySelectorAll("section")];
     expect(groups.map((group) => group.id)).toEqual([
       "language-region",
+      "appearance",
       "voice-input",
     ]);
     expect(groups[0]!.querySelector("h2")?.textContent).toBe(
       "Language and region",
     );
-    expect(groups[1]!.querySelector("h2")?.textContent).toBe("Voice input");
+    expect(groups[1]!.querySelector("h2")?.textContent).toBe("Appearance");
+    expect(groups[2]!.querySelector("h2")?.textContent).toBe("Voice input");
 
     const language = container.querySelector("#interface-language");
     expect(language?.textContent).toContain("Interface language");
@@ -90,8 +95,14 @@ describe("PreferencesSettings", () => {
       "Used for timestamps and scheduled automations.",
     );
 
+    const themeFamily = container.querySelector("#theme-family");
+    expect(themeFamily?.textContent).toContain("Theme family");
+    expect(
+      themeFamily?.querySelector('[data-testid="theme-family-settings"]'),
+    ).not.toBeNull();
+
     expect(
-      groups[1]!
+      groups[2]!
         .querySelector('[data-testid="voice"]')
         ?.getAttribute("data-compact"),
     ).toBe("true");

package/src/app/settings/account/PreferencesSettings.tsx

@@ -4,6 +4,7 @@ import { LanguagePicker } from "../../shared/index.js";
 import { SchedulingTimezoneField } from "../SchedulingTimezoneField.js";
 import { SettingsGroup, SettingsRow } from "../SettingsRow.js";
 import { VoiceTranscriptionSection } from "../VoiceTranscriptionSection.js";
+import { ThemeFamilySettings } from "./ThemeFamilySettings.js";
 
 const key = (name: string) => `agentChat.settingsShell.account.${name}`;
 
@@ -37,6 +38,13 @@ export function PreferencesSettings() {
           control={<SchedulingTimezoneField compact />}
         />
       </SettingsGroup>
+      <SettingsGroup id="appearance" title={t(key("appearance"))}>
+        <SettingsRow
+          id="theme-family"
+          label={t(key("themeFamily"))}
+          control={<ThemeFamilySettings />}
+        />
+      </SettingsGroup>
       <SettingsGroup id="voice-input" title={t(key("voiceInput"))}>
         <VoiceTranscriptionSection compact />
       </SettingsGroup>

package/src/app/settings/account/ThemeFamilySettings.tsx

@@ -0,0 +1,61 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useThemeFamily, type ThemeFamily } from "@agent-native/core/client/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { useState } from "react";
+
+const key = (name: string) => `agentChat.settingsShell.account.${name}`;
+
+export function ThemeFamilySettings() {
+  const t = useT();
+  const { family, status, setFamily } = useThemeFamily();
+  const [saving, setSaving] = useState(false);
+  const [saveFailed, setSaveFailed] = useState(false);
+
+  async function changeFamily(value: string) {
+    if (value !== "agent-native" && value !== "original") return;
+    if (value === family) return;
+
+    setSaving(true);
+    setSaveFailed(false);
+    try {
+      await setFamily(value as ThemeFamily);
+    } catch {
+      setSaveFailed(true);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="w-full sm:w-56">
+      <Select
+        value={family}
+        onValueChange={(value) => void changeFamily(value)}
+        disabled={saving || status === "loading"}
+      >
+        <SelectTrigger aria-label={t(key("themeFamily"))}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="agent-native">
+            {t(key("themeFamilyAgentNative"))}
+          </SelectItem>
+          <SelectItem value="original">
+            {t(key("themeFamilyOriginal"))}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      {saveFailed || status === "error" ? (
+        <p className="mt-2 text-xs text-destructive" role="alert">
+          {t(key("themeFamilySaveError"))}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/app/settings/account/search-entries.ts

@@ -33,6 +33,12 @@ export const PREFERENCES_SEARCH_ENTRIES: readonly SettingsPageSearchEntry[] = [
     keywords: "language locale translation",
     anchor: "interface-language",
   },
+  {
+    id: "theme-family",
+    labelKey: key("themeFamily"),
+    keywords: "theme appearance style colors",
+    anchor: "theme-family",
+  },
   {
     id: "timezone",
     labelKey: key("timezone"),

package/src/app/shared/DefaultSpinner.spec.tsx

@@ -0,0 +1,14 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { DefaultSpinner } from "./DefaultSpinner.js";
+
+describe("DefaultSpinner theme styles", () => {
+  it("uses the selected dark theme instead of the operating system preference", () => {
+    const html = renderToStaticMarkup(<DefaultSpinner />);
+
+    expect(html).toContain("html.dark");
+    expect(html).toContain('html[data-theme="dark"]');
+    expect(html).not.toContain("prefers-color-scheme");
+  });
+});

package/src/app/shared/DefaultSpinner.tsx

@@ -117,11 +117,10 @@ export function DefaultSpinner({
           background: hsl(var(--background, 0 0% 100%));
           color: hsl(var(--foreground, 240 10% 3.9%));
         }
-        @media (prefers-color-scheme: dark) {
-          html {
-            background: hsl(var(--background, 240 10% 3.9%));
-            color: hsl(var(--foreground, 0 0% 98%));
-          }
+        html.dark,
+        html[data-theme="dark"]:not(.light) {
+          background: hsl(var(--background, 240 10% 3.9%));
+          color: hsl(var(--foreground, 0 0% 98%));
         }
       `}</style>
     </div>

package/src/app/shared/ErrorBoundary.spec.tsx

@@ -1,6 +1,18 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
-import { isExpectedRouteNotFound } from "./ErrorBoundary.js";
+import {
+  isExpectedRouteNotFound,
+  resolveErrorBoundaryThemeClass,
+} from "./ErrorBoundary.js";
+
+function themeRoot(className: string, dataTheme: string | null) {
+  return {
+    classList: {
+      contains: (name: string) => className.split(" ").includes(name),
+    },
+    getAttribute: () => dataTheme,
+  } as unknown as Pick<HTMLElement, "classList" | "getAttribute">;
+}
 
 describe("isExpectedRouteNotFound", () => {
   it("recognizes React Router 404 responses", () => {
@@ -26,3 +38,34 @@ describe("isExpectedRouteNotFound", () => {
     ).toBe(false);
   });
 });
+
+describe("resolveErrorBoundaryThemeClass", () => {
+  it("honors an explicit data theme before storage or the system preference", () => {
+    const readStoredTheme = vi.fn(() => "dark");
+    const readSystemTheme = vi.fn(() => true);
+
+    expect(
+      resolveErrorBoundaryThemeClass(
+        themeRoot("", "light"),
+        readStoredTheme,
+        readSystemTheme,
+      ),
+    ).toBe("light");
+    expect(readStoredTheme).not.toHaveBeenCalled();
+    expect(readSystemTheme).not.toHaveBeenCalled();
+  });
+
+  it("uses the system theme only when no explicit theme is selected", () => {
+    const readStoredTheme = vi.fn(() => null);
+    const readSystemTheme = vi.fn(() => true);
+
+    expect(
+      resolveErrorBoundaryThemeClass(
+        themeRoot("", null),
+        readStoredTheme,
+        readSystemTheme,
+      ),
+    ).toBe("dark");
+    expect(readSystemTheme).toHaveBeenCalledOnce();
+  });
+});

package/src/app/shared/ErrorBoundary.tsx

@@ -196,21 +196,46 @@ function useErrorCopy() {
 function useApplyThemeClass() {
   useEffect(() => {
     const root = document.documentElement;
-    if (root.classList.contains("dark") || root.classList.contains("light"))
-      return;
-    try {
-      const stored = localStorage.getItem("theme");
-      if (stored === "dark") {
-        root.classList.add("dark");
-      } else if (stored === "light") {
-        root.classList.add("light");
-      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        root.classList.add("dark");
-      }
-    } catch {}
+    let storageUnreadable = false;
+    const theme = resolveErrorBoundaryThemeClass(
+      root,
+      () => {
+        try {
+          return localStorage.getItem("theme");
+        } catch {
+          storageUnreadable = true;
+          return null;
+        }
+      },
+      () =>
+        window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false,
+    );
+    if (storageUnreadable) {
+      root.setAttribute("data-theme-status", "unreadable");
+    } else {
+      root.removeAttribute("data-theme-status");
+    }
+    if (theme) root.classList.add(theme);
   }, []);
 }
 
+export function resolveErrorBoundaryThemeClass(
+  root: Pick<HTMLElement, "classList" | "getAttribute">,
+  readStoredTheme: () => string | null,
+  readSystemTheme: () => boolean,
+): "dark" | "light" | undefined {
+  if (root.classList.contains("dark") || root.classList.contains("light")) {
+    return undefined;
+  }
+
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark" || dataTheme === "light") return dataTheme;
+
+  const storedTheme = readStoredTheme();
+  if (storedTheme === "dark" || storedTheme === "light") return storedTheme;
+  return readSystemTheme() ? "dark" : undefined;
+}
+
 function errorMessageOf(error: unknown): string {
   if (error instanceof Error) return error.message;
   return typeof error === "string" ? error : "";

package/src/app/shared/PoweredByBadge.spec.tsx

@@ -0,0 +1,16 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { PoweredByBadge } from "./PoweredByBadge.js";
+
+describe("PoweredByBadge theme styles", () => {
+  it("follows the selected theme classes and data attribute", () => {
+    const html = renderToStaticMarkup(<PoweredByBadge />);
+
+    expect(html).toContain("html.dark");
+    expect(html).toContain('html[data-theme="dark"]');
+    expect(html).toContain("html.light");
+    expect(html).toContain('html[data-theme="light"]');
+    expect(html).not.toContain("prefers-color-scheme");
+  });
+});