From d09059d5018cbae241a57a8932793202f4812670 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 31 Oct 2022 14:16:02 +0100 Subject: [PATCH 1/2] Fix opaque background on mermaid diagrams 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. Avoid this by specifying the same color scheme for mermaid diagrams. See https://fvsch.com/transparent-iframes for more info. --- 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 62de9a3aae053..984946045d4f0 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 7ee55ea7f800a..b389e0fcd7b43 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; } .markup-block-error { From 130b29e4b48e6352b0cffa92d48fc091431fcb69 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 31 Oct 2022 21:25:28 +0100 Subject: [PATCH 2/2] Add comment --- web_src/less/markup/content.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less index b389e0fcd7b43..80c6267af880c 100644 --- a/web_src/less/markup/content.less +++ b/web_src/less/markup/content.less @@ -537,7 +537,7 @@ width: 100%; height: var(--height-loading); // actual height is set in JS after loading overflow: hidden; - color-scheme: normal; + color-scheme: normal; // match the value inside the iframe to allow it to become transparent } .markup-block-error {