refine toc link active color

assets/css/common/post-single.css

@@ -308,11 +308,13 @@ h6:hover .anchor {
     border-radius: var(--radius);
     padding: 0.4em 0;
 }
+.toc.side {
+    font-size: .8em;
+}
 @media screen and (min-width: 1440px) {
     .toc.side {
         position: fixed;
         top: 118px;
-        font-size: .8em;
         z-index: 1;
         max-height: calc(100% - 150px);
         overflow: auto;
@@ -351,10 +353,16 @@ h6:hover .anchor {
 .toc li ul {
     margin-inline-start: 20px;
 }
-.toc li a.active {
-    box-shadow: 0 2px 0 var(--secondary);
+.toc li a {
+    line-height: 1.5em;
+    padding: .1em .4em;
+    border-radius: 5px;
+    display: block;
 }
-.toc a:hover {
+.toc li a.active {
+    background-color: var(--link-background-color);
+}
+.toc li a:hover {
     text-decoration: underline;
 }
 

assets/css/core/theme-vars.css

@@ -17,6 +17,7 @@
     --content: rgb(31, 31, 31);
     --code-bg: rgb(245, 245, 245);
     --border: rgb(238, 238, 238);
+    --link-background-color: #e8e3f7;
     --link-color: var(--primary);
     --link-hover-color: #573eaa;
     --link-underline-shadow: 0 1px 0 var(--link-color);
@@ -35,6 +36,7 @@
     --content: rgb(196, 196, 197);
     --code-bg: rgb(55, 56, 62);
     --border: rgb(51, 51, 51);
+    --link-background-color: #5242746d;
     --link-color: var(--primary);
     --link-hover-color: #876fd6;
     --link-underline-shadow: 0 1px 0 var(--link-color);