chore: semiDarkMenu renamed semiDarkSidebar (#4152)

docs/src/guide/essentials/settings.md

@@ -261,7 +261,7 @@ const defaultPreferences: Preferences = {
     mode: 'dark',
     radius: '0.5',
     semiDarkHeader: false,
-    semiDarkMenu: true,
+    semiDarkSidebar: true,
   },
   transition: {
     enable: true,
@@ -456,7 +456,7 @@ interface ThemePreferences {
   /** 是否开启半深色header（只在theme='light'时生效） */
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
-  semiDarkMenu: boolean;
+  semiDarkSidebar: boolean;
 }
 
 interface TransitionPreferences {

packages/@core/preferences/src/config.ts

@@ -91,7 +91,7 @@ const defaultPreferences: Preferences = {
     mode: 'dark',
     radius: '0.5',
     semiDarkHeader: false,
-    semiDarkMenu: true,
+    semiDarkSidebar: true,
   },
   transition: {
     enable: true,

packages/@core/preferences/src/types.ts

@@ -186,7 +186,7 @@ interface ThemePreferences {
   /** 是否开启半深色header（只在theme='light'时生效） */
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
-  semiDarkMenu: boolean;
+  semiDarkSidebar: boolean;
 }
 
 interface TransitionPreferences {

packages/@core/ui-kit/menu-ui/src/components/menu.vue

@@ -498,13 +498,13 @@ $namespace: vben;
     --menu-background-color: transparent;
 
     &.is-dark {
-      --menu-item-hover-color: var(--foreground);
+      --menu-item-hover-color: hsl(var(--accent-foreground));
       --menu-item-hover-background-color: hsl(var(--accent));
-      --menu-item-active-color: hsl(var(--foreground));
+      --menu-item-active-color: hsl(var(--accent-foreground));
       --menu-item-active-background-color: hsl(var(--accent));
       --menu-submenu-active-color: hsl(var(--foreground));
       --menu-submenu-active-background-color: hsl(var(--accent));
-      --menu-submenu-hover-color: hsl(var(--foreground));
+      --menu-submenu-hover-color: hsl(var(--accent-foreground));
       --menu-submenu-hover-background-color: hsl(var(--accent));
     }
 

packages/effects/layouts/src/basic/layout.vue

@@ -48,7 +48,7 @@ const { updateWatermark } = useWatermark();
 const lockStore = useLockStore();
 
 const sidebarTheme = computed(() => {
-  const dark = isDark.value || preferences.theme.semiDarkMenu;
+  const dark = isDark.value || preferences.theme.semiDarkSidebar;
   return dark ? 'dark' : 'light';
 });
 

packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -13,7 +13,7 @@ defineOptions({
 });
 
 const modelValue = defineModel<string>({ default: 'auto' });
-const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu');
+const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
 const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
@@ -70,11 +70,11 @@ function nameView(name: string) {
     </template>
 
     <SwitchItem
-      v-model="themeSemiDarkMenu"
+      v-model="themeSemiDarkSidebar"
       :disabled="modelValue === 'dark'"
       class="mt-6"
     >
-      {{ $t('preferences.theme.darkMenu') }}
+      {{ $t('preferences.theme.darkSidebar') }}
     </SwitchItem>
     <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
       {{ $t('preferences.theme.darkHeader') }}

packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -73,7 +73,7 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
 const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
-const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu');
+const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
@@ -276,7 +276,7 @@ async function handleReset() {
               <Theme
                 v-model="themeMode"
                 v-model:theme-semi-dark-header="themeSemiDarkHeader"
-                v-model:theme-semi-dark-menu="themeSemiDarkMenu"
+                v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
               />
             </Block>
             <Block :title="$t('preferences.theme.builtin.title')">

packages/locales/src/langs/en-US.json

@@ -236,7 +236,7 @@
       "radius": "Radius",
       "light": "Light",
       "dark": "Dark",
-      "darkMenu": "Semi Dark Menu",
+      "darkSidebar": "Semi Dark Sidebar",
       "darkHeader": "Semi Dark Header",
       "weakMode": "Weak Mode",
       "grayMode": "Gray Mode",

packages/locales/src/langs/zh-CN.json

@@ -236,7 +236,7 @@
       "radius": "圆角",
       "light": "浅色",
       "dark": "深色",
-      "darkMenu": "深色菜单",
+      "darkSidebar": "深色侧边栏",
       "darkHeader": "深色顶栏",
       "weakMode": "色弱模式",
       "grayMode": "灰色模式",