From cbbc57186766022baeccb6316d2e239c60ab83df Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Thu, 16 Jan 2025 13:42:00 +0000
Subject: [PATCH] Fix white text on white background in previews for sites that
use color-scheme without a background-color
---
client/scss/components/_preview-panel.scss | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/client/scss/components/_preview-panel.scss b/client/scss/components/_preview-panel.scss
index a46d80a724..ecba6df191 100644
--- a/client/scss/components/_preview-panel.scss
+++ b/client/scss/components/_preview-panel.scss
@@ -3,6 +3,7 @@
.w-preview {
--w-preview-background-color: var(--w-color-white);
+ --w-preview-color-scheme: normal;
--preview-width-ratio: min(
1,
var(--preview-panel-width, 450) / var(--preview-device-width, 375)
@@ -40,6 +41,16 @@
&:empty {
// Ensure that sites without a background show with a fallback, only when iframe has loaded
background-color: var(--w-preview-background-color);
+ // Sites that do not have a background but have color-scheme will have the
+ // colors (background, text, etc.) automatically styled by the browser.
+ // If the color-scheme matches Wagtail's current color-scheme, the browser
+ // will give the iframe a transparent background. If we only set the
+ // white background-color above, the white background will be used
+ // while the rest of the content follows the color-scheme of the site,
+ // which might result in white text on a white background.
+ // Since we cannot know the actual value of the content's color-scheme,
+ // we set the color-scheme to normal to ensure the iframe stays opaque.
+ color-scheme: var(--w-preview-color-scheme);
}
[dir='rtl'] & {