ui: make dark mode beautifier

Author: Lhcfl

src/scss/blog_basic.scss

@@ -1,3 +1,8 @@
+:root {
+  --mono-font-face: 'mononoki', 'Consolas', 'Roboto Mono', 'Lucida Console', 'Trebuchet MS', 'Courier New', 'courier',
+    monospace;
+}
+
 .content > .post > .post-content > p {
   word-wrap: break-word;
   word-break: break-all;
@@ -10,6 +15,7 @@
 }
 
 html {
+  -webkit-font-smoothing: antialiased;
   height: 100%;
   max-height: 100%;
   padding: 0;
@@ -20,6 +26,16 @@ body {
   padding: 0;
   margin: 0;
   line-height: 1.6em;
+  color: var(--primary-high);
+  font-family: 'Open Sans', Helvetica, Arial, 'PingHei', 'PingFang SC', Helvetica, 'Work Sans', 'Hiragino Sans GB',
+    'Microsoft YaHei', SimSun, sans-serif;
+  font-size: 15px;
+  width: 100%;
+  margin: 0 auto 30px auto;
+  background-color: var(--secondary);
+  transition:
+    background-color 0.8s,
+    color 0.8s;
 }
 
 .clear {
@@ -107,6 +123,32 @@ a img {
   border: none;
 }
 
+p {
+  line-height: 1.9em;
+  font-weight: 400;
+  font-size: 15px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link,
+a:visited {
+  opacity: 1;
+  -webkit-transition: all 0.15s linear;
+  -moz-transition: all 0.15s linear;
+  -o-transition: all 0.15s linear;
+  -ms-transition: all 0.15s linear;
+  transition: all 0.15s linear;
+  color: var(--primary-700);
+}
+
+a:hover,
+a:active {
+  color: var(--tertiary);
+}
+
 dl {
   dt {
     float: left;
@@ -174,16 +216,23 @@ mark {
 code,
 tt {
   padding: 1px 3px;
-  font-family: Inconsolata, monospace, sans-serif;
-  font-size: 0.95em;
+  font-family: var(--mono-font-face);
   white-space: pre-wrap;
-  border: 1px solid var(--primary-200);
   background-color: var(--secondary-950);
   transition:
     background-color 0.8s,
     border 0.8s;
-  color: #d14;
-  border-radius: 2px;
+  color: var(--primary-700);
+  border-radius: 3px;
+}
+
+pre {
+  font-size: 15px;
+  background-color: var(--secondary-950) !important;
+  font-family: var(--mono-font-face) !important;
+  text-wrap: wrap;
+  overflow-wrap: anywhere;
+  color: var(--primary-700) !important;
 }
 
 kbd {

src/scss/color-defination.scss

@@ -19,15 +19,19 @@
 @mixin darkTheme() {
   $primary: 255 255 255;
   $secondary: 40 40 40;
+  $tertiary: 181 206 255;
   @include genColor('primary', $primary, $secondary);
   @include genColor('secondary', $secondary, $primary);
+  @include genColor('tertiary', $tertiary, $secondary);
 }
 
 @mixin lightTheme() {
   $primary: 22 22 22;
   $secondary: 255 255 255;
+  $tertiary: 71 134 214;
   @include genColor('primary', $primary, $secondary);
   @include genColor('secondary', $secondary, $primary);
+  @include genColor('tertiary', $tertiary, $secondary);
 }
 
 html[theme='default'] {

src/scss/highlight.scss

@@ -1231,13 +1231,6 @@ figure.highlight {
 }
 
 pre {
-  font-size: 15px;
-  background-color: var(--secondary-950) !important;
-  font-family: 'mononoki', 'Consolas', 'Roboto Mono', 'Lucida Console', 'Trebuchet MS', 'Courier New', 'Monaco',
-    'courier', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Jhenghei', 'Microsoft YaHei', monospace !important;
-
-  color: var(--primary-700) !important;
-
   .function .keyword,
   .constant {
     color: #0092db !important;

src/scss/style.scss

@@ -2,50 +2,6 @@
 
 $site-border: 1px solid var(--primary-100);
 
-html {
-  -webkit-font-smoothing: antialiased;
-  // transition: all 0.2s ease-out;
-}
-
-body {
-  color: var(--primary-high);
-  font-family: 'Open Sans', Helvetica, Arial, 'PingHei', 'PingFang SC', Helvetica, 'Work Sans', 'Hiragino Sans GB',
-    'Microsoft YaHei', SimSun, sans-serif;
-  font-size: 15px;
-  width: 100%;
-  margin: 0 auto 30px auto;
-  background-color: var(--secondary);
-  transition:
-    background-color 0.8s,
-    color 0.8s;
-}
-
-p {
-  line-height: 1.9em;
-  font-weight: 400;
-  font-size: 15px;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:link,
-a:visited {
-  opacity: 1;
-  -webkit-transition: all 0.15s linear;
-  -moz-transition: all 0.15s linear;
-  -o-transition: all 0.15s linear;
-  -ms-transition: all 0.15s linear;
-  transition: all 0.15s linear;
-  color: var(--secondary-300);
-}
-
-a:hover,
-a:active {
-  color: #4786d6;
-}
-
 /* basic styles ends */
 /* animation starts */
 .animated {
@@ -420,7 +376,7 @@ a:active {
   .post-content {
     a {
       text-decoration: none;
-      color: #4786d6;
+      color: var(--tertiary);
     }
 
     a:hover {