diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
index 62de9a3aae0..984946045d4 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 7ee55ea7f80..80c6267af88 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 {