perf: improve the dark theme

2024-07-15 23:59:22 +08:00 · 2024-07-15 23:59:22 +08:00 · cf16c7bdde
parent f95d9aa609
commit cf16c7bdde
12 changed files with 124 additions and 199 deletions
--- a/internal/tailwind-config/src/index.ts
+++ b/internal/tailwind-config/src/index.ts
@ -27,8 +27,6 @@ packages.forEach((pkg) => {
 const shadcnUiColors = {
  accent: {
    DEFAULT: 'hsl(var(--accent))',
-    dark: 'hsl(var(--accent-dark))',
-    'dark-hover': 'hsl(var(--accent-dark-hover))',
    foreground: 'hsl(var(--accent-foreground))',
    hover: 'hsl(var(--accent-hover))',
  },
@ -38,7 +36,6 @@ const shadcnUiColors = {
  },
  border: {
    DEFAULT: 'hsl(var(--border))',
-    dark: 'hsl(var(--border-dark))',
  },
  card: {
    DEFAULT: 'hsl(var(--card))',
@ -51,7 +48,6 @@ const shadcnUiColors = {

  foreground: {
    DEFAULT: 'hsl(var(--foreground))',
-    dark: 'hsl(var(--foreground-dark))',
  },

  input: {
@ -99,6 +95,10 @@ const customColors = {
    ...createColorsPalette('red'),
    foreground: 'hsl(var(--destructive-foreground))',
  },
+  sidebar: {
+    DEFAULT: 'hsl(var(--sidebar))',
+    deep: 'hsl(var(--sidebar-deep))',
+  },
  success: {
    ...createColorsPalette('success'),
    DEFAULT: 'hsl(var(--success))',
@ -120,7 +120,7 @@ export default {
      path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}'),
    ),
  ],
-  darkMode: 'class',
+  darkMode: 'selector',
  plugins: [
    animate,
    formsPlugin,
--- a/packages/@core/hooks/src/use-namespace.ts
+++ b/packages/@core/hooks/src/use-namespace.ts
@ -1,8 +1,9 @@
+import { DEFAULT_NAMESPACE } from '@vben-core/constants';
+
 /**
 * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts
 */

-export const defaultNamespace = 'vben';
 const statePrefix = 'is-';

 const _bem = (
@ -35,7 +36,7 @@ const is: {
 };

 const useNamespace = (block: string) => {
-  const namespace = defaultNamespace;
+  const namespace = DEFAULT_NAMESPACE;
  const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', '');
  const e = (element?: string) =>
    element ? _bem(namespace, block, '', element, '') : '';
--- a/packages/@core/shared/constants/src/global.ts
+++ b/packages/@core/shared/constants/src/global.ts
@ -1,15 +1,12 @@
-// --vben-content-client-height
-
-/**
- * @zh_CN CSS 变量前缀
- * @en_US CSS variable prefix
- */
-const CSS_VARIABLE_PREFIX = '--vben';
-
 /**
 * @zh_CN 布局内容高度 css变量
 * @en_US Layout content height
 */
-const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `${CSS_VARIABLE_PREFIX}-content-height`;
+const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;

-export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, CSS_VARIABLE_PREFIX };
+/**
+ * @zh_CN 默认命名空间
+ */
+const DEFAULT_NAMESPACE = 'vben';
+
+export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, DEFAULT_NAMESPACE };
--- a/packages/@core/shared/design/src/design-tokens/dark/index.css
+++ b/packages/@core/shared/design/src/design-tokens/dark/index.css
@ -1,6 +1,6 @@
-:root.dark,
-:root.dark[data-theme='custom'],
-:root.dark[data-theme='default'] {
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
  /* Default background color of <body />...etc */
  --background: 222.34deg 10.43% 12.27%;

@ -85,10 +85,14 @@

  /* =============component & UI============= */

+  --sidebar: 222.34deg 10.43% 12.27%;
+  --sidebar-deep: 220deg 13.06% 9%;
+
  color-scheme: dark;
 }

-:root.dark[data-theme='violet'] {
+.dark[data-theme='violet'],
+[data-theme='violet'] .dark {
  --background: 224 71.4% 4.1%;
  --background-content: var(--background);
  --foreground: 210 20% 98%;
@ -108,9 +112,12 @@
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 263.4 70% 50.4%;
+  --sidebar: 224 71.4% 4.1%;
+  --sidebar-deep: 224 71.4% 4.1%;
 }

-:root.dark[data-theme='pink'] {
+.dark[data-theme='pink'],
+[data-theme='pink'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 0 0% 95%;
@ -130,9 +137,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 346.8 77.2% 49.8%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='rose'] {
+.dark[data-theme='rose'],
+[data-theme='rose'] .dark {
  --background: 0 0% 3.9%;
  --background-content: var(--background);
  --foreground: 0 0% 98%;
@ -152,9 +162,12 @@
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 72.2% 50.6%;
+  --sidebar: 0 0% 3.9%;
+  --sidebar-deep: 0 0% 3.9%;
 }

-:root.dark[data-theme='sky-blue'] {
+.dark[data-theme='sky-blue'],
+[data-theme='sky-blue'] .dark {
  --background: 222.2 84% 4.9%;
  --background-content: var(--background);
  --foreground: 210 40% 98%;
@ -174,9 +187,12 @@
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
 }

-:root.dark[data-theme='deep-blue'] {
+.dark[data-theme='deep-blue'],
+[data-theme='deep-blue'] .dark {
  --background: 222.2 84% 4.9%;
  --background-content: var(--background);
  --foreground: 210 40% 98%;
@ -196,9 +212,12 @@
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
 }

-:root.dark[data-theme='green'] {
+.dark[data-theme='green'],
+[data-theme='green'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 0 0% 95%;
@ -218,9 +237,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='deep-green'] {
+.dark[data-theme='deep-green'],
+[data-theme='deep-green'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 0 0% 95%;
@ -240,9 +262,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='orange'] {
+.dark[data-theme='orange'],
+[data-theme='orange'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 60 9.1% 97.8%;
@ -262,9 +287,12 @@
  --border: 12 6.5% 15.1%;
  --input: 12 6.5% 15.1%;
  --ring: 20.5 90.2% 48.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='yellow'] {
+.dark[data-theme='yellow'],
+[data-theme='yellow'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 60 9.1% 97.8%;
@ -284,9 +312,12 @@
  --border: 12 6.5% 15.1%;
  --input: 12 6.5% 15.1%;
  --ring: 35.5 91.7% 32.9%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='zinc'] {
+.dark[data-theme='zinc'],
+[data-theme='zinc'] .dark {
  --background: 240 10% 3.9%;
  --background-content: var(--background);
  --foreground: 0 0% 98%;
@ -306,9 +337,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
+  --sidebar: 240 10% 3.9%;
+  --sidebar-deep: 240 10% 3.9%;
 }

-:root.dark[data-theme='neutral'] {
+.dark[data-theme='neutral'],
+[data-theme='neutral'] .dark {
  --background: 0 0% 3.9%;
  --background-content: var(--background);
  --foreground: 0 0% 98%;
@ -328,9 +362,12 @@
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
+  --sidebar: 0 0% 3.9%;
+  --sidebar-deep: 0 0% 3.9%;
 }

-:root.dark[data-theme='slate'] {
+.dark[data-theme='slate'],
+[data-theme='slate'] .dark {
  --background: 222.2 84% 4.9%;
  --background-content: var(--background);
  --foreground: 210 40% 98%;
@ -350,9 +387,12 @@
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
 }

-:root.dark[data-theme='gray'] {
+.dark[data-theme='gray'],
+[data-theme='gray'] .dark {
  --background: 224 71.4% 4.1%;
  --background-content: var(--background);
  --foreground: 210 20% 98%;
@ -372,4 +412,6 @@
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 216 12.2% 83.9%;
+  --sidebar: 224 71.4% 4.1%;
+  --sidebar-deep: 224 71.4% 4.1%;
 }
--- a/packages/@core/shared/design/src/design-tokens/default/index.css
+++ b/packages/@core/shared/design/src/design-tokens/default/index.css
@ -1,8 +1,8 @@
-/* https://gavin-yyc.github.io/colorconvert/ */
 :root {
-  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
-    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
+  --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
+    'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
+    'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
+    'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;

  /* Default background color of <body />...etc */
  --background: 0 0 100%;
@ -85,27 +85,17 @@
  /* 登录背景色 */
  --authentication: 231deg 61% 44%;

-  /* 用于浅色主题下一些暗色主题的颜色 */
-  --accent-dark-hover: 0deg 0% 100% / 12%;
-  --foreground-dark: 220 13% 91%;
-  --accent-dark: 0deg 0% 100% / 8%;
-  --border-dark: 240 3.7% 15.9%;
-
  /* =============component & UI============= */

  /* menu */
-  --menu: 0deg 0% 100%;
-  --menu-deep: 210 11.11% 96.47%;
-
-  /* menu-dark */
-  --menu-dark: 222.34deg 10.43% 12.27%;
-  --menu-dark-deep: 220deg 13.06% 9%;
+  --sidebar: 0 0% 100%;
+  --sidebar-deep: 210 11.11% 96.47%;

  accent-color: var(--primary);
  color-scheme: light;
 }

-:root[data-theme='violet'] {
+[data-theme='violet'] {
  /* --background: 0 0% 100%; */
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
@ -124,15 +114,9 @@
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 262.1 83.3% 57.8%;
-
-  /* menu-dark */
-  --menu-dark: 224 71.4% 4.1%;
-  --menu-dark-deep: 224 71.4% 4.1%;
-  --border-dark: 215 27.9% 16.9%;
-  --foreground-dark: 210 20% 98%;
 }

-:root[data-theme='pink'] {
+[data-theme='pink'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@ -151,15 +135,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 346.8 77.2% 49.8%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 95%;
 }

-:root[data-theme='rose'] {
+[data-theme='rose'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@ -178,15 +156,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 346.8 77.2% 49.8%;
-
-  /* menu-dark */
-  --menu-dark: 0 0% 3.9%;
-  --menu-dark-deep: 0 0% 3.9%;
-  --border-dark: 0 0% 14.9%;
-  --foreground-dark: 0 0% 98%;
 }

-:root[data-theme='sky-blue'] {
+[data-theme='sky-blue'] {
  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
@ -205,15 +177,9 @@
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
-
-  /* menu-dark */
-  --menu-dark: 222.2 84% 4.9%;
-  --menu-dark-deep: 222.2 84% 4.9%;
-  --border-dark: 217.2 32.6% 17.5%;
-  --foreground-dark: 210 40% 98%;
 }

-:root[data-theme='deep-blue'] {
+[data-theme='deep-blue'] {
  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
@ -232,15 +198,9 @@
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
-
-  /* menu-dark */
-  --menu-dark: 222.2 84% 4.9%;
-  --menu-dark-deep: 222.2 84% 4.9%;
-  --border-dark: 217.2 32.6% 17.5%;
-  --foreground-dark: 210 40% 98%;
 }

-:root[data-theme='green'] {
+[data-theme='green'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@ -259,15 +219,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 95%;
 }

-:root[data-theme='deep-green'] {
+[data-theme='deep-green'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@ -286,15 +240,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 95%;
 }

-:root[data-theme='orange'] {
+[data-theme='orange'] {
  /* --background: 0 0% 100%; */
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
@ -313,15 +261,9 @@
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 24.6 95% 53.1%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 12 6.5% 15.1%;
-  --foreground-dark: 60 9.1% 97.8%;
 }

-:root[data-theme='yellow'] {
+[data-theme='yellow'] {
  /* --background: 0 0% 100%; */
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
@ -340,15 +282,9 @@
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 20 14.3% 4.1%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 12 6.5% 15.1%;
-  --foreground-dark: 60 9.1% 97.8%;
 }

-:root[data-theme='zinc'] {
+[data-theme='zinc'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@ -367,15 +303,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
-
-  /* menu-dark */
-  --menu-dark: 240 10% 3.9%;
-  --menu-dark-deep: 240 10% 3.9%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 98%;
 }

-:root[data-theme='neutral'] {
+[data-theme='neutral'] {
  /* --background: 0 0% 100%; */
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
@ -394,15 +324,9 @@
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
-
-  /* menu-dark */
-  --menu-dark: 0 0% 3.9%;
-  --menu-dark-deep: 0 0% 3.9%;
-  --border-dark: 0 0% 14.9%;
-  --foreground-dark: 0 0% 98%;
 }

-:root[data-theme='slate'] {
+[data-theme='slate'] {
  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
@ -421,15 +345,9 @@
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
-
-  /* menu-dark */
-  --menu-dark: 222.2 84% 4.9%;
-  --menu-dark-deep: 222.2 84% 4.9%;
-  --border-dark: 217.2 32.6% 17.5%;
-  --foreground-dark: 210 40% 98%;
 }

-:root[data-theme='gray'] {
+[data-theme='gray'] {
  /* --background: 0 0% 100%; */
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
@ -448,10 +366,4 @@
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 224 71.4% 4.1%;
-
-  /* menu-dark */
-  --menu-dark: 224 71.4% 4.1%;
-  --menu-dark-deep: 224 71.4% 4.1%;
-  --border-dark: 215 27.9% 16.9%;
-  --foreground-dark: 210 20% 98%;
 }
--- a/packages/@core/shared/design/src/scss/base.scss
+++ b/packages/@core/shared/design/src/scss/base.scss
@ -27,8 +27,9 @@ html.grayscale-mode {
 html {
  @apply text-foreground bg-background;

-  // font-size: 62.5%;
+  font-size: 100%;
  font-variation-settings: normal;
+  line-height: 1.15;
  text-size-adjust: 100%;
  font-synthesis-weight: none;
  scroll-behavior: smooth;
@ -36,12 +37,16 @@ html {
  -webkit-tap-highlight-color: transparent;
 }

+body {
+  min-height: 100vh;
+}
+
 a,
 a:active,
 a:hover,
 a:link,
 a:visited {
-  // color: inherit;
+  /* color: inherit; */
  text-decoration: none;
 }

@ -69,7 +74,7 @@ html.dark::view-transition-new(root) {

 input::placeholder,
 textarea::placeholder {
-  // color: hsl(var(--color-input-placeholder)) !important;
+  /* color: hsl(var(--color-input-placeholder)) !important; */
  opacity: 1;
 }

--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/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>
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/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" />
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/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" />
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@ -322,6 +322,7 @@ function removeMenuItem(item: MenuItemRegistered) {
  <ul
    ref="menu"
    :class="[
+      theme,
      b(),
      is(mode, true),
      is(theme, true),
@ -427,7 +428,7 @@ $namespace: vben;
  --menu-item-padding-x: 12px;
  --menu-item-popup-padding-y: 20px;
  --menu-item-popup-padding-x: 12px;
-  --menu-item-margin-y: 4px;
+  --menu-item-margin-y: 3px;
  --menu-item-margin-x: 0px;
  --menu-item-collapse-padding-y: 25px;
  --menu-item-collapse-padding-x: 0px;
@ -443,14 +444,14 @@ $namespace: vben;
    --menu-background-color: hsl(var(--menu-dark));
    // --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
    --menu-item-background-color: var(--menu-background-color);
-    --menu-item-color: hsl(var(--foreground-dark) / 80%);
+    --menu-item-color: hsl(var(--foreground) / 80%);
    --menu-item-hover-color: hsl(var(--primary-foreground));
    --menu-item-hover-background-color: hsl(var(--menu-dark-background));
-    --menu-item-active-color: hsl(var(--foreground-dark));
+    --menu-item-active-color: hsl(var(--foreground));
    --menu-item-active-background-color: hsl(var(--menu-dark-background));
-    --menu-submenu-hover-color: hsl(var(--foreground-dark));
+    --menu-submenu-hover-color: hsl(var(--foreground));
    --menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
-    --menu-submenu-active-color: hsl(var(--foreground-dark));
+    --menu-submenu-active-color: hsl(var(--foreground));
    --menu-submenu-active-background-color: transparent;
    --menu-submenu-background-color: var(--menu-background-color);
  }
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@ -38,6 +38,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
 <template>
  <ul
    :class="[
+      theme,
      b(),
      is('collapse', collapse),
      is(theme, true),
@ -77,7 +78,7 @@ $namespace: vben;

  &.is-dark {
    .#{$namespace}-normal-menu__item {
-      color: hsl(var(--foreground-dark) / 80%);
+      color: hsl(var(--foreground) / 80%);

      &:not(.is-active):hover {
        color: hsl(var(--primary-foreground));
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@ -51,7 +51,7 @@ const logoClass = computed(() => {
 </script>

 <template>
-  <div :class="logoClass" class="group flex h-full items-center text-lg">
+  <div :class="logoClass" class="flex h-full items-center text-lg">
    <a
      :class="$attrs.class"
      :href="href"
@ -66,7 +66,7 @@ const logoClass = computed(() => {
      />
      <span
        v-if="!collapse"
-        class="text-primary group-[.dark]:text-foreground-dark truncate text-nowrap"
+        class="text-primary dark:text-foreground truncate text-nowrap"
      >
        {{ text }}
      </span>