Dark mode color optimization.

cotes2020 · cotes2020 · commit b2e10e38bf14 · 2020-01-14T02:57:31.000+08:00
diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
@@ -20,11 +20,13 @@
 
     /* sidebar */
     --nav-cursor: rgb(183, 182, 182);
-    --sidebar-bg: radial-gradient(circle, #231c4c 0%, #1d1f27 100%);
+    --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
 
     /* common color */
     --text-color: rgb(175, 176, 177);
+    --text-muted-color: rgb(107, 116, 124);
     --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(93, 95, 82);
@@ -34,6 +36,10 @@
     --card-header-bg: rgb(51, 50, 50);
     --relate-post-title: rgb(164, 175, 181);
 
+    /* Home page */
+    --btn-active-bg: #1c345e;
+    --btn-active-border-color: #8ab4f8;
+
     /* posts */
     --toc-highlight: rgb(116, 178, 243);
     --tag-bg: rgb(41, 40, 40);
diff --git a/assets/css/home.scss b/assets/css/home.scss
@@ -55,7 +55,7 @@
 }
 
 .page-item .page-link {
-  color: #555555;
+  color: var(--text-color, #555555);
   width: 2.5rem;
   height: 2.5rem;
   padding: 0;
@@ -73,7 +73,8 @@
 }
 
 .page-item.active .page-link {
-  background-color: #2a408e;
+  background-color: var(--btn-active-bg, #2a408e);
+  border-color: var(--btn-active-border-color, #007bff);
   box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
   color: var(--text-color, #f8f8f8);
 }
@@ -131,11 +132,4 @@
   #post-list {
     padding-right: 0;
   }
-}
-
-@media (prefers-color-scheme: dark) {
-  .page-item.active .page-link {
-    background-color: #203a96;
-    border-color: #0252a9;
-  }
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -23,7 +23,7 @@ html {
 
 body {
   line-height: 1.75rem;
-  background: #fafafa;
+  background: var(--main-wrapper-bg, #fafafa);
   color: var(--text-color, #212529);
   -webkit-font-smoothing: antialiased;
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
@@ -291,7 +291,7 @@ body {
 }
 
 #search-wrapper+a { /* 'Cancel' link */
-  color: #2a408e;
+  color: var(--link-color, #2a408e);
   margin-left: 1rem;
   display: none;
 }
@@ -553,7 +553,7 @@ footer .license a {
   cursor: pointer;
   position: fixed;
   background: var(--button-bg, #fff);
-  color: #686868;
+  color: var(--text-color, #686868);
   height: 2.6em;
   width: 2.7em;
   border-radius: 50%;
@@ -662,7 +662,7 @@ a.reversefootnote {
 
 .post-content a {
   color: var(--link-color, #2a408e);
-  border-bottom: 1px dotted var(--link-color, #c2c6cc);
+  border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
 }
 
 p>a, span>a,
@@ -749,7 +749,7 @@ table tbody td {
 
 .post-meta a {
   color: var(--link-color, #2a408e);
-  border-bottom: 1px dotted var(--link-color, #c2c6cc);
+  border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
 }
 
 .post-meta a:not(:last-child) {
@@ -821,7 +821,7 @@ table tbody td {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--button-bg, #eaeaea) !important;
+  box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #eaeaea) !important;
 }
 
 .topbar-up {
diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -79,7 +79,7 @@
 }
 
 .post-navigation a::before {
-  color: gray;
+  color: var(--text-muted-color, gray);
   font-size: .65rem;
   text-transform: uppercase;
 }
@@ -157,7 +157,7 @@
 }
 
 #related-posts .timeago {
-  color: rgba(30,55,70,.4);
+  color: var(--text-muted-color, rgba(30,55,70,.4));
 }
 
 #related-posts p {

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.page-item .page-link {`
`58`		`- color: #555555;`
	`58`	`+ color: var(--text-color, #555555);`
`59`	`59`	`width: 2.5rem;`
`60`	`60`	`height: 2.5rem;`
`61`	`61`	`padding: 0;`
`@@ -73,7 +73,8 @@`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.page-item.active .page-link {`
`76`		`- background-color: #2a408e;`
	`76`	`+ background-color: var(--btn-active-bg, #2a408e);`
	`77`	`+ border-color: var(--btn-active-border-color, #007bff);`
`77`	`78`	`box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;`
`78`	`79`	`color: var(--text-color, #f8f8f8);`
`79`	`80`	`}`
`@@ -131,11 +132,4 @@`
`131`	`132`	`#post-list {`
`132`	`133`	`padding-right: 0;`
`133`	`134`	`}`
`134`		`-}`
`135`		`-`
`136`		`-@media (prefers-color-scheme: dark) {`
`137`		`- .page-item.active .page-link {`
`138`		`- background-color: #203a96;`
`139`		`- border-color: #0252a9;`
`140`		`- }`
`141`	`135`	`}`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`.post-navigation a::before {`
`82`		`- color: gray;`
	`82`	`+ color: var(--text-muted-color, gray);`
`83`	`83`	`font-size: .65rem;`
`84`	`84`	`text-transform: uppercase;`
`85`	`85`	`}`
`@@ -157,7 +157,7 @@`
`157`	`157`	`}`
`158`	`158`
`159`	`159`	`#related-posts .timeago {`
`160`		`- color: rgba(30,55,70,.4);`
	`160`	`+ color: var(--text-muted-color, rgba(30,55,70,.4));`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`#related-posts p {`