refactor(ui): optimize the color scheme

_sass/addon/commons.scss

@@ -696,6 +696,7 @@ $btn-mb: 0.5rem;
   width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
@@ -835,6 +836,7 @@ $btn-mb: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
+      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
 
       &:hover {
         background-color: var(--sidebar-hover-bg);
@@ -868,7 +870,7 @@ $btn-mb: 0.5rem;
       @extend %no-cursor;
       @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
 
-      background-color: var(--sidebar-muted-color);
+      background-color: var(--sidebar-btn-color);
       content: '';
       width: $btn-border-width;
       height: $btn-border-width;

_sass/colors/syntax-dark.scss

@@ -5,9 +5,9 @@
 @mixin dark-syntax {
   --language-border-color: #2d2d2d;
   --highlight-bg-color: #151515;
-  --highlighter-rouge-color: #ff6e4e;
+  --highlighter-rouge-color: #c9def1;
   --highlight-lineno-color: #808080;
-  --inline-code-bg: #272822;
+  --inline-code-bg: #323238;
   --code-color: #b0b0b0;
   --code-header-text-color: #6a6a6a;
   --code-header-muted-color: #353535;

_sass/colors/typography-dark.scss

@@ -10,9 +10,9 @@
 
   /* Common color */
   --text-color: rgb(175, 176, 177);
-  --text-muted-color: rgb(125, 136, 146);
+  --text-muted-color: #868686;
   --heading-color: #cccccc;
-  --label-color: #a4a4c2;
+  --label-color: #a7a7a7;
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: #868686;
   --link-color: rgb(138, 180, 248);
@@ -22,7 +22,7 @@
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --btn-box-shadow: var(--main-bg);
-  --card-header-bg: rgb(48, 48, 48);
+  --card-header-bg: #292929;
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
   --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
@@ -35,12 +35,13 @@
 
   /* Sidebar */
   --site-title-color: #717070;
-  --site-subtitle-color: #6d6c6b;
+  --site-subtitle-color: #868686;
-  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+  --sidebar-bg: #1e1e1e;
-  --sidebar-muted-color: #6d6c6b;
+  --sidebar-border-color: #292929;
+  --sidebar-muted-color: #868686;
   --sidebar-active-color: rgb(255, 255, 255, 0.95);
-  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
+  --sidebar-hover-bg: #262626;
-  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-btn-bg: #232328;
   --sidebar-btn-color: #787878;
   --avatar-border-color: rgb(206, 206, 206, 0.9);
 
@@ -61,7 +62,7 @@
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
   --tag-hover: rgb(43, 56, 62);
-  --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */
+  --tb-odd-bg: #252526; /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
   --tb-border-color: var(--tb-odd-bg);
   --footnote-target-bg: rgb(63, 81, 181);
@@ -87,8 +88,8 @@
   /* tags */
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
-  --search-tag-bg: var(--tag-bg);
   --dash-color: rgb(63, 65, 68);
+  --search-tag-bg: #292828;
 
   /* categories */
   --categories-border: rgb(64, 66, 69, 0.5);

_sass/colors/typography-light.scss

@@ -11,11 +11,11 @@
   /* Common color */
   --text-color: #34343c;
   --text-muted-color: #757575;
-  --heading-color: black;
+  --heading-color: #2a2a2a;
-  --label-color: #4d4d5b;
+  --label-color: #585858;
   --blockquote-border-color: #eeeeee;
   --blockquote-text-color: #757575;
-  --link-color: #0153ab;
+  --link-color: #0056b2;
   --link-underline-color: #dee2e6;
   --button-bg: #ffffff;
   --btn-border-color: #e9ecef;
@@ -40,6 +40,7 @@
   --site-title-color: rgb(113, 113, 113);
   --site-subtitle-color: #717171;
   --sidebar-bg: #f6f8fa;
+  --sidebar-border-color: #efefef;
   --sidebar-muted-color: #545454;
   --sidebar-active-color: #1d1d1d;
   --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
@@ -51,7 +52,6 @@
   --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
   --search-wrapper-border-color: rgb(240, 240, 240);
-  --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: #b8b8b8;
 
@@ -63,16 +63,13 @@
   --btn-text-color: #676666;
 
   /* Posts */
-  --toc-highlight: #47566c;
+  --toc-highlight: #0550ae;
   --btn-share-hover-color: var(--link-color);
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
   --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
     rgba(211, 209, 209, 0.15) 0 0 0 1px;
   --footnote-target-bg: lightcyan;
-  --tag-border: #dee2e6;
-  --tag-shadow: var(--btn-border-color);
-  --tag-hover: rgb(222, 226, 230);
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
@@ -89,6 +86,12 @@
   --prompt-danger-bg: rgb(248, 215, 218, 0.56);
   --prompt-danger-icon-color: #df3c30;
 
+  /* Tags */
+  --tag-border: #dee2e6;
+  --tag-shadow: var(--btn-border-color);
+  --tag-hover: rgb(222, 226, 230);
+  --search-tag-bg: #f8f9fa;
+
   [class^='prompt-'] {
     --link-underline-color: rgb(219, 216, 216);
   }