]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7be9b68)
Fix iframe color-scheme behavior (#42605)
authorMark Otto <markd.otto@gmail.com>
Tue, 30 Jun 2026 23:20:42 +0000 (16:20 -0700)
committerGitHub <noreply@github.com>
Tue, 30 Jun 2026 23:20:42 +0000 (16:20 -0700)
* Fix iframe color-scheme behavior

* Docs: remove double blank line before iframe color-scheme section (MD012)

scss/content/_reboot.scss patch | blob | blame | history
site/src/content/docs/content/reboot.mdx patch | blob | blame | history

diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index 81be6f5e0433c36f79e042a7974b38e8a12bc5c6..578a88812e33823835d2ef21a8acec13c0738716 100644 (file)
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -69,6 +69,16 @@ $reboot-mark-tokens: defaults(
     }
   }
 
+  // Reset iframe color-scheme
+  //
+  // If the color scheme of an iframe differs from parent document, iframe gets
+  // an opaque canvas background appropriate (resulting in a white background
+  // on the iframe when in a page with a dark color scheme).
+  iframe {
+    color-scheme: light dark;
+    border: 0;
+  }
+
   // Body
   //
   // 1. Remove the margin in all browsers.
@@ -598,12 +608,6 @@ $reboot-mark-tokens: defaults(
     display: inline-block;
   }
 
-  // Remove border from iframe
-
-  iframe {
-    border: 0;
-  }
-
   // Summary
   //
   // 1. Add the correct display in all browsers
diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
index 8fa7d45c3517487e3b4bd81903c0e55b98f36b60..0e14c82d5492d6ef0457a2df71e8b44b3999f316 100644 (file)
--- a/site/src/content/docs/content/reboot.mdx
+++ b/site/src/content/docs/content/reboot.mdx
@@ -450,3 +450,12 @@ Since `[hidden]` is not compatible with jQuery’s `$(...).hide()` and `$(...).s
 </Callout>
 
 To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]([[docsref:/utilities/visibility]]) instead.
+
+## iframe color-scheme
+
+The `<iframe>` element is updated to set `color-scheme: light dark`. This ensures that the iframe is displayed in the same color scheme as the parent document. Without it, an iframe would get an opaque `background: canvas` from a mismatched `color-scheme` value.
+
+<Example code={`<div class="bg-body fg-body p-3" data-bs-theme="dark">
+    <iframe class="w-100" style="color-scheme: unset" src="data:text/html,<!DOCTYPE html><html><meta name='color-scheme' content='light dark'><body style='background-color:transparent;color:gray;'><h4>Default iframe</h4></body></html>"></iframe>
+    <iframe class="w-100" src="data:text/html,<!DOCTYPE html><html><meta name='color-scheme' content='light dark'><body style='background-color:transparent;color:gray;'><h4>iframe with color-scheme: light-dark</h4></body></html>"></iframe>
+  </div>`} />
Mirror of https://github.com/twbs/bootstrap.git