Lighten the light mode color scheme

_sass/addon/commons.scss

@@ -650,21 +650,20 @@ $sidebar-display: "sidebar-display";
     &:hover {
       @include no-text-decoration;
 
-      color: #fff;
+      color: var(--sidebar-hover-color) !important;
     }
   }
 
   #avatar {
-    &:hover > a {
-      border-color: #fff;
-    }
-
     > a {
+      &:hover {
+        border-color: white;
+      }
       display: block;
       width: 6rem;
       height: 6rem;
       border-radius: 50%;
-      border: 2px solid #b6b6b6;
+      border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
       transform: translateZ(0); // fixed the zoom in Safari
       -webkit-transition: border-color 0.35s ease-in-out;
@@ -690,15 +689,18 @@ $sidebar-display: "sidebar-display";
 
   .site-title {
     a {
+      @extend %clickable-transition;
+
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
+      color: rgba(134, 133, 133, 99%);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: #828282;
+    color: var(--sidebar-muted-color);
     line-height: 1.2rem;
     word-spacing: 1px;
     margin: 0.5rem 1.5rem 0.5rem 1.5rem;
@@ -719,16 +721,16 @@ $sidebar-display: "sidebar-display";
     text-align: center;
     display: table;
     height: $tab-height;
-    &:hover {
+
-      .nav-link {
-        color: #f8f9facf;
-      }
-    }
     &.active {
       .nav-link {
-        color: #fcfcfc;
+        color: var(--sidebar-active-color);
       }
     }
+
+    &:not(.active) > a {
+      @extend %clickable-transition;
+    }
   }
 
   ul {
@@ -803,6 +805,7 @@ $sidebar-display: "sidebar-display";
 
     a {
       @extend %icon;
+      @extend %clickable-transition;
     }
 
     #mode-toggle-wrapper {
@@ -812,6 +815,7 @@ $sidebar-display: "sidebar-display";
         @include sidebar-links;
 
         @extend %cursor-pointer;
+        @extend %clickable-transition;
 
         margin: 0;
         font-size: 1.05rem;
@@ -823,7 +827,7 @@ $sidebar-display: "sidebar-display";
     }
 
     .icon-border {
-      background-color: #525354;
+      background-color: var(--sidebar-muted-color);
       content: "";
       width: 3px;
       height: 3px;
@@ -834,7 +838,7 @@ $sidebar-display: "sidebar-display";
 
     a:hover,
     #mode-toggle-wrapper i:hover {
-      color: #fff;
+      color: var(--sidebar-hover-color);
     }
 
   } // .sidebar-bottom
@@ -875,7 +879,6 @@ $sidebar-display: "sidebar-display";
   transition: top 0.2s ease-in-out;
   z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
   background-color: var(--topbar-wrapper-bg);
 }
 
@@ -913,7 +916,7 @@ $sidebar-display: "sidebar-display";
   display: flex;
   width: 85%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-bg);
+  border: 1px solid var(--search-wrapper-border-color);
   background: var(--search-wrapper-bg);
   padding: 0 0.5rem;
 

_sass/addon/module.scss

@@ -35,6 +35,10 @@
   border-bottom: 1px solid var(--link-underline-color);
 }
 
+%clickable-transition {
+  transition: color 0.35s ease-in-out;
+}
+
 %no-bottom-border {
   border-bottom: none;
 }
@@ -61,9 +65,8 @@
   text-decoration: none;
 }
 
-@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
+@mixin sidebar-links {
-  color: $color;
+  color: rgba(117, 117, 117, 83%);
-  transition: color 0.35s ease-in-out;
   user-select: none;
 }
 

_sass/addon/variables.scss

@@ -14,7 +14,7 @@ $tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
 $tab-height: 3.2rem !default;
 $tab-cursor-height: 1.6rem !default;
 
-$cursor-width: 3px !default;    // the cursor width of the selected tab
+$cursor-width: 2px !default;    // the cursor width of the selected tab
 
 /* other framework sizes */
 

