diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 672b4ed..03a5767 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -25,6 +25,15 @@ export const metadata: Metadata = { export const viewport: Viewport = { colorScheme: "dark light", + // Matches the light/dark backgrounds in globals.css so mobile browser + // chrome (the address/status bar) doesn't clash with the page the + // instant it loads — without this, browsers fall back to their own + // default (usually white), which visibly contradicts a near-black dark + // mode page (#224). + themeColor: [ + { media: "(prefers-color-scheme: light)", color: "#fbfbfd" }, + { media: "(prefers-color-scheme: dark)", color: "#0a0a0f" }, + ], }; export default function RootLayout({ diff --git a/src/components/dashboard/DashboardShell.tsx b/src/components/dashboard/DashboardShell.tsx index 1f07793..5760cce 100644 --- a/src/components/dashboard/DashboardShell.tsx +++ b/src/components/dashboard/DashboardShell.tsx @@ -71,7 +71,16 @@ export function DashboardShell({