diff --git a/assets/css/lib/VERSION b/assets/css/lib/VERSION
index 24cae607..24709065 100644
--- a/assets/css/lib/VERSION
+++ b/assets/css/lib/VERSION
@@ -5,3 +5,4 @@ katex@0.11.1
 aplayer@1.10.1
 animate.css@3.7.2
 mermaid@8.4.2
+valine@1.3.10
diff --git a/assets/css/lib/aplayer/dark.scss b/assets/css/lib/aplayer/dark.scss
index 11bdac85..08d7bf14 100644
--- a/assets/css/lib/aplayer/dark.scss
+++ b/assets/css/lib/aplayer/dark.scss
@@ -1,113 +1,111 @@
-.aplayer {
-  .dark-theme & {
-    background: #212121;
-
-    &.aplayer-withlist {
-      .aplayer-info {
-        border-bottom-color: #5c5c5c;
-      }
-    }
-
-    &.aplayer-fixed {
-      .aplayer-list {
-        border-color: #5c5c5c;
-      }
-    }
-
-    .aplayer-body {
-      background-color: #212121;
-    }
+.dark-theme .aplayer {
+  background: #212121;
 
+  &.aplayer-withlist {
     .aplayer-info {
-      border-top-color: #212121;
+      border-bottom-color: #5c5c5c;
     }
+  }
 
-    .aplayer-info {
-      .aplayer-music {
-        .aplayer-title {
-          color: #fff;
-        }
+  &.aplayer-fixed {
+    .aplayer-list {
+      border-color: #5c5c5c;
+    }
+  }
 
-        .aplayer-author {
-          color: #fff;
-        }
+  .aplayer-body {
+    background-color: #212121;
+  }
+
+  .aplayer-info {
+    border-top-color: #212121;
+  }
+
+  .aplayer-info {
+    .aplayer-music {
+      .aplayer-title {
+        color: #fff;
       }
 
-      .aplayer-controller {
-        .aplayer-time {
-          color: #eee;
+      .aplayer-author {
+        color: #fff;
+      }
+    }
 
-          .aplayer-icon {
-            path {
-              fill: #eee;
-            }
+    .aplayer-controller {
+      .aplayer-time {
+        color: #eee;
+
+        .aplayer-icon {
+          path {
+            fill: #eee;
           }
         }
       }
     }
+  }
 
-    .aplayer-list {
-      background-color: #212121;
+  .aplayer-list {
+    background-color: #212121;
 
-      &::-webkit-scrollbar-thumb {
-        background-color: #999;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: #bbb;
-      }
-
-      li {
-        color: #fff;
-        border-top-color: #666;
-
-        &:hover {
-          background: #4e4e4e;
-        }
-
-        &.aplayer-list-light {
-          background: #6c6c6c;
-        }
-
-        .aplayer-list-index {
-          color: #ddd;
-        }
-
-        .aplayer-list-author {
-          color: #ddd;
-        }
-      }
+    &::-webkit-scrollbar-thumb {
+      background-color: #999;
     }
 
-    .aplayer-lrc {
-      text-shadow: -1px -1px 0 #666;
-
-      &:before {
-        background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
-        background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
-        background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
-        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 );
-      }
-
-      &:after {
-        background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);
-        background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
-        background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
-        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 );
-      }
-
-      p {
-        color: #fff;
-      }
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #bbb;
     }
 
-    .aplayer-miniswitcher {
-      background: #484848;
+    li {
+      color: #fff;
+      border-top-color: #666;
 
-      .aplayer-icon {
-        path {
-          fill: #eee;
-        }
+      &:hover {
+        background: #4e4e4e;
+      }
+
+      &.aplayer-list-light {
+        background: #6c6c6c;
+      }
+
+      .aplayer-list-index {
+        color: #ddd;
+      }
+
+      .aplayer-list-author {
+        color: #ddd;
+      }
+    }
+  }
+
+  .aplayer-lrc {
+    text-shadow: -1px -1px 0 #666;
+
+    &:before {
+      background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
+      background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
+      background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 );
+    }
+
+    &:after {
+      background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);
+      background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
+      background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 );
+    }
+
+    p {
+      color: #fff;
+    }
+  }
+
+  .aplayer-miniswitcher {
+    background: #484848;
+
+    .aplayer-icon {
+      path {
+        fill: #eee;
       }
     }
   }
diff --git a/assets/css/lib/valine/dark.scss b/assets/css/lib/valine/dark.scss
new file mode 100644
index 00000000..4c552a90
--- /dev/null
+++ b/assets/css/lib/valine/dark.scss
@@ -0,0 +1,32 @@
+.dark-theme {
+  // copied from https://github.com/xCss/Valine/issues/221
+  .v *,
+  .v .vwrap input,
+  .v .vwrap input::placeholder,
+  .v .veditor,
+  .v .veditor::placeholder,
+  .v a,
+  .v a:hover {
+    color: hsla(0,0%,100%,.75);
+    opacity: 1;
+  }
+  .v .vbtn {
+    color: hsla(0,0%,100%,.75);
+    background: #333;
+    border: none;
+  }
+  .v .vbtn:hover {
+    color: #3090e4;
+    border-color: #3090e4;
+  }
+  .v .vlist .vcard .vhead .vsys {
+    background: #333;
+  }
+  .v code, .v pre {
+    background: #272C34;
+  }
+}
+
+.v code, .v pre {
+  text-align: left;
+}
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
index ff412752..d49d0407 100644
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@@ -13,7 +13,7 @@
 
     {{- /* Gitalk Comment System */ -}}
     {{- if .Site.Params.gitalk.owner -}}
-        <div id="gitalk_container"></div>
+        <div id="gitalk"></div>
         {{- with $CDN.gitalk_css -}}
             {{- slice . | $.Scratch.Add "linkCDN" -}}
         {{- else -}}
@@ -36,7 +36,7 @@
                     admin: ['{{ .Site.Params.gitalk.owner }}'],
                     body: decodeURI(location.href),
                 });
-                gitalk.render('gitalk_container');
+                gitalk.render('gitalk');
             });
         </script>
         <noscript>
@@ -46,7 +46,8 @@
 
     {{- /* Valine Comment System */ -}}
     {{- if .Site.Params.valine.enable -}}
-        <div id="valine_container"></div>
+        <div id="valine"></div>
+        {{- slice "css/lib/valine/dark.scss" | .Scratch.Add "linkLocal" -}}
         {{- with $CDN.valine_js -}}
             {{- slice . | $.Scratch.Add "scriptCDN" -}}
         {{- else -}}
@@ -55,7 +56,7 @@
         <script>
             document.addEventListener("DOMContentLoaded", function(event) {
                 new Valine({
-                    el: '#valine_container',
+                    el: '#valine',
                     appId: '{{ .Site.Params.valine.appId }}',
                     appKey: '{{ .Site.Params.valine.appKey }}',
                     {{- with .Site.Params.valine.placeholder -}}
diff --git a/resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.content b/resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.content
new file mode 100644
index 00000000..b39043b3
--- /dev/null
+++ b/resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.content
@@ -0,0 +1,3 @@
+.dark-theme .v *,.dark-theme .v .vwrap input,.dark-theme .v .vwrap input::placeholder,.dark-theme .v .veditor,.dark-theme .v .veditor::placeholder,.dark-theme .v a,.dark-theme .v a:hover{color:rgba(255,255,255,0.75);opacity:1}.dark-theme .v .vbtn{color:rgba(255,255,255,0.75);background:#333;border:none}.dark-theme .v .vbtn:hover{color:#3090e4;border-color:#3090e4}.dark-theme .v .vlist .vcard .vhead .vsys{background:#333}.dark-theme .v code,.dark-theme .v pre{background:#272C34}.v code,.v pre{text-align:left}
+
+/*# sourceMappingURL=dark.css.map */
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.json b/resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.json
new file mode 100644
index 00000000..ddc0c34d
--- /dev/null
+++ b/resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.json
@@ -0,0 +1 @@
+{"Target":"css/lib/valine/dark.css","MediaType":"text/css","Data":{}}
\ No newline at end of file