优化明暗切换过渡效果

Author: hooray

src/assets/styles/globals.css

@@ -59,6 +59,12 @@
   scrollbar-width: thin;
 }
 
+.disable-color-scheme-transition-duration *,
+.disable-color-scheme-transition-duration *::before,
+.disable-color-scheme-transition-duration *::after {
+  transition-duration: 0ms !important;
+}
+
 html,
 body {
   height: 100%;

src/layouts/components/Header/index.vue

@@ -29,7 +29,7 @@ const { switchTo } = useMenu()
                 }"
               >
                 <div
-                  v-if="item.children && item.children.length !== 0" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-3 text-[var(--g-header-menu-color)] transition-all hover-(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
+                  v-if="item.children && item.children.length !== 0" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-3 text-[var(--g-header-menu-color)] transition-colors hover-(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
                     'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
                   }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                 >

src/layouts/components/MainSidebar/index.vue

@@ -48,7 +48,7 @@ onUnmounted(() => {
               }"
             >
               <div
-                v-if="item.children && item.children.length !== 0" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
+                v-if="item.children && item.children.length !== 0" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg py-4 text-[var(--g-main-sidebar-menu-color)] transition-colors hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
                   'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
                 }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
               >

src/layouts/components/Menu/index.vue

@@ -170,7 +170,7 @@ provide(rootMenuInjectionKey, reactive({
 
 <template>
   <div
-    :class="cn('h-full w-full flex flex-col of-hidden transition-all-300', {
+    :class="cn('h-full w-full flex flex-col of-hidden', {
       'flex-row w-auto': isMenuPopup && props.mode === 'horizontal',
       'py-1': props.mode === 'vertical',
     })"

src/layouts/components/Menu/item.vue

@@ -37,7 +37,7 @@ defineExpose({
 
 <template>
   <div
-    ref="itemRef" :class="cn('menu-item relative transition-all', {
+    ref="itemRef" :class="cn('menu-item relative', {
       'active': isItemActive,
       'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
       'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
@@ -52,7 +52,7 @@ defineExpose({
               target: item.meta?.link ? '_blank' : '_self',
               class: 'no-underline',
             }),
-          }" :class="cn('group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])', {
+          }" :class="cn('group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-colors hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])', {
             'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
             'px-3': rootMenu.isMenuPopup && level === 0,
           })" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{

src/layouts/components/Topbar/Toolbar/index.vue

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="toolbar-container flex items-center justify-between">
+  <div class="toolbar-container h-[var(--g-toolbar-height)] flex items-center justify-between bg-[var(--g-toolbar-bg)]">
     <div class="left-side h-full flex items-center of-hidden pe-16 ps-2">
       <LeftSide />
     </div>
@@ -19,13 +19,7 @@ defineOptions({
 </template>
 
 <style scoped>
-.toolbar-container {
-  height: var(--g-toolbar-height);
-  background-color: var(--g-toolbar-bg);
-  transition: background-color 0.3s;
-
-  .left-side {
-    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 50px), transparent);
-  }
+.left-side {
+  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 50px), transparent);
 }
 </style>

src/store/modules/settings.ts

@@ -12,6 +12,12 @@ export const useSettingsStore = defineStore(
 
     const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
     watch(() => settings.value.app.colorScheme, (val) => {
+      document.documentElement.classList.add('disable-color-scheme-transition-duration')
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          document.documentElement.classList.remove('disable-color-scheme-transition-duration')
+        })
+      })
       if (val === '') {
         prefersColorScheme.addEventListener('change', updateTheme)
       }

src/ui/components/FaCopyright/index.vue

@@ -12,9 +12,9 @@ const settingsStore = useSettingsStore()
     <FaIcon name="i-ri:copyright-line" class="size-5" />
     <span v-if="settingsStore.settings.copyright.dates" class="px-1">{{ settingsStore.settings.copyright.dates }}</span>
     <template v-if="settingsStore.settings.copyright.company">
-      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener" class="px-1 text-center no-underline transition hover-text-secondary-foreground">{{ settingsStore.settings.copyright.company }}</a>
+      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener" class="px-1 text-center no-underline transition-colors hover-text-secondary-foreground">{{ settingsStore.settings.copyright.company }}</a>
       <span v-else class="px-1">{{ settingsStore.settings.copyright.company }}</span>
     </template>
-    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="px-1 text-center no-underline transition hover-text-secondary-foreground">{{ settingsStore.settings.copyright.beian }}</a>
+    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="px-1 text-center no-underline transition-colors hover-text-secondary-foreground">{{ settingsStore.settings.copyright.beian }}</a>
   </footer>
 </template>