diff --git a/src/app/layout/layout-sidebar.component.ts b/src/app/layout/layout-sidebar.component.ts
index ba3997b73b..85f48b83fa 100644
--- a/src/app/layout/layout-sidebar.component.ts
+++ b/src/app/layout/layout-sidebar.component.ts
@@ -108,7 +108,7 @@ import { SitePostService } from '../site-common/site-post.service';
       @for (item of menuItems(); track item.link) {
       <a
         mat-list-item
-        routerLinkActive="text-[color:var(--sidebar-highlight-text-color)] bg-[color:var(--sidebar-highlight-bg-color)]"
+        routerLinkActive="text-[color:var(--sidebar-highlight-text-color)]"
         [routerLinkActiveOptions]="{ exact: item.link === '/blog' }"
         [routerLink]="item.link"
       >
diff --git a/src/styles.scss b/src/styles.scss
index 4058617f3b..692da6490d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -69,7 +69,7 @@ $blog-dark-theme: mat.m2-define-dark-theme((
 a {
   color: var(--default-link-color);
   text-decoration: underline;
-  transition: all 0.3s;
+  transition: color 0.3s;
 
   &:hover {
     color: var(--default-link-hover-color);
diff --git a/src/variables.scss b/src/variables.scss
index a5da03121d..0cee8d5f73 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,13 +1,15 @@
+@use "sass:color";
+@use "sass:map";
 @use '@angular/material' as mat;
 
 :root {
   $background-color: #ffffff;
-  $primary-color: map-get(mat.$m2-indigo-palette, 500);
-  $primary-text-color: map-get(mat.$m2-gray-palette, 900);
-  $secondary-text-color: map-get(mat.$m2-gray-palette, 500);
-  $default-link-color: map-get(mat.$m2-indigo-palette, 400);
-  $default-link-hover-color: map-get(mat.$m2-indigo-palette, 600);
-  $sidebar-text-color: map-get(mat.$m2-gray-palette, 600);
+  $primary-color: map.get(mat.$m2-indigo-palette, 500);
+  $primary-text-color: map.get(mat.$m2-gray-palette, 900);
+  $secondary-text-color: map.get(mat.$m2-gray-palette, 500);
+  $default-link-color: map.get(mat.$m2-indigo-palette, 400);
+  $default-link-hover-color: map.get(mat.$m2-indigo-palette, 600);
+  $sidebar-text-color: map.get(mat.$m2-gray-palette, 600);
 
   --background-color:#{$background-color};
   --primary-color: #{$primary-color};
@@ -29,7 +31,6 @@
   // sidebar
   --sidebar-text-color: #{$sidebar-text-color};
   --sidebar-highlight-text-color: var(--primary-color);
-  --sidebar-highlight-bg-color: #{transparentize($primary-color, 0.85)};
 
   // sub pages header
   --sub-pages-header-background-color: #{$background-color};
@@ -40,28 +41,28 @@
   // page note
   --note-background-color: transparent;
   --note-border-color: rgba(0, 0, 0, 0.2);
-  --note-info-indicator-color: #{map-get(mat.$m2-indigo-palette, 500)};
-  --note-warning-indicator-color: #{map-get(mat.$m2-orange-palette, 500)};
-  --note-danger-indicator-color: #{map-get(mat.$m2-pink-palette, 500)};
+  --note-info-indicator-color: #{map.get(mat.$m2-indigo-palette, 500)};
+  --note-warning-indicator-color: #{map.get(mat.$m2-orange-palette, 500)};
+  --note-danger-indicator-color: #{map.get(mat.$m2-pink-palette, 500)};
 
   // toc
   --toc-header-color: #{$primary-text-color};
-  --toc-indicator-color: #{map-get(mat.$m2-gray-palette, 500)};
+  --toc-indicator-color: #{map.get(mat.$m2-gray-palette, 500)};
   --toc-indicator-focus-color: #{$primary-color};
 
   // code
   --code-text-color: #{$primary-color};
-  --code-background-color: #{map-get(mat.$m2-gray-palette, 200)};
+  --code-background-color: #{map.get(mat.$m2-gray-palette, 200)};
 
   // dark theme
   .dark-theme {
     $background-color: #424242;
-    $primary-color: map-get(mat.$m2-indigo-palette, 200);
-    $primary-text-color: map-get(mat.$m2-gray-palette, 100);
-    $secondary-text-color: map-get(mat.$m2-gray-palette, 400);
-    $sidebar-text-color: map-get(mat.$m2-gray-palette, 400);
+    $primary-color: map.get(mat.$m2-indigo-palette, 200);
+    $primary-text-color: map.get(mat.$m2-gray-palette, 100);
+    $secondary-text-color: map.get(mat.$m2-gray-palette, 400);
+    $sidebar-text-color: map.get(mat.$m2-gray-palette, 400);
     $default-link-color: #D4DAED;
-    $default-link-hover-color: lighten($default-link-color, 15%);
+    $default-link-hover-color: color.adjust($default-link-color, $lightness: 15%);
 
     --background-color:#{$background-color};
     --primary-color: #{$primary-color};
@@ -90,7 +91,6 @@
     // sidebar
     --sidebar-text-color: #{$sidebar-text-color};
     --sidebar-highlight-text-color: var(--primary-color);
-    --sidebar-highlight-bg-color: #{transparentize($primary-color, 0.55)};
 
     // sub pages header
     --sub-pages-header-background-color: #424242;
@@ -101,17 +101,17 @@
     // page note
     --note-background-color: transparent;
     --note-border-color: rgba(255, 255, 255, 0.3);
-    --note-info-indicator-color: #{map-get(mat.$m2-indigo-palette, 500)};
-    --note-warning-indicator-color: #{map-get(mat.$m2-orange-palette, 500)};
-    --note-danger-indicator-color: #{map-get(mat.$m2-pink-palette, 500)};
+    --note-info-indicator-color: #{map.get(mat.$m2-indigo-palette, 500)};
+    --note-warning-indicator-color: #{map.get(mat.$m2-orange-palette, 500)};
+    --note-danger-indicator-color: #{map.get(mat.$m2-pink-palette, 500)};
 
     // toc
     --toc-header-color: #{$primary-text-color};
-    --toc-indicator-color: #{map-get(mat.$m2-gray-palette, 500)};
+    --toc-indicator-color: #{map.get(mat.$m2-gray-palette, 500)};
     --toc-indicator-focus-color: #{$primary-color};
 
     // code
     --code-text-color: #D4DAED;
-    --code-background-color: #{map-get(mat.$m2-gray-palette, 800)};
+    --code-background-color: #{map.get(mat.$m2-gray-palette, 800)};
   }
 }