Merge pull request #150 from dillonzq/fix/dark_mode

fix(style): dark mode for mermaid and valine

assets/css/_page/_single.scss

@@ -250,31 +250,10 @@
     }
 
     @import "../_partial/_single/code";
+    @import "../_partial/_single/instagram";
     @import "../_partial/_single/admonition";
-
-    .echarts {
-      width: 100%;
-      height: 30rem;
-      margin: 3% auto;
-      text-align: center;
-    }
-
-    .bilibili {
-      position: relative;
-      width: 100%;
-      height: 0;
-      padding-bottom: 75%;
-      margin: 3% auto;
-      text-align: center;
-
-      iframe {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-      }
-    }
+    @import "../_partial/_single/echarts";
+    @import "../_partial/_single/bilibili";
 
     hr {
       margin: 1rem 0;

assets/css/_partial/_single/_bilibili.scss

@@ -0,0 +1,16 @@
+.bilibili {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 75%;
+  margin: 3% auto;
+  text-align: center;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+}

assets/css/_partial/_single/_echarts.scss

@@ -0,0 +1,6 @@
+.echarts {
+  width: 100%;
+  height: 30rem;
+  margin: 3% auto;
+  text-align: center;
+}

assets/css/_partial/_single/_instagram.scss

@@ -0,0 +1,5 @@
+iframe.instagram-media {
+  .dark-theme & {
+    border: none !important;
+  }
+}

assets/lib/mermaid/mermaid.scss

@@ -10,6 +10,6 @@
   @import "themes/neutral/index";
 
   .dark-theme & {
-    @import "themes/darker/index";
+    @import "themes/dark/index";
   }
 }

assets/lib/mermaid/themes/darker/index.scss

@@ -1,62 +0,0 @@
-$mainBkg: #BDD5EA;
-$secondBkg: #6D6D65;
-$mainContrastColor: lightgrey;
-$darkTextColor: #323D47;
-$lineColor: $mainContrastColor;
-$border1: #81B1DB;
-$border2: rgba(255, 255, 255, 0.25);
-$arrowheadColor: $mainContrastColor;
-
-/* Flowchart variables */
-
-$nodeBkg: $mainBkg;
-$nodeBorder: purple;
-$clusterBkg: $secondBkg;
-$clusterBorder: $border2;
-$defaultLinkColor: $lineColor;
-$titleColor: #F9FFFE;
-$edgeLabelBackground: #e8e8e8;
-
-/* Sequence Diagram variables */
-
-$actorBorder: $border1;
-$actorBkg: $mainBkg;
-$actorTextColor: black;
-$actorLineColor: $mainContrastColor;
-$signalColor: $mainContrastColor;
-$signalTextColor: $mainContrastColor;
-$labelBoxBkgColor: $actorBkg;
-$labelBoxBorderColor: $actorBorder;
-$labelTextColor: $darkTextColor;
-$loopTextColor: $mainContrastColor;
-$noteBorderColor: $border2;
-$noteBkgColor: #fff5ad;
-$activationBorderColor: #666;
-$activationBkgColor: #f4f4f4;
-$sequenceNumberColor: white;
-
-/* Gantt chart variables */
-
-$sectionBkgColor: rgba(255, 255, 255, 0.3);
-$altSectionBkgColor: white;
-$sectionBkgColor2: #EAE8B9;
-$taskBorderColor: rgba(255, 255, 255, 0.5);
-$taskBkgColor: $mainBkg;
-$taskTextColor: $darkTextColor;
-$taskTextLightColor: $mainContrastColor;
-$taskTextOutsideColor: $taskTextLightColor;
-$taskTextClickableColor: #003163;
-$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
-$activeTaskBkgColor: #81B1DB;
-$gridColor: $mainContrastColor;
-$doneTaskBkgColor: $mainContrastColor;
-$doneTaskBorderColor: grey;
-$critBorderColor: #E83737;
-$critBkgColor: #E83737;
-$taskTextDarkColor: $darkTextColor;
-$todayLineColor: #DB5757;
-
-/* state colors */
-$labelColor: black;
-
-@import '../mermaid';

assets/lib/mermaid/themes/gantt.scss

@@ -59,6 +59,7 @@
   text {
     font-family: 'trebuchet ms', verdana, arial;
     font-family: var(--mermaid-font-family);
+    fill: $taskTextOutsideColor;
   }
 }
 
@@ -151,12 +152,12 @@
 .taskTextOutside0,
 .taskTextOutside2
 {
-  fill: $taskTextOutsideColor;
+  fill: $taskTextOutsideColor !important;
 }
 
 .taskTextOutside1,
 .taskTextOutside3 {
-  fill: $taskTextOutsideColor;
+  fill: $taskTextOutsideColor !important;
 }
 
 
@@ -174,7 +175,7 @@
 .activeText1,
 .activeText2,
 .activeText3 {
-  fill: $taskTextDarkColor !important;
+  fill: $taskTextDarkColor;
 }
 
 
@@ -193,7 +194,7 @@
 .doneText1,
 .doneText2,
 .doneText3 {
-  fill: $taskTextDarkColor !important;
+  fill: $taskTextDarkColor;
 }
 
 
@@ -239,20 +240,20 @@
 .doneCritText1,
 .doneCritText2,
 .doneCritText3 {
-  fill: $taskTextDarkColor !important;
+  fill: $taskTextDarkColor;
 }
 
 .activeCritText0,
 .activeCritText1,
 .activeCritText2,
 .activeCritText3 {
-  fill: $taskTextDarkColor !important;
+  fill: $taskTextDarkColor;
 }
 
 .titleText {
   text-anchor: middle;
   font-size: 18px;
-  fill: $taskTextDarkColor;
+  fill: $taskTextOutsideColor;
   font-family: 'trebuchet ms', verdana, arial;
   font-family: var(--mermaid-font-family);
 }

assets/lib/valine/valine.scss

@@ -25,6 +25,10 @@
   .v code, .v pre {
     background: #272C34;
   }
+
+  .v .vmark .vinput {
+    color: #0e0f10;
+  }
 }
 
 .v code, .v pre {

layouts/partials/comment.html

@@ -51,7 +51,7 @@
     {{- if .Site.Params.comment.valine.enable -}}
         {{- $valine := .Site.Params.comment.valine -}}
         <div id="valine"></div>
-        {{- slice "lib/valine/dark.scss" | $scratch.Add "linkLocal" -}}
+        {{- slice "lib/valine/valine.scss" | $scratch.Add "linkLocal" -}}
         {{- with $CDN.valineJS -}}
             {{- slice . | $scratch.Add "scriptCDN" -}}
         {{- else -}}

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

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

resources/_gen/assets/scss/lib/valine/valine.scss_4fddb88d50abca04f2e7ef77f0bb1c3b.content

@@ -1,3 +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}
+.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}.dark-theme .v .vmark .vinput{color:#0e0f10}.v code,.v pre{text-align:left}
 
-/*# sourceMappingURL=dark.css.map */
+/*# sourceMappingURL=valine.css.map */

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

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