From 8fcf1e35fc69ae8a0ae9cfa28468b56c2365e766 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 6 Jan 2020 23:50:16 +0800
Subject: [PATCH] Dark mode color optimization.

---
 assets/css/_dark/dark-main.scss |  8 +++++++-
 assets/css/home.scss            | 12 +++---------
 assets/css/main.scss            | 12 ++++++------
 assets/css/post.scss            |  4 ++--
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
index 8afe8cf..a1288a6 100644
--- 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
index f6f24f3..963f259 100644
--- 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;
-  }
 }
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index b00d753..a1a26c1 100644
--- 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
index 947c94f..1b31d4a 100644
--- 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 {