diff --git a/yardang/custom.css b/yardang/custom.css
index 87e9476..3ec8bfd 100644
--- a/yardang/custom.css
+++ b/yardang/custom.css
@@ -44,3 +44,22 @@ body[data-theme="dark"] .logo-dark {
         display: none;
     }
 }
+
+
+/* Handle mermaid diagrams in dark mode */
+body[data-theme="light"] div.mermaid-container {
+    background-color: unset;
+}
+body[data-theme="dark"] div.mermaid-container {
+    background-color: whitesmoke;
+}
+@media (prefers-color-scheme: dark) {
+    div.mermaid-container {
+        background-color: whitesmoke;
+    }
+}
+@media (prefers-color-scheme: light) {
+    div.mermaid-container {
+        background-color: unset;
+    }
+}