fix(dashproof-lab): make success/error notices and toasts readable in light theme (#76)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: thephez

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}

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({

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);

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,