Template:TransparenteIFrames - Revision history

Abeneke: Created page with "===Transparent iFrames=== If the color-scheme attribute is not set correctly in the embedded document, the browser may render a system-defined background (e.g. white in light mode, dark gray in dark mode) instead of a transparent background. To ensure that the iFrame background remains truly transparent in all environments, the following code snippet must be added to the HTML file before the closing -tag.
2026-07-20T13:37:49Z

Created page with "===Transparent iFrames=== If the color-scheme attribute is not set correctly in the embedded document, the browser may render a system-defined background (e.g. white in light mode, dark gray in dark mode) instead of a transparent background. To ensure that the iFrame background remains truly transparent in all environments, the following code snippet must be added to the HTML file before the closing <syntaxhighlight lang="html" inline></body></syntaxhighlight>-tag. <syn..."

New page
===Transparent iFrames===
If the color-scheme attribute is not set correctly in the embedded document, the browser may render a system-defined background (e.g. white in light mode, dark gray in dark mode) instead of a transparent background. To ensure that the iFrame background remains truly transparent in all environments, the following code snippet must be added to the HTML file before the closing <syntaxhighlight lang="html" inline></body></syntaxhighlight>-tag.

<syntaxhighlight lang="html"><script>
window.addEventListener("message", (event) => {
const referrer = new URL(document.referrer).hostname;
const origin = new URL(event.origin).hostname;

if (origin !== referrer || event.data.type !== "iqdIframeTransparency") return;

if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
});
</script></syntaxhighlight>