fix: sync dark mode to the page background in full-page shells by sorenbs · Pull Request #1549 · prisma/studio

sorenbs · 2026-07-18T07:47:29Z

Root cause

All Studio theming is scoped to the .ps root (:root → .ps rewrite in postcss config), and the theme hook only toggled dark on .ps roots. Nothing ever reached <html>/<body>, so in full-page shells the page canvas stayed browser-default white — visible in overscroll areas and behind Studio's rounded corners.

Fix

Rather than moving ps dark to <html> (which would leak Studio styles into embedding hosts), the theme hook now syncs the resolved theme to the document root with an ownership guard:

syncDocumentTheme() sets color-scheme and Studio's resolved --background (read from the .ps root's computed style, so custom host themes are honored) on <html>, marked with data-prisma-studio-theme.
It only claims the canvas when neither <html> nor <body> has a host-authored background — widget embeds (e.g. Console) are untouched. Everything is removed on unmount.
The demo shell drops its hardcoded light body background and uses light-dark() colors.

Verification

5 new theme-hook tests (dark sync, background painting, toggle following, host-background guard, unmount cleanup); ui suite 629/629, demo suite 48/48.
Verified visually in the live demo in both themes, plus live assertions on <html>'s color-scheme/background and the host-authored-background guard. Typecheck/lint clean; changeset included; behavior documented in Architecture/ui-state.md.

🤖 Generated with Claude Code

With dark mode enabled, the page around Studio (overscroll areas and the space behind Studio's rounded corners) stayed white because all Studio theming is scoped to the .ps root and never reached the document. The theme hook now syncs the resolved theme to the document root: it sets color-scheme and Studio's resolved --background color on <html> (marked with data-prisma-studio-theme) so the page canvas matches the active theme. Studio only claims the document when neither <html> nor <body> carries a host-authored background, so embedded hosts that style their own page are left untouched, and the document-level theme is removed again when Studio unmounts. The ppg demo shell drops its hardcoded light body background and uses light-dark() for its chrome so the demo follows the synced color-scheme. Fixes #1475 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

coderabbitai · 2026-07-18T07:47:47Z

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 42 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 84761c70-7200-4b3f-938a-a8640a44fe2f

📥 Commits

Reviewing files that changed from the base of the PR and between a08b24f and 07900d4.

📒 Files selected for processing (3)

Architecture/ui-state.md
ui/hooks/use-theme.test.tsx
ui/hooks/use-theme.ts

Walkthrough

Studio now synchronizes its resolved theme to the document root when no host-authored page background exists, updating color-scheme, background color, and a theme attribute, then clearing these changes on unmount. Tests cover synchronization, updates, host background preservation, and cleanup. The demo shell uses theme-aware colors and no longer sets a fixed body background. Documentation and a patch changeset describe the behavior.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 45.45% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: syncing dark mode/page background behavior in full-page shells.
Description check	✅ Passed	The description is directly related to the changeset and explains the fix, guardrails, and verification.
Linked Issues check	✅ Passed	The PR addresses `#1475` by syncing the resolved theme to the document background and cleaning it up on unmount.
Out of Scope Changes check	✅ Passed	The docs, changeset, demo, and tests are all supportive of the theme-background fix and not unrelated scope.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/1475-dark-mode-page-background

✨ Simplify code

Create PR with simplified code
Commit simplified code in branch fix/1475-dark-mode-page-background

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-07-18T07:48:08Z

Compute preview deployed.

Branch: fix/1475-dark-mode-page-background
Service: fix-1475-dark-mode-page-background
Preview: https://ppakfycijd2amf1tvagegh8b.cdg.prisma.build

sorenbs · 2026-07-18T09:07:21Z

@coderabbitai review

coderabbitai · 2026-07-18T09:07:28Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai

Warning

CodeRabbit couldn't request changes on this pull request because it doesn't have sufficient GitHub permissions.

Please grant CodeRabbit Pull requests: Read and write permission and re-run the review.

👉 Steps to fix this

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/hooks/use-theme.ts`:
- Around line 198-211: Update clearDocumentTheme and the related useTheme
ownership flow to track active instances, snapshot the original inline
color-scheme and background-color values when the first owner claims the
document, and release ownership per instance. Only remove the Studio theme and
restore both saved styles after the final owner releases it; unmounting one of
multiple active useTheme instances must leave the document unchanged.
- Around line 142-157: Update canOwnDocumentBackground so the Studio marker does
not permanently force ownership: re-check authored backgrounds on both
document.documentElement and document.body on every evaluation, relinquish
ownership when either is host-styled, and clear Studio-applied properties
through the existing theme-sync cleanup path. Add a test covering a host adding
a background after mount and verify Studio stops overriding it.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 115a6258-0357-4404-a164-09b6820c6e6e

📥 Commits

Reviewing files that changed from the base of the PR and between 81354ff and a08b24f.

📒 Files selected for processing (7)

.changeset/dark-mode-page-background.md
Architecture/ui-state.md
FEATURES.md
demo/ppg-dev/DemoShell.tsx
demo/ppg-dev/server.ts
ui/hooks/use-theme.test.tsx
ui/hooks/use-theme.ts

Address review feedback on the document-level theme sync: - Host ownership is now re-evaluated on every sync instead of being sticky once the data-prisma-studio-theme marker exists. Studio's own inline values are ignored when judging "host-authored": they are temporarily swapped for the pre-claim originals before checking, and if the host authored a document background (or overwrote Studio's inline properties) after mount, Studio releases the claim and keeps the host's values. - Document theme claims are now owned by a module-level registry of mounted useTheme instances. The pre-claim inline <html> values (including any pre-existing host color-scheme) are snapshotted when the first owner claims the document and restored only when the last owner unmounts, so unmounting one of several Studio instances no longer clears the theme for the rest, and a host's inline color-scheme survives release. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

sorenbs mentioned this pull request Jul 18, 2026

Dark mode doesn't apply to page background #1475

Closed

coderabbitai Bot reviewed Jul 18, 2026

View reviewed changes

Comment thread ui/hooks/use-theme.ts Outdated

Comment thread ui/hooks/use-theme.ts Outdated

coderabbitai Bot approved these changes Jul 18, 2026

View reviewed changes

sorenbs merged commit 1b72949 into main Jul 18, 2026
3 checks passed

sorenbs deleted the fix/1475-dark-mode-page-background branch July 18, 2026 13:03

Navigation Menu

Uh oh!

fix: sync dark mode to the page background in full-page shells - #1549

fix: sync dark mode to the page background in full-page shells#1549
sorenbs merged 2 commits into
mainfrom
fix/1475-dark-mode-page-background

sorenbs commented Jul 18, 2026

Uh oh!

coderabbitai Bot commented Jul 18, 2026 •

edited

Loading

Review limit reached

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Jul 18, 2026

Uh oh!

sorenbs commented Jul 18, 2026

Uh oh!

coderabbitai Bot commented Jul 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sorenbs commented Jul 18, 2026

Root cause

Fix

Verification

Uh oh!

coderabbitai Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Jul 18, 2026

Uh oh!

sorenbs commented Jul 18, 2026

Uh oh!

coderabbitai Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented Jul 18, 2026 •

edited

Loading

coderabbitai Bot commented Jul 18, 2026 •

edited

Loading