docs: adjust dark toggle transition between navbar & content (#7493)

docs/.vitepress/vitepress/components/navbar/vp-search.vue

@@ -182,6 +182,8 @@ function initialize(userOptions: any) {
   --docsearch-text-color: var(--text-color-light);
   --docsearch-modal-background: var(--bg-color-soft);
 
+  transition: background-color var(--el-transition-duration-fast);
+
   &.DocSearch-Button {
     margin-right: 8px;
   }

docs/.vitepress/vitepress/styles/base.scss

@@ -31,6 +31,7 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: background-color var(--el-transition-duration-fast);
 }
 
 main {

docs/.vitepress/vitepress/styles/mixins.scss

@@ -6,7 +6,7 @@
   background-color: var(--bg-color);
   color: var(--text-color);
   transition: border-color var(--el-transition-duration),
-    background-color var(--el-transition-duration);
+    background-color var(--el-transition-duration-fast);
 }
 
 @mixin with-border {

docs/.vitepress/vitepress/styles/sidebar.scss

@@ -13,7 +13,7 @@
   padding: 48px 32px 0;
   overflow-y: auto;
   transform: translate(-100%);
-  transition: background-color 0.5s, opacity 0.25s,
+  transition: background-color var(--el-transition-duration-fast), opacity 0.25s,
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 
   &.open {