From 6516b2a68e395143e075429ded019211ae480f8c Mon Sep 17 00:00:00 2001
From: panoshu <hup1031@outlook.com>
Date: Fri, 16 Jun 2023 15:17:58 +0800
Subject: [PATCH] mermaid darkmode (#299)

Co-authored-by: panoshu <panos.hu@outlook.com>
---
 layout/mermaid.ejs               |  12 ++--
 source/css/_plugins/mermaid.styl | 100 +++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 4 deletions(-)

diff --git a/layout/mermaid.ejs b/layout/mermaid.ejs
index fb65356..f7df7e1 100755
--- a/layout/mermaid.ejs
+++ b/layout/mermaid.ejs
@@ -4,7 +4,11 @@
   <script>
     var mermaid_config = {
       startOnLoad: true,
-      theme: '<%- theme.plugins.mermaid.theme %>',
+      theme:
+        "<%- theme.style.darkmode %>" == "auto" &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "<%- theme.plugins.mermaid.theme %>",
       logLevel: 3,
       themeVariables: {
         darkMode: true
@@ -12,17 +16,17 @@
       flowchart: {
         useMaxWidth: false,
         htmlLabels: true,
-        curve: 'linear'
+        curve: "linear"
       },
       gantt: {
-        axisFormat: '%m/%d/%Y'
+        axisFormat: "%Y/%m/%d"
       },
       sequence: {
         actorMargin: 50
       }
     }
     if (window.mermaid) {
-        mermaid.initialize(mermaid_config);
+      mermaid.initialize(mermaid_config);
     }
   </script>
 <% } %>
diff --git a/source/css/_plugins/mermaid.styl b/source/css/_plugins/mermaid.styl
index 6bf7d19..abc2f8d 100644
--- a/source/css/_plugins/mermaid.styl
+++ b/source/css/_plugins/mermaid.styl
@@ -8,3 +8,103 @@ pre.mermaid {
   width: 100%;
   display: inline-block;
 }
+
+set_mermaid_darkmode()
+  .mermaid {
+    fill: #ccc !important;
+  }
+
+  .mermaid .error-icon {
+    fill: #a44141 !important;
+  }
+
+  .mermaid .error-text {
+    fill: #ddd !important;
+    stroke: #ddd !important;
+  }
+
+  .mermaid .marker {
+    fill: lightgrey !important;
+    stroke: lightgrey !important;
+  }
+
+  .mermaid .marker.cross {
+    stroke: lightgrey !important;
+  }
+
+  .mermaid .label {
+    color: #ccc !important;
+  }
+
+  .mermaid .cluster-label text {
+    fill: #F9FFFE !important;
+  }
+
+  .mermaid .cluster-label span {
+    color: #F9FFFE !important;
+  }
+
+  .mermaid .label text,
+  .mermaid span {
+    fill: #ccc !important;
+    color: #ccc !important;
+  }
+
+  .mermaid .node rect,
+  .mermaid .node circle,
+  .mermaid .node ellipse,
+  .mermaid .node polygon,
+  .mermaid .node path {
+    fill: #1f2020 !important;
+    stroke: #81B1DB !important;
+  }
+
+  .mermaid .arrowheadPath {
+    fill: lightgrey !important;
+  }
+
+  .mermaid .edgePath .path {
+    stroke: lightgrey !important;
+  }
+
+  .mermaid .flowchart-link {
+    stroke: lightgrey !important;
+  }
+
+  .mermaid .edgeLabel {
+    background-color: hsl(0, 0%, 34.4117647059%) !important;
+  }
+
+  .mermaid .edgeLabel rect {
+    background-color: hsl(0, 0%, 34.4117647059%) !important;
+    fill: hsl(0, 0%, 34.4117647059%) !important;
+  }
+
+  .mermaid .cluster rect {
+    fill: hsl(180, 1.5873015873%, 28.3529411765%) !important;
+    stroke: rgba(255, 255, 255, 0.25) !important;
+  }
+
+  .mermaid .cluster text {
+    fill: #F9FFFE !important;
+  }
+
+  .mermaid .cluster span {
+    color: #F9FFFE !important;
+  }
+
+  .mermaid div.mermaidTooltip {
+    background: hsl(20, 1.5873015873%, 12.3529411765%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.25) !important;
+  }
+
+  .mermaid .flowchartTitleText {
+    fill: #ccc;
+  }
+
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    set_mermaid_darkmode()
+
+if hexo-config('style.darkmode') == 'always'
+  set_mermaid_darkmode()