diff --git a/_config.yml b/_config.yml
old mode 100755
new mode 100644
index acc386ba..e2b8f931
--- a/_config.yml
+++ b/_config.yml
@@ -147,3 +147,8 @@ float_button_theme: default
 read_progress_color: default
 # Blog post banner theme ('default' or 'clean')
 post_banner_theme: default
+# Mermaid Chart: https://github.com/knsv/mermaid
+mermaid:
+  enable: true
+  version: '7.1.2'
+  options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
diff --git a/layout/_partial/base-footer.ejs b/layout/_partial/base-footer.ejs
index 4e8b8b58..2875db4e 100644
--- a/layout/_partial/base-footer.ejs
+++ b/layout/_partial/base-footer.ejs
@@ -37,4 +37,13 @@
     <% } %>
     </div>
     <% } %>
+		<!-- mermaid -->
+		<% if (theme.mermaid.enable) { %>
+			<script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
+			<script>
+				if (window.mermaid) {
+					mermaid.initialize({theme: 'forest'});
+				}
+			</script>
+		<% } %>		
 </footer>
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index b963642b..2028758c 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -4,6 +4,7 @@ $feature-color: #f75357;
 $code-theme: 'atom-one-dark'; // atom-one-dark or atom-one-light
 // ========== global variables ========== //
 $body-background-color: #fff;
+$body-background-dark-color: #121212; // dark mode color
 $base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
   'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
   'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
@@ -49,9 +50,11 @@ $sidebar-width: 400px;
 $profile-width: 200px;
 // ========== index ========== //
 $index-post-link-color: #1f1f1f;
+$index-post-link-dark-color: #ccc;
 $index-post-tag-color: #aaa;
 // ========== post ========== //
 $post-content-color: #23394d;
+$post-content-dark-color: #dfcbb9;
 // ========== social ========== //
 $social-iconfont-color: #777;
 // ========== code ========== //
diff --git a/src/scss/dark.scss b/src/scss/dark.scss
new file mode 100644
index 00000000..18b23636
--- /dev/null
+++ b/src/scss/dark.scss
@@ -0,0 +1,113 @@
+// ========== general style ========== //
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: $body-background-dark-color;
+  }
+
+  .container {
+    background-color: $body-background-dark-color;
+  }
+
+	.profile-name {
+		color: #ddd !important;
+	}
+
+  .wrapper {
+    box-shadow: -3px 0 2px 0 rgba(255, 255, 255, 0.6) !important;
+  }
+
+  .back-top {
+    border: 2px solid #fff !important;
+    background-color: rgba(18, 18, 18, 0.8) !important;
+    color: #fff !important;
+    &:hover {
+      background-color: #fff !important;
+      color: #121212 !important;
+    }
+  }
+
+  .note-warning {
+    background-color: #222 !important;
+  }
+
+  .abstract-title {
+    color: $index-post-link-dark-color !important;
+  }
+
+  .abstract-content,
+  .article-entry {
+    color: $post-content-dark-color !important;
+    code {
+      background: #444 !important;
+    }
+    blockquote {
+      background-color: #464646 !important;
+    }
+  }
+
+  .license-wrapper {
+    color: $post-content-dark-color !important;
+  }
+
+  .header-sidebar-menu-black {
+    color: #fff !important;
+    background-color: #121212 !important;
+    border-color: #fff !important;
+    &:hover {
+      background-color: #fff !important;
+      color: #121212 !important;
+    }
+  }
+
+  .toc-wrapper {
+		.toc-active {
+			color: $feature-color !important;
+		}
+    a {
+      color: #777 !important;
+    }
+		a:hover {
+			color: $feature-color !important;
+		}
+  }
+
+	.footer {
+		background-color: $body-background-dark-color !important;
+	}
+
+	.banner {
+		border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
+		background-color: rgba(0, 0, 0, 0.8) !important;
+	}
+
+	.blog-title {
+		a {
+			color: #fff !important;
+			&:hover {
+				color: $feature-color !important;
+			}
+		}
+	}
+
+	.post-title {
+		a {
+			color: rgba(255, 255, 255, 0.8) !important;
+		}
+	}
+
+	.nextSlogan,
+  .prevSlogan {
+    color: #ddd !important;
+  }
+
+	.popup {
+		background: #121212 !important;
+		color: #e1e1e1 !important;
+		box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5) !important;
+	}
+	.algolia-search {
+		border-bottom: 1px solid #222 !important;
+		background: #121212 !important;
+	}	
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index e5b767be..b2683c80 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -2,6 +2,7 @@
 @import '_variables';
 @import '_normalize';
 @import '_common';
+@import 'dark';
 @import '_mixin';
 
 // partial
diff --git a/webpack.config.js b/webpack.config.js
index c2a10be0..228ea0a8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
   entry: {