From 57a0a7ef64022ec984a85a8dd73224a66e959ffc Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 31 Oct 2022 21:57:31 +0100
Subject: [PATCH] Fix opaque background on mermaid diagrams (#21642)

Browsers introduce a opaque background on iframes if the iframe
element's color-scheme does not match the document's color scheme which
in case of a dark theme results in a mismatch and the browser adds a
white background. Avoid this by specifying the same color scheme outside
and inside the iframe.

See https://fvsch.com/transparent-iframes for more info.

My initial attempt was to make the iframe document the same color-scheme
as the parent page (light or dark) but with that, there was a ugly
background flash on load in Chrome because Chrome apparently always
loads iframe in light scheme initially. Firefox still shows a background
flash on load but this is not possible to get rid of and it's certainly
a browser bug.

Before:
<img width="1147" alt="Screen Shot 2022-10-31 at 13 30 55"
src="https://user-images.githubusercontent.com/115237/199017132-9828aace-bdd0-4ede-8118-359e72bcf2fe.png">

After:
<img width="1152" alt="Screen Shot 2022-10-31 at 13 30 36"
src="https://user-images.githubusercontent.com/115237/199017137-989a9e67-3fe0-445f-a191-df5bf290dabf.png">
---
 web_src/js/markup/mermaid.js     | 1 +
 web_src/less/markup/content.less | 1 +
 2 files changed, 2 insertions(+)

diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
index 62de9a3aa..984946045 100644
--- a/web_src/js/markup/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@@ -2,6 +2,7 @@ import {isDarkTheme} from '../utils.js';
 const {mermaidMaxSourceCharacters} = window.config;
 
 const iframeCss = `
+  :root {color-scheme: normal}
   body {margin: 0; padding: 0}
   #mermaid {display: block; margin: 0 auto}
 `;
diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less
index 7ee55ea7f..80c6267af 100644
--- a/web_src/less/markup/content.less
+++ b/web_src/less/markup/content.less
@@ -537,6 +537,7 @@
   width: 100%;
   height: var(--height-loading); // actual height is set in JS after loading
   overflow: hidden;
+  color-scheme: normal; // match the value inside the iframe to allow it to become transparent
 }
 
 .markup-block-error {