diff --git a/yardang/conf.py.j2 b/yardang/conf.py.j2
index 7bceb6e..da33327 100644
--- a/yardang/conf.py.j2
+++ b/yardang/conf.py.j2
@@ -82,6 +82,7 @@ nb_execution_excludepatterns = {{nb_execution_excludepatterns}}
 
 #sphinxcontrib.mermaid
 mermaid_d3_zoom = True
+mermaid_fullscreen = True
 
 # redirects
 redirects = {{redirects}}
diff --git a/yardang/custom.css b/yardang/custom.css
index 3ec8bfd..fb31e0a 100644
--- a/yardang/custom.css
+++ b/yardang/custom.css
@@ -47,19 +47,31 @@ body[data-theme="dark"] .logo-dark {
 
 
 /* Handle mermaid diagrams in dark mode */
-body[data-theme="light"] div.mermaid-container {
-    background-color: unset;
+body[data-theme="light"] .mermaid-container {
+    background-color: #fafafa;
 }
-body[data-theme="dark"] div.mermaid-container {
-    background-color: whitesmoke;
+body[data-theme="light"] pre.mermaid svg path {
+    stroke: black !important;
+}
+body[data-theme="dark"] .mermaid-container {
+    background-color: #222;
+}
+body[data-theme="dark"] pre.mermaid svg path {
+    stroke: white !important;
 }
 @media (prefers-color-scheme: dark) {
-    div.mermaid-container {
-        background-color: whitesmoke;
+    .mermaid-container {
+        background-color: #222;
+    }
+    pre.mermaid svg path {
+        stroke: white !important;
     }
 }
 @media (prefers-color-scheme: light) {
-    div.mermaid-container {
-        background-color: unset;
+    .mermaid-container {
+        background-color: #fafafa;
+    }
+    body[data-theme="dark"] pre.mermaid svg path {
+        stroke: black !important;
     }
 }