Generated with the help of an LLM.

Problem/Motivation

In Firefox, prefers-color-scheme inside an iframe follows the color-scheme of the <iframe> element, not the OS. Chromium reports the OS.
Shoelace's .sl-theme-dark sets color-scheme: dark, and the Builder and Preview iframes inherit it.
So with a dark builder on a light OS, a front theme following the system renders dark in the Builder, and light on the site.

Steps to reproduce

  1. Use Firefox with a light OS, and UI Suite DSFR as the front theme, with its ui_skins theme on System.
  2. Set Default Admin to Dark, or pick Dark in the Theme menu of the builder.
  3. Open a page layout builder: DSFR renders dark in the Builder. The same page on the site is light.

Proposed resolution

Set color-scheme: normal on .db-builder-frame and .db-builder-preview. Both already paint their own background.

Remaining tasks

  • Fix and check in Firefox, with the builder dark and light.

User interface changes

None.

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#7 3635817 after.png1019.37 KBcsakiistvan
#7 3635817 before.png542.21 KBcsakiistvan
#2 3635817.patch612 bytesshank115

Issue fork display_builder-3635817

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mogtofu33 created an issue. See original summary.

shank115’s picture

shank115 commented
Status: Active » Needs review
StatusFileSize
new 3635817.patch612 bytes

The proposed resolution works, and the patch is attached. It adds color-scheme: normal to .db-builder-frame and .db-builder-preview.

mogtofu33’s picture

mogtofu33 commented
Status: Needs review » Needs work

Could you please move it to the branch/MR process, so we have the advantage of ci pass, thanks.

pdureau’s picture

pdureau commented
Issue tags: +display_builder-1.0.0-beta

Let's address bug reports before rc1

csakiistvan’s picture

csakiistvan
Primary language Hungarian
Location Budapest, Hungary
commented
Assigned: Unassigned » csakiistvan

csakiistvan opened merge request !555

csakiistvan’s picture

csakiistvan
Primary language Hungarian
Location Budapest, Hungary
commented
Assigned: csakiistvan » Unassigned
Status: Needs work » Postponed (maintainer needs more info)
StatusFileSize
new 3635817 before.png542.21 KB
new 3635817 after.png1019.37 KB

@pdureau @mogtofu33 Moved the patch from #2 to MR !555, pipeline is green.

❓ Needs more info — reproduced in Firefox with UI Suite DSFR on its System skin and a dark builder, then applied MR !555, rebuilt caches and reloaded the page layout builder: the DSFR page is now light in the Builder and in Preview, as on the site, with the builder dark or light. The placeholder still renders dark in a dark builder, since it takes the builder's tokens copied into the iframe by builder_frame.js: is that the expected result?

If so, can it go to RTBC as is, or do you want a Playwright test first? It would need a Firefox project, since Chromium does not show the bug.