Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thephez merged 1 commit into from
May 6, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion example-apps/dashproof-lab/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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);
Expand All @@ -57,7 +59,7 @@ function App() {

return (
<>
<Toaster position="bottom-center" />
<Toaster position="bottom-center" theme={theme} richColors />
<AppShell
tab={tab}
onTabChange={setTab}
Expand Down
5 changes: 3 additions & 2 deletions example-apps/dashproof-lab/src/components/OperationResultNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
6 changes: 5 additions & 1 deletion example-apps/dashproof-lab/src/hooks/useTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
14 changes: 14 additions & 0 deletions example-apps/dashproof-lab/src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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,
Expand Down