Merge pull request #72 from dillonzq/feature/valine_dark_theme

feat(valine): add valine dark theme

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

assets/css/lib/aplayer/dark.scss

@@ -1,5 +1,4 @@
-.aplayer {
+.dark-theme .aplayer {
-  .dark-theme & {
   background: #212121;
 
   &.aplayer-withlist {
@@ -110,5 +109,4 @@
       }
     }
   }
-  }
 }

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;
+}

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

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 */

resources/_gen/assets/scss/css/lib/valine/dark.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.json

@@ -0,0 +1 @@
+{"Target":"css/lib/valine/dark.css","MediaType":"text/css","Data":{}}