From b9e0bd1ce0cf355a6b42f4a8074775f6b78279c8 Mon Sep 17 00:00:00 2001
From: thephez <thephez@users.noreply.github.com>
Date: Wed, 6 May 2026 11:21:38 -0400
Subject: [PATCH] fix(dashproof-lab): make success/error notices and toasts
 readable in light theme

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 example-apps/dashproof-lab/src/App.tsx             |  4 +++-
 .../src/components/OperationResultNotice.tsx       |  5 +++--
 example-apps/dashproof-lab/src/hooks/useTheme.ts   |  6 +++++-
 example-apps/dashproof-lab/src/styles/globals.css  | 14 ++++++++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/example-apps/dashproof-lab/src/App.tsx b/example-apps/dashproof-lab/src/App.tsx
index 41e52ec..752dfb7 100644
--- a/example-apps/dashproof-lab/src/App.tsx
+++ b/example-apps/dashproof-lab/src/App.tsx
@@ -11,6 +11,7 @@ import { OperationResultNotice } from "./components/OperationResultNotice";
 import { VerifyPanel } from "./components/VerifyPanel";
 import type { TopTab } from "./components/Tabs";
 import { useSession } from "./session/useSession";
+import { useTheme } from "./hooks/useTheme";
 
 const screenCopy: Record<TopTab, { title: string; subtitle: string }> = {
   anchor: {
@@ -35,6 +36,7 @@ const screenCopy: Record<TopTab, { title: string; subtitle: string }> = {
 
 function App() {
   const session = useSession();
+  const { theme } = useTheme();
   const { status, enterReadOnly } = session;
   const [tab, setTab] = useState<TopTab>("anchor");
   const [loginOpen, setLoginOpen] = useState(false);
@@ -57,7 +59,7 @@ function App() {
 
   return (
     <>
-      <Toaster position="bottom-center" />
+      <Toaster position="bottom-center" theme={theme} richColors />
       <AppShell
         tab={tab}
         onTabChange={setTab}
diff --git a/example-apps/dashproof-lab/src/components/OperationResultNotice.tsx b/example-apps/dashproof-lab/src/components/OperationResultNotice.tsx
index 6b51245..3b15925 100644
--- a/example-apps/dashproof-lab/src/components/OperationResultNotice.tsx
+++ b/example-apps/dashproof-lab/src/components/OperationResultNotice.tsx
@@ -11,9 +11,10 @@ const toneClass: Record<
   string
 > = {
   info: "border-line bg-surface text-ink-2",
-  success: "border-[oklch(38%_0.08_150)] bg-[oklch(24%_0.03_150)] text-ink",
+  success:
+    "border-[var(--color-success-border)] bg-[var(--color-success-bg)] text-[var(--color-success-fg)]",
   error:
-    "border-[oklch(30%_0.08_25)] bg-[oklch(22%_0.04_25)] text-[oklch(84%_0.08_25)]",
+    "border-[var(--color-error-border)] bg-[var(--color-error-bg)] text-[var(--color-error-fg)]",
 };
 
 export function OperationResultNotice({
diff --git a/example-apps/dashproof-lab/src/hooks/useTheme.ts b/example-apps/dashproof-lab/src/hooks/useTheme.ts
index 1315d08..6fdcbd6 100644
--- a/example-apps/dashproof-lab/src/hooks/useTheme.ts
+++ b/example-apps/dashproof-lab/src/hooks/useTheme.ts
@@ -58,7 +58,11 @@ export function __resetThemeStoreForTests(): void {
 }
 
 export function useTheme() {
-  const theme = useSyncExternalStore(subscribe, readCurrent, () => "dark");
+  const theme = useSyncExternalStore<Theme>(
+    subscribe,
+    readCurrent,
+    () => "dark",
+  );
 
   const setTheme = useCallback((next: Theme) => {
     setThemeStore(next);
diff --git a/example-apps/dashproof-lab/src/styles/globals.css b/example-apps/dashproof-lab/src/styles/globals.css
index 6d0beec..d021a14 100644
--- a/example-apps/dashproof-lab/src/styles/globals.css
+++ b/example-apps/dashproof-lab/src/styles/globals.css
@@ -17,6 +17,13 @@
   --color-accent-dim: #016fbd;
   --color-danger: oklch(68% 0.2 25);
 
+  --color-success-bg: oklch(24% 0.03 150);
+  --color-success-border: oklch(38% 0.08 150);
+  --color-success-fg: oklch(96% 0.008 90);
+  --color-error-bg: oklch(22% 0.04 25);
+  --color-error-border: oklch(30% 0.08 25);
+  --color-error-fg: oklch(84% 0.08 25);
+
   --font-sans:
     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-mono:
@@ -43,6 +50,13 @@
   --color-ink-4: oklch(62% 0.012 260);
 
   --color-danger: oklch(55% 0.22 25);
+
+  --color-success-bg: oklch(95% 0.04 150);
+  --color-success-border: oklch(75% 0.12 150);
+  --color-success-fg: oklch(28% 0.08 150);
+  --color-error-bg: oklch(96% 0.03 25);
+  --color-error-border: oklch(78% 0.14 25);
+  --color-error-fg: oklch(35% 0.15 25);
 }
 
 html,