diff --git a/theme/src/client/components/Sidebar.vue b/theme/src/client/components/Sidebar.vue
index 124ab98f..f0c898f4 100644
--- a/theme/src/client/components/Sidebar.vue
+++ b/theme/src/client/components/Sidebar.vue
@@ -70,7 +70,9 @@ watch(
   box-shadow: var(--vp-c-shadow-3);
   opacity: 0;
   transition:
-    opacity 0.5s,
+    opacity var(--t-color),
+    background-color var(--t-color),
+    box-shadow var(--t-color),
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   transform: translateX(-100%);
 
@@ -130,6 +132,7 @@ watch(
     margin-right: -32px;
     margin-left: -32px;
     background-color: var(--vp-sidebar-bg-color);
+    transition: background-color var(--t-color);
   }
 }
 
@@ -140,6 +143,7 @@ watch(
 .group + .group {
   padding-top: 10px;
   border-top: 1px solid var(--vp-c-divider);
+  transition: border-top var(--t-color);
 }
 
 @media (min-width: 960px) {
diff --git a/theme/src/client/components/SidebarItem.vue b/theme/src/client/components/SidebarItem.vue
index 7d5ebd90..9bb48dd9 100644
--- a/theme/src/client/components/SidebarItem.vue
+++ b/theme/src/client/components/SidebarItem.vue
@@ -131,7 +131,7 @@ function onCaretClick() {
   bottom: 6px;
   left: -17px;
   width: 1px;
-  transition: background-color 0.25s;
+  transition: background-color var(--t-color);
 }
 
 .sidebar-item.level-2.is-active > .item > .indicator,
@@ -151,7 +151,7 @@ function onCaretClick() {
   padding: 4px 0;
   font-size: 14px;
   line-height: 24px;
-  transition: color 0.25s;
+  transition: color var(--t-color);
 }
 
 .sidebar-item.level-0 .text {
@@ -204,7 +204,7 @@ function onCaretClick() {
   margin-right: -7px;
   color: var(--vp-c-text-3);
   cursor: pointer;
-  transition: color 0.25s;
+  transition: color var(--t-color);
 }
 
 .item:hover .caret {
@@ -219,7 +219,7 @@ function onCaretClick() {
   width: 18px;
   height: 18px;
   fill: currentcolor;
-  transition: transform 0.25s;
+  transition: transform var(--t-color);
   transform: rotate(90deg);
 }
 
@@ -234,6 +234,7 @@ function onCaretClick() {
 .sidebar-item.level-5 .items {
   padding-left: 16px;
   border-left: 1px solid var(--vp-c-divider);
+  transition: border-left var(--t-color);
 }
 
 .sidebar-item.collapsed .items {