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