diff --git a/README.md b/README.md
index 0d4e928..8e90dda 100644
--- a/README.md
+++ b/README.md
@@ -54,8 +54,8 @@ Follow [exampleSite/config.yaml](https://github.com/Mivinci/hugo-theme-minima/bl
 | categories  | array  | category list |
 | series      | array  | series list |
 | tags        | array  | tag list |
-| math        | bool   | enables math formulas rendering |
-| mermaid     | bool   | enables flowcharts rendering |
+| math        | bool   | enables math plugin |
+| diagram     | bool   | enables diagram plugin |
 | comment     | bool   | enable comment plugin |
 | draft       | bool   | disallow being published |
 | link        | string | a URL to redirect to |
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 35b3734..32e71ec 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -37,6 +37,10 @@ main p a {
   color: var(--prime);
 }
 
+main p a:hover {
+  text-decoration: underline;
+}
+
 @keyframes showup {
   from {
     opacity: 0;
diff --git a/assets/css/pre.scss b/assets/css/pre.scss
index bcdd9f8..ea1e211 100644
--- a/assets/css/pre.scss
+++ b/assets/css/pre.scss
@@ -34,6 +34,7 @@ hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
   border-top-width: 1px; /* 3 */
+  border-color: var(--grid, inherit);
 }
 
 /*
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 05169a4..dc1cc99 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -1,10 +1,11 @@
-.chroma code {
-  color: #d4d4d4;
+.chroma {
+  margin: .5em 0;
+  background-color: #222222;
+  border-radius: 2px;
 }
 
-.chroma {
-  background-color: #222222;
-  margin: .5em 0;
+.chroma code {
+  color: #d4d4d4;
 }
 
 /* LineTableTD */
diff --git a/assets/css/theme.scss b/assets/css/theme.scss
index 35080da..8ed22f8 100644
--- a/assets/css/theme.scss
+++ b/assets/css/theme.scss
@@ -1,13 +1,15 @@
 .light {
-  --prime: #1691b6;
+  --prime: #3170a7;
   --grid: #e1e1e1;
   --back: #fff;
   --text: #222;
+  --code-back: #fff;
 }
 
 .dark {
-  --prime: #1691b6;
+  --prime: #3170a7;
   --back: #181818;
   --text: silver;
   --grid: #555;
+  --code-back: #222;
 }
\ No newline at end of file
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 28f9f87..b10b658 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -52,10 +52,6 @@ params:
   displayDescription: true
   # selectable specifies if your post content can be selected.
   selectable: true
-  # commentOnAllPosts specifies if the chosen comment plugin to be enabled on all
-  # post pages. If enabled, those you don't want a comment plugin to work on just
-  # set `comment` to false in their front matters.
-  commentOnAllPosts: true
   # social is an array containing as many as social accounts to be displayed
   # in the buttom of every page.
   social:
@@ -68,8 +64,19 @@ params:
     - name: "rss"
       url: "/index.xml"
 
-  # comment specifies a comment plugin.
+  # math plugin
+  math:
+    enable: false
+    provider: katex
+
+  # diagram plugin
+  diagram:
+    enable: false
+    provider: mermaid
+
+  # comment plugin
   comment:
+    enable: true
     provider: giscus
     # check out https://disqus.com/
     disqus:
@@ -90,6 +97,7 @@ params:
       reactions: true
       metadata: false
 
+
 # menu.main is an array containing what is used as the navigator.
 menu:
   main:
diff --git a/exampleSite/content/mermaid-diagrams.md b/exampleSite/content/mermaid-diagrams.md
index 9e4d1c5..aa2ec17 100644
--- a/exampleSite/content/mermaid-diagrams.md
+++ b/exampleSite/content/mermaid-diagrams.md
@@ -3,7 +3,7 @@ author: Mermaid Team
 title: Mermaid Diagrams
 date: 2021-07-18T10:52:59+08:00
 description: A brief guide to Mermaid syntax.
-mermaid: true
+diagram: true
 tags:
     - markdown
     - mermaid
diff --git a/layouts/404.html b/layouts/404.html
index e69de29..aff5634 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+<main class="container mx-auto">
+  <h1 class="text-5xl font-bold">Oops!</h1>
+  <p>404 Not Found</p>
+</main>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
new file mode 100644
index 0000000..b7c0441
--- /dev/null
+++ b/layouts/partials/comment.html
@@ -0,0 +1,67 @@
+<!-- slot -->
+<div id="comment"></div>
+
+<!-- Giscus -->
+{{ if eq .Site.Params.comment.provider "giscus" }}
+{{ with .Site.Params.comment.giscus }}
+<script>
+    const s = document.createElement("script")
+    s.src = "https://giscus.app/client.js"
+    s.crossOrigin = "anonymous"
+    s.async = true
+    s.setAttribute("data-repo", "{{ .repo }}")
+    s.setAttribute("data-repo-id", "{{ .repoId }}")
+    s.setAttribute("data-category", "{{ .category }}")
+    s.setAttribute("data-category-id", "{{ .categoryId }}")
+    s.setAttribute("data-mapping", "{{ .mapping }}")
+    s.setAttribute("data-strict", "0")
+    s.setAttribute("data-reactions-enabled", "{{ cond .reactions 1 0 }}")
+    s.setAttribute("data-emit-metadata", "{{ cond .metadata 1 0 }}")
+    s.setAttribute("data-input-position", "{{ .inputPosition }}")
+    s.setAttribute("data-theme", window.minima_theme + "_protanopia")
+    s.setAttribute("data-lang", "en")
+    s.setAttribute("data-loading", "lazy")
+    document.getElementById("comment").appendChild(s)
+</script>
+{{ end }}
+{{ end }}
+
+<!-- Utterances -->
+{{ if eq .Site.Params.comment.provider "utterances" }}
+{{ with .Site.Params.comment.utterances }}
+<script>
+    const s = document.createElement("script")
+    s.src = "https://utteranc.es/client.js"
+    s.crossOrigin = "anonymous"
+    s.async = true
+    s.setAttribute("repo", "{{ .repo }}")
+    s.setAttribute("issue-term", "{{ .issueTerm }}")
+    s.setAttribute("label", "{{ .label }}")
+    s.setAttribute("theme", "github-" + window.minima_theme)
+    document.getElementById("comment").appendChild(s)
+</script>
+{{ end }}
+{{ end }}
+
+<!-- Disqus -->
+{{ if eq .Site.Params.comment.provider "disqus" }}
+{{ with .Site.Params.comment.disqus }}
+<div id="disqus_thread" class="mt-8 mb-8"></div>
+<script type="text/javascript">
+    // Don't ever inject Disqus on localhost--it creates unwanted
+    // discussions from 'localhost:1313' on your Disqus account...
+    if (window.location.hostname == "localhost")
+        return;
+
+    const dsq = document.createElement('script');
+    dsq.type = 'text/javascript';
+    dsq.async = true;
+
+    const disqus_shortname = '{{ .shortname }}';
+    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+    document.getElementById("comment").appendChild(dsq);
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
+        Disqus.</a></noscript>
+{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/mermaid.html b/layouts/partials/diagram.html
similarity index 70%
rename from layouts/partials/mermaid.html
rename to layouts/partials/diagram.html
index 46667a0..c3bc881 100644
--- a/layouts/partials/mermaid.html
+++ b/layouts/partials/diagram.html
@@ -1,7 +1,9 @@
+{{ if eq .Site.Params.diagram.provider "mermaid" }}
 <script 
   src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
   crossorigin="anonymous">
 </script>
 <script>
   mermaid.init(undefined, 'code.language-mermaid')
-</script>
\ No newline at end of file
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html
deleted file mode 100644
index 905a085..0000000
--- a/layouts/partials/disqus.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div id="disqus_thread" class="mt-8 mb-8"></div>
-<script type="text/javascript">
-  (function () {
-    // Don't ever inject Disqus on localhost--it creates unwanted
-    // discussions from 'localhost:1313' on your Disqus account...
-    if (window.location.hostname == "localhost")
-      return;
-
-    const dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-    const disqus_shortname = '{{ .Site.Params.shortname }}';
-    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-  })();
-</script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
-    Disqus.</a></noscript>
\ No newline at end of file
diff --git a/layouts/partials/giscus.html b/layouts/partials/giscus.html
deleted file mode 100644
index 68579ac..0000000
--- a/layouts/partials/giscus.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{{ $giscus := .Site.Params.comment.giscus }}
-<script 
-  src="https://giscus.app/client.js"
-  data-repo="{{ $giscus.repo }}"
-  data-repo-id="{{ $giscus.repoId }}"
-  data-category="{{ $giscus.category }}"
-  data-category-id="{{ $giscus.categoryId }}"
-  data-mapping="{{ $giscus.mapping }}"
-  data-strict="0"
-  data-reactions-enabled="{{ cond $giscus.reactions 1 0 }}"
-  data-emit-metadata="{{ cond $giscus.metadata 1 0 }}"
-  data-input-position="{{ $giscus.inputPosition }}"
-  data-theme="preferred_color_scheme"
-  data-lang="en"
-  data-loading="lazy"
-  crossorigin="anonymous"
-  async>
-</script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 14d454a..0ae50e6 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -30,11 +30,16 @@
 </head>
 <script>
   // default to system color scheme.
-  let systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  let default_theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 
   try {
-    document.querySelector('html').classList.add(systemColorScheme);
-    localStorage.setItem('theme', systemColorScheme);
+    const local = localStorage.getItem('theme')
+    if (local) {
+      default_theme = local
+    }
+    localStorage.setItem('theme', default_theme);
+    window.minima_theme = default_theme;
+    document.querySelector('html').classList.add(default_theme);
   } catch (e) {
     console.error(e);
   }
diff --git a/layouts/partials/katex.html b/layouts/partials/katex.html
deleted file mode 100644
index 521bfeb..0000000
--- a/layouts/partials/katex.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"
-  integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
-<!-- The loading of KaTeX is deferred to speed up page rendering -->
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"
-  integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
-<!-- To automatically render math in text elements, include the auto-render extension: -->
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js"
-  integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    renderMathInElement(document.body, {
-      // customised options
-      // • auto-render specific keys, e.g.:
-      delimiters: [
-        { left: '$$', right: '$$', display: true },
-        { left: '$', right: '$', display: false },
-        { left: '\\(', right: '\\)', display: false },
-        { left: '\\[', right: '\\]', display: true }
-      ],
-      // • rendering keys, e.g.:
-      throwOnError: false
-    });
-  });
-</script>
\ No newline at end of file
diff --git a/layouts/partials/math.html b/layouts/partials/math.html
new file mode 100644
index 0000000..733ed06
--- /dev/null
+++ b/layouts/partials/math.html
@@ -0,0 +1,29 @@
+{{ if eq .Site.Params.math.provider "katex" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"
+    integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
+<!-- The loading of KaTeX is deferred to speed up page rendering -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"
+    integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp"
+    crossorigin="anonymous"></script>
+<!-- To automatically render math in text elements, include the auto-render extension: -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js"
+    integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
+    crossorigin="anonymous"></script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        renderMathInElement(document.body, {
+            // customised options
+            // • auto-render specific keys, e.g.:
+            delimiters: [
+                { left: '$$', right: '$$', display: true },
+                { left: '$', right: '$', display: false },
+                { left: '\\(', right: '\\)', display: false },
+                { left: '\\[', right: '\\]', display: true }
+            ],
+            // • rendering keys, e.g.:
+            throwOnError: false
+        });
+    });
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/plugin.html b/layouts/partials/plugin.html
index 3528b2c..f8bee83 100644
--- a/layouts/partials/plugin.html
+++ b/layouts/partials/plugin.html
@@ -1,27 +1,11 @@
-<script>
-  window.minima_theme = localStorage.getItem('theme')
-</script>
-
-{{ if or .Params.math .Site.Params.math }}
-{{ partial "katex.html" . }}
+{{ if or .Params.math (and .Site.Params.math.enable (ne .Params.math false)) }}
+{{ partial "math.html" . }}
 {{ end }}
 
-{{ if or .Params.mermaid .Site.Params.mermaid }}
-{{ partial "mermaid.html" . }}
-{{ end }}
-
-{{ if or .Params.comment (and .Site.Params.commentOnAllPosts (ne .Params.comment false)) }}
-
-{{ if eq .Site.Params.comment.provider "disqus"}}
-{{ partial "disqus.html" . }}
-{{ end }}
-
-{{ if eq .Site.Params.comment.provider "giscus" }}
-{{ partial "giscus.html" . }}
-{{ end }}
-
-{{ if eq .Site.Params.comment.provider "utterances"}}
-{{ partial "utterances.html" . }}
+{{ if or .Params.diagram (and .Site.Params.diagram.enable (ne .Params.diagram false)) }}
+{{ partial "diagram.html" . }}
 {{ end }}
 
+{{ if or .Params.comment (and .Site.Params.comment.enable (ne .Params.comment false)) }}
+{{ partial "comment.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/utterances.html b/layouts/partials/utterances.html
deleted file mode 100644
index 8a4325f..0000000
--- a/layouts/partials/utterances.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<script src="https://utteranc.es/client.js"
-        repo="{{ .Site.Params.utterances.repo }}"
-        issue-term="{{ .Site.Params.utterances.issueTerm }}"
-        label="{{ .Site.Params.utterances.label }}"
-        theme="preferred-color-scheme"
-        crossorigin="anonymous"
-        async>
-</script>