首頁 探索 說明
登入
Yumin
/
vue-vben-admin
镜像来自 https://github.com/vbenjs/vue-vben-admin.git
1
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

perf: improve the dark theme

vince 10 月之前
父節點
f95d9aa609
當前提交
cf16c7bdde
共有 12 個文件被更改，包括 123 次插入 和 198 次删除
分割檢視 顯示文件統計
  1. 5 5
      internal/tailwind-config/src/index.ts
  2. 3 2
      packages/@core/hooks/src/use-namespace.ts
  3. 6 9
      packages/@core/shared/constants/src/global.ts
  4. 58 16
      packages/@core/shared/design/src/design-tokens/dark/index.css
  5. 19 107
      packages/@core/shared/design/src/design-tokens/default/index.css
  6. 8 3
      packages/@core/shared/design/src/scss/base.scss
  7. 12 32
      packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
  8. 1 8
      packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
  9. 1 8
      packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
  10. 6 5
      packages/@core/ui-kit/menu-ui/src/components/menu.vue
  11. 2 1
      packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
  12. 2 2
      packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue

+ 5 - 5
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,

+ 3 - 2
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, '') : '';

+ 6 - 9
packages/@core/shared/constants/src/global.ts
查看文件 

@@ -1,15 +1,12 @@
 
-// --vben-content-client-height
 
-
 
 /**
 
- * @zh_CN CSS 变量前缀
 
- * @en_US CSS variable prefix
 
+ * @zh_CN 布局内容高度 css变量
 
+ * @en_US Layout content height
 
  */
 
-const CSS_VARIABLE_PREFIX = '--vben';
 
+const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;
 
 
 /**
 
- * @zh_CN 布局内容高度 css变量
 
- * @en_US Layout content height
 
+ * @zh_CN 默认命名空间
 
  */
 
-const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `${CSS_VARIABLE_PREFIX}-content-height`;
 
+const DEFAULT_NAMESPACE = 'vben';
 
 
-export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, CSS_VARIABLE_PREFIX };
 
+export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, DEFAULT_NAMESPACE };

+ 58 - 16
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%;
 
 }

+ 19 - 107
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%;
 
 }

+ 8 - 3
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;
 
 }

+ 12 - 32
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>

+ 1 - 8
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" />

+ 1 - 8
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" />

+ 6 - 5
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);
 
   }

+ 2 - 1
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));

+ 2 - 2
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>