diff --git a/_config.yml b/_config.yml
index bd72286..280558c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -815,7 +815,9 @@ pdf:
 mermaid:
   enable: false
   # Available themes: default | dark | forest | neutral
-  theme: forest
+  theme:
+    light: default
+    dark: dark
 
 
 # ---------------------------------------------------------------
diff --git a/scripts/helpers/next-config.js b/scripts/helpers/next-config.js
index 6f5def3..b1973d6 100644
--- a/scripts/helpers/next-config.js
+++ b/scripts/helpers/next-config.js
@@ -14,6 +14,7 @@ hexo.extend.helper.register('next_config', function() {
     root      : config.root,
     images    : url_for(theme.images),
     scheme    : theme.scheme,
+    darkmode  : theme.darkmode,
     version   : this.next_version,
     exturl    : theme.exturl,
     sidebar   : theme.sidebar,
diff --git a/source/js/third-party/tags/mermaid.js b/source/js/third-party/tags/mermaid.js
index 77af6ac..3831995 100644
--- a/source/js/third-party/tags/mermaid.js
+++ b/source/js/third-party/tags/mermaid.js
@@ -12,14 +12,14 @@ document.addEventListener('page:loaded', () => {
         newElement.className = element.className;
         element.parentNode.replaceChild(newElement, element);
       });
-
-      mermaid.init({
-        theme    : CONFIG.mermaid.theme,
-        logLevel : 3,
+      mermaid.initialize({
+        theme    : CONFIG.darkmode && window.matchMedia('(prefers-color-scheme: dark)').matches ? CONFIG.mermaid.theme.dark : CONFIG.mermaid.theme.light,
+        logLevel : 4,
         flowchart: { curve: 'linear' },
         gantt    : { axisFormat: '%m/%d/%Y' },
         sequence : { actorMargin: 50 }
-      }, '.mermaid');
+      });
+      mermaid.init();
     });
   }
 });