From 36f3d69c9bbed9afe5ed942e7bbb9b964a5346b3 Mon Sep 17 00:00:00 2001
From: greggman <github@greggman.com>
Date: Tue, 19 Nov 2024 17:19:28 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=208f9e6?=
 =?UTF-8?q?b6ef5b1872829e246910fff3cccedadf2f5=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/SampleLayout.css | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/css/SampleLayout.css b/css/SampleLayout.css
index fff6e564..0b001b36 100644
--- a/css/SampleLayout.css
+++ b/css/SampleLayout.css
@@ -13,9 +13,26 @@
   height: 100%;
   border: none;
   display: block;
-  /* should should remain white because samples in iframes expect a white background */
-  color-scheme: light;
+  /*
+   * iframe content inherits the background color of the iframe element 
+   * in the parent but, the content might expect the default white background
+   * so we set the iframe element's background to white
+  */
   background-color: #fff;
+  /*
+   * further, the browser will ignore the color scheme in the iframe content
+   * if it matches the one in the parent iframe element. In other words
+   *
+   *   * iframe element says 'color-scheme: light dark'.
+   *   * iframe content says 'color-scheme: light dark'.
+   *
+   * result: iframe content color-scheme setting is ignored and it gets
+   * the background color from the iframe element in the parent.
+   *
+   * Solution: set the iframe element color-scheme to initial. Now the
+   * iframe content's setting will be respected.
+   */
+  color-scheme: initial;
 }
 
 .sampleCategory {