perf: improve the dark theme

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -107,13 +107,11 @@ const asideRef = shallowRef<HTMLDivElement | null>();
 
 const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
 
-const isDark = computed(() => props.theme === 'dark');
-
 const style = computed((): CSSProperties => {
   const { isSidebarMixed, paddingTop, zIndex } = props;
 
   return {
-    '--scroll-shadow': isDark.value ? 'var(--menu-dark)' : 'var(--menu)',
+    '--scroll-shadow': 'var(--sidebar)',
     ...calcMenuWidthStyle(false),
     paddingTop: `${paddingTop}px`,
     zIndex,
@@ -124,12 +122,7 @@ const style = computed((): CSSProperties => {
 const extraStyle = computed((): CSSProperties => {
   const { extraWidth, show, width, zIndex } = props;
 
-  const backgroundColor = isDark.value
-    ? 'hsl(var(--menu-dark))'
-    : 'hsl(var(--menu))';
-
   return {
-    backgroundColor,
     left: `${width}px`,
     width: extraVisible.value && show ? `${extraWidth}px` : 0,
     zIndex,
@@ -175,7 +168,6 @@ const headerStyle = computed((): CSSProperties => {
 const extraContentStyle = computed((): CSSProperties => {
   const { collapseHeight, headerHeight } = props;
   return {
-    color: 'red',
     height: `calc(100% - ${headerHeight + collapseHeight}px)`,
   };
 });
@@ -203,21 +195,8 @@ function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
     widthValue = `${collapseWidth}px`;
   }
 
-  let backgroundColor = '';
-
-  if (isDark.value) {
-    backgroundColor = isSidebarMixed
-      ? 'hsl(var(--menu-dark-deep))'
-      : 'hsl(var(--menu-dark))';
-  } else {
-    backgroundColor = isSidebarMixed
-      ? 'hsl(var(--menu-deep))'
-      : 'hsl(var(--menu))';
-  }
-
   return {
     ...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
-    backgroundColor,
     flex: `0 0 ${widthValue}`,
     marginLeft: show ? 0 : `-${widthValue}`,
     maxWidth: widthValue,
@@ -252,20 +231,26 @@ function handleMouseleave() {
 <template>
   <div
     v-if="domVisible"
+    :class="theme"
     :style="hiddenSideStyle"
     class="h-full transition-all duration-200"
   ></div>
   <aside
-    :data-theme="theme"
+    :class="[
+      theme,
+      {
+        'bg-sidebar-deep': isSidebarMixed,
+        'bg-sidebar': !isSidebarMixed,
+      },
+    ]"
     :style="style"
-    class="data-[theme=dark]:border-border-dark border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
+    class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
     @mouseenter="handleMouseenter"
     @mouseleave="handleMouseleave"
   >
     <SidebarFixedButton
       v-if="!collapse && !isSidebarMixed"
       v-model:expand-on-hover="expandOnHover"
-      :theme="theme"
     />
     <div v-if="slots.logo" :style="headerStyle">
       <slot name="logo"></slot>
@@ -278,33 +263,28 @@ function handleMouseleave() {
     <SidebarCollapseButton
       v-if="showCollapseButton && !isSidebarMixed"
       v-model:collapsed="collapse"
-      :theme="theme"
     />
     <div
       v-if="isSidebarMixed"
       ref="asideRef"
-      :data-theme="theme"
       :style="extraStyle"
-      class="data-[theme=dark]:border-border-dark border-border fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
+      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
     >
       <SidebarCollapseButton
         v-if="isSidebarMixed && expandOnHover"
         v-model:collapsed="extraCollapse"
-        :theme="theme"
       />
 
       <SidebarFixedButton
         v-if="!extraCollapse"
         v-model:expand-on-hover="expandOnHover"
-        :theme="theme"
       />
       <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
         <slot name="extra-title"></slot>
       </div>
       <VbenScrollbar
-        :data-theme="theme"
         :style="extraContentStyle"
-        class="data-[theme=dark]:border-border-dark border-border border-t py-2"
+        class="border-border border-t py-2"
         shadow
       >
         <slot name="extra"></slot>

packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
 
-interface Props {
-  theme: string;
-}
-
-defineProps<Props>();
-
 const collapsed = defineModel<boolean>('collapsed');
 
 function handleCollapsed() {
@@ -16,8 +10,7 @@ function handleCollapsed() {
 
 <template>
   <div
-    :data-theme="theme"
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
     @click.stop="handleCollapsed"
   >
     <MdiMenuClose v-if="collapsed" />

packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { MdiPin, MdiPinOff } from '@vben-core/icons';
 
-interface Props {
-  theme: string;
-}
-
-defineProps<Props>();
-
 const expandOnHover = defineModel<boolean>('expandOnHover');
 
 function toggleFixed() {
@@ -16,8 +10,7 @@ function toggleFixed() {
 
 <template>
   <div
-    :data-theme="theme"
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
     @click="toggleFixed"
   >
     <MdiPinOff v-if="!expandOnHover" />