Code style merge and resume some colors.

cotes2020 · cotes2020 · commit c1a8abbc9cbf · 2020-02-12T00:27:35.000+08:00
diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
@@ -6,7 +6,7 @@
 * MIT Licensed
 */
 
-@mixin darkScheme() {
+@mixin dark-scheme {
   /* framework */
   --main-wrapper-bg: rgb(27, 27, 30);
   --topbar-wrapper-bg: rgb(39, 40, 43);
@@ -24,8 +24,8 @@
   /* common color */
   --text-color: rgb(175, 176, 177);
   --text-muted-color: rgb(107, 116, 124);
-  --link-color: #3db5c2;
-  --link-underline-color: #3db5c2;
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(99, 131, 182);
   --main-border: rgb(63, 65, 68);
   --button-bg: rgb(39, 40, 33);
   --blockquote-border: rgb(66, 66, 66);
@@ -57,59 +57,65 @@
   --timeline-node-bg: rgb(150, 152, 156);
 }
 
-
 /* Light scheme prefered (= dark scheme not prefered)
- * -> dark scheme triggered with <body class="color-scheme-dark">
+ * -> dark scheme triggered with <html class="dark-mode">
  */
-body.color-scheme-dark{
+html.dark-mode {
   /* Dark scheme */
-  @include darkScheme();
+  @include dark-scheme;
+
   // Hide element in dark color scheme
   // (visible in light scheme)
-  .color-scheme-dark-hidden {
+  .dark-mode-hidden {
     display: none;
   }
-  .color-scheme-light-hidden {
+
+  .light-mode-hidden {
     display: initial;
   }
 }
-body:not(.color-scheme-dark) {
-  /* Light scheme */
+
+html:not(.dark-mode) {
   // Hide element in dark color scheme
   // (visible in light scheme)
-  .color-scheme-light-hidden {
+  .light-mode-hidden {
     display: none;
   }
-  .color-scheme-dark-hidden {
+
+  .dark-mode-hidden {
     display: initial;
   }
 }
 
+
 @media (prefers-color-scheme: dark) {
   /* Dark scheme prefered
-   * -> light scheme triggered with <body class="color-scheme-light">
+   * -> light scheme triggered with <html class="light-mode">
    */
-  body:not(.color-scheme-light) {
+  html:not(.light-mode) {
     /* Dark scheme */
-    @include darkScheme();
+    @include dark-scheme;
     // Hide element in dark color scheme
     // (visible in light scheme)
-    .color-scheme-dark-hidden {
+    .dark-mode-hidden {
       display: none;
     }
-    .color-scheme-light-hidden {
+
+    .light-mode-hidden {
       display: initial;
     }
   }
-  body.color-scheme-light {
+
+  html.light-mode {
     /* Light scheme */
     // Hide element in dark color scheme
     // (visible in light scheme)
-    .color-scheme-light-hidden {
+    .light-mode-hidden {
       display: none;
     }
-    .color-scheme-dark-hidden {
+    .dark-mode-hidden {
       display: initial;
     }
   }
+
 }
diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss
@@ -6,8 +6,7 @@
 * MIT Licensed
 */
 
-@mixin darkSchemeHighlight() {
-
+@mixin dark-sheme {
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   --highlight-pre-bg: #272822;
   --highlight-hll-bg: #272822;
@@ -87,13 +86,13 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  body:not(.color-scheme-light) {
-    @include darkSchemeHighlight();
+  html:not(.light-mode) {
+    @include dark-sheme;
   }
 }
 
-@media not (prefers-color-scheme: dark) {
-  body.color-scheme-dark {
-    @include darkSchemeHighlight();
+@media (prefers-color-scheme: light) {
+  html.dark-mode {
+    @include dark-sheme;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,7 @@`
`6`	`6`	`* MIT Licensed`
`7`	`7`	`*/`
`8`	`8`
`9`		`-@mixin darkSchemeHighlight() {`
`10`		`-`
	`9`	`+@mixin dark-sheme {`
`11`	`10`	`/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */`
`12`	`11`	`--highlight-pre-bg: #272822;`
`13`	`12`	`--highlight-hll-bg: #272822;`
`@@ -87,13 +86,13 @@`
`87`	`86`	`}`
`88`	`87`
`89`	`88`	`@media (prefers-color-scheme: dark) {`
`90`		`- body:not(.color-scheme-light) {`
`91`		`- @include darkSchemeHighlight();`
	`89`	`+ html:not(.light-mode) {`
	`90`	`+ @include dark-sheme;`
`92`	`91`	`}`
`93`	`92`	`}`
`94`	`93`
`95`		`-@media not (prefers-color-scheme: dark) {`
`96`		`- body.color-scheme-dark {`
`97`		`- @include darkSchemeHighlight();`
	`94`	`+@media (prefers-color-scheme: light) {`
	`95`	`+ html.dark-mode {`
	`96`	`+ @include dark-sheme;`
`98`	`97`	`}`
`99`	`98`	`}`