fix(web): Add scheme-aware theme-color for dark mode

[itz-puneet]

Fixes #3029

What

The web app declares no theme-color at all — grep finds no themeColor or theme-color anywhere — and apps/web/app/manifest.ts carries a single light value:

background_color: "#ffffff",
theme_color: "#ffffff",

Browser and installed-web-app chrome is painted from that, so on macOS (Safari → Add to Dock) the title bar stays white while the UI is in dark mode.

This adds themeColor to the existing viewport export in apps/web/app/layout.tsx with light and dark variants, so the chrome follows the active scheme. It mirrors the prefers-color-scheme pattern already used for the icons in metadata just above it.

On the dark value

The issue suggested #0f172a. I used #020817 instead, which is the hex form of this project's own --background token for .dark in tooling/tailwind/globals.css:

.dark {
  --background: 222.2 84% 4.9%;   /* -> #020817 */
}

hsl(222.2 84% 4.9%) converts to #020817, so the title bar matches the actual app background exactly rather than approximating it with slate-900. The light value #ffffff is likewise the :root --background (0 0% 100%).

Scope

• manifest.ts is left unchanged — the manifest's theme_color accepts only a single value, so the scheme-aware <meta> tags are the right mechanism here.
• Next.js 16 Viewport.themeColor accepts an array of { media, color } descriptors, which is what generates the two tags.
• These entries follow the OS color scheme. An in-app override via next-themes is not reflected here; that is addressed in the follow-up, feat(web): Sync theme-color with the in-app theme #3052.

Verification

Ran against this branch (c17504f) on a clean checkout, Node 22.23.2 / pnpm 11.2.1:

Check	Result
pnpm install --frozen-lockfile	passes
pnpm --filter @karakeep/web typecheck	passes — tsc --noEmit, exit 0
pnpm --filter @karakeep/web lint	passes — oxlint, 0 warnings / 0 errors across 328 files

To be precise about the limits: this confirms the change compiles and conforms to the repo's style. It does not confirm the chrome renders as intended — that check is manual, on a real macOS installed web app, which is the scenario #3029 reports and which I have not been able to run. A maintainer sanity-check there would be worthwhile.

[greptile-apps]

Greptile Summary

The PR adds light and dark browser theme colors to the root Next.js viewport metadata using prefers-color-scheme.

• Uses white for light system mode and the project’s #020817 background token for dark system mode.
• Leaves the manifest’s single theme color unchanged.

Confidence Score: 4/5

The theme-color synchronization issue should be fixed before merging because explicit app-theme overrides can still produce mismatched browser chrome.

The metadata shape is valid for the installed Next.js version, but its media queries follow only the OS preference while the existing user-facing theme toggle can independently select the opposite page theme.

Files Needing Attention: apps/web/app/layout.tsx

Important Files Changed

Filename	Overview
apps/web/app/layout.tsx	Adds valid scheme-aware viewport metadata, but OS-only media queries do not follow the app’s independent light/dark selection.

Prompt To Fix All With AI

### Issue 1
apps/web/app/layout.tsx:60-62
**Theme override leaves chrome mismatched**

When a user selects an app theme opposite to the operating-system preference, these static `prefers-color-scheme` entries retain the OS color while `next-themes` applies the selected theme to the page, causing light browser chrome over dark UI or dark chrome over light UI.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "fix(web): Add scheme-aware theme-color f..." | Re-trigger Greptile}

[Copilot]

🟢 Approval recommended

The change is low-risk static metadata; the only feedback is a minor comment clarification.

Pull request overview

Adds scheme-aware theme-color metadata to the Next.js app router viewport export so browser / installed PWA chrome can match light vs dark mode.

Changes:

• Add viewport.themeColor entries for (prefers-color-scheme: light) and (prefers-color-scheme: dark).
• Document intent to align the theme-color values with the Tailwind --background token.

File summaries

File	Description
apps/web/app/layout.tsx	Adds scheme-aware themeColor values to the exported viewport metadata.

Review details

• Files reviewed: 1/1 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.