_sass/colors/dark-typography.scss

@@ -30,13 +30,17 @@
   --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
-  --nav-cursor-color: rgb(183, 182, 182);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+  --sidebar-muted-color: #6d6c6b;
+  --sidebar-hover-color: rgb(255 255 255 / 68%);
+  --sidebar-active-color: rgb(255 255 255 / 68%);
+  --nav-cursor-color: rgb(183, 182, 182);
 
   /* Topbar */
   --topbar-text-color: var(--text-color);
   --topbar-wrapper-bg: rgb(39, 40, 43);
   --search-wrapper-bg: rgb(34, 34, 39);
+  --search-wrapper-border-color: rgb(34, 34, 39);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 
@@ -44,11 +48,8 @@
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
   --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-active-bg: rgba(28, 52, 94, 1);
-  --btn-active-border-color: rgb(66, 94, 138);
-  --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
-  --btn-paginator-shadow: var(--main-wrapper-bg);
+  --btn-text-color: var(--text-color);
   --pin-bg: rgb(34 35 37);
   --pin-color: inherit;
 
@@ -98,12 +99,13 @@
   nav[data-toggle=toc] .nav-link.active,
   nav[data-toggle=toc] .nav-link.active:focus,
   nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav > li > a:focus,
+  nav[data-toggle=toc] .nav>li>a:focus,
-  nav[data-toggle=toc] .nav > li > a:hover {
+  nav[data-toggle=toc] .nav>li>a:hover {
     color: var(--toc-highlight) !important;
     border-left-color: var(--toc-highlight) !important;
   }
 
+
   /* categories */
   .categories.card,
   .list-group-item {

_sass/colors/light-typography.scss

@@ -28,13 +28,17 @@
   --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
-  --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
+  --sidebar-bg: #eeeeee;
-  --nav-cursor-color: #fcfcfc;
+  --sidebar-muted-color: #a2a19f;
+  --sidebar-hover-color: #696868;
+  --sidebar-active-color: #455a64;
+  --nav-cursor-color: #455a64;
 
   /* Topbar */
   --topbar-text-color: rgb(78, 78, 78);
   --topbar-wrapper-bg: white;
-  --search-wrapper-bg: #f5f5f5;
+  --search-wrapper-bg: rgb(245 245 245 / 50%);
+  --search-wrapper-border-color: rgb(245 245 245);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: var(--btn-border-color);
@@ -42,12 +46,9 @@
   /* Home page */
   --post-list-text-color: dimgray;
   --btn-patinator-text-color: #555555;
-  --btn-paginator-hover-color: #e9ecef;
+  --btn-paginator-hover-color: var(--sidebar-bg);
-  --btn-active-bg: #2a408e;
+  --btn-paginator-border-color: var(--sidebar-bg);
-  --btn-active-border-color: #007bff;
+  --btn-text-color: #676666;
-  --btn-text-color: #f8f8f8;
-  --btn-paginator-border-color: #f1f1f1;
-  --btn-paginator-shadow: #4b92d2;
   --pin-bg: #f5f5f5;
   --pin-color: #999fa4;
 

_sass/layout/home.scss

@@ -28,9 +28,7 @@
     }
     &.active {
       .page-link {
-        background-color: var(--btn-active-bg);
+        background-color: var(--btn-paginator-hover-color);
-        border-color: var(--btn-active-border-color);
-        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
         color: var(--btn-text-color);
       }
     }

_sass/layout/post.scss

@@ -143,12 +143,22 @@
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  font-size: 0.8rem;
 
   &.nav-link:not(.active) {
     color: inherit;
   }
 }
 
+nav[data-toggle=toc] {
+  .nav {
+    .nav > li > a.active {
+      font-weight: 600 !important;
+    }
+  }
+}
+
+
 /* --- Related Posts --- */
 
 #related-posts {