mermaid darkmode (#299)

Co-authored-by: panoshu <panos.hu@outlook.com>

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>
 <% } %>

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()