Skip to content

Mermaid diagrams have white background on dark mode

Since !80870 (merged) mermaid iframes have white backgrounds. This is bad,

Screen_Shot_2022-02-23_at_5.50.06_pm

but it should look like this:

Screen_Shot_2022-02-24_at_10.30.52_am

Possible Solution A

Add background color to body in the mermaid iframe:

diff --git a/app/views/sandbox/mermaid.html.erb b/app/views/sandbox/mermaid.html.erb
index 2d2391c8866..395cdc1a0a8 100644
--- a/app/views/sandbox/mermaid.html.erb
+++ b/app/views/sandbox/mermaid.html.erb
@@ -2,6 +2,13 @@
 <html>
   <head>
   <%= webpack_bundle_tag("sandboxed_mermaid") %>
+  <% if user_application_theme == 'gl-dark' %>
+    <style>
+      body {
+        background-color: #1f1f1f;
+      }
+    </style>
+  <% end %>
   </head>
   <body>
     <div id="app"></div>

Pros

  • easy
  • safe

Cons

  • other iframes might still have background color
  • hardcoding color

Option B

CSS for all iframes:

iframe {
  color-scheme: normal;
}

Pros:

  • works for all

Cons

  • I do not know why this works
Edited by Simon Knox