feat: support custom background colors for sidebar and header (#4151)

* feat: support custom background colors for sidebar and header

* fix: type error

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

@@ -47,15 +47,16 @@ const userStore = useUserStore();
 const { updateWatermark } = useWatermark();
 const lockStore = useLockStore();
 
-const headerMenuTheme = computed(() => {
-  return isDark.value ? 'dark' : 'light';
-});
-
 const sidebarTheme = computed(() => {
   const dark = isDark.value || preferences.theme.semiDarkMenu;
   return dark ? 'dark' : 'light';
 });
 
+const headerTheme = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkHeader;
+  return dark ? 'dark' : 'light';
+});
+
 const logoClass = computed(() => {
   const { collapsedShowTitle } = preferences.sidebar;
   const classes: string[] = [];
@@ -161,6 +162,7 @@ const headerSlots = computed(() => {
     :footer-fixed="preferences.footer.fixed"
     :header-hidden="preferences.header.hidden"
     :header-mode="preferences.header.mode"
+    :header-theme="headerTheme"
     :header-toggle-sidebar-button="preferences.widget.sidebarToggle"
     :header-visible="preferences.header.enable"
     :is-mobile="preferences.app.isMobile"
@@ -200,7 +202,7 @@ const headerSlots = computed(() => {
         :collapsed="logoCollapsed"
         :src="preferences.logo.source"
         :text="preferences.app.name"
-        :theme="showHeaderNav ? headerMenuTheme : theme"
+        :theme="showHeaderNav ? headerTheme : theme"
       />
     </template>
     <!-- 头部区域 -->
@@ -222,7 +224,7 @@ const headerSlots = computed(() => {
             :default-active="headerActive"
             :menus="wrapperMenus(headerMenus)"
             :rounded="isMenuRounded"
-            :theme="headerMenuTheme"
+            :theme="headerTheme"
             class="w-full"
             mode="horizontal"
             @select="handleMenuSelect"

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

@@ -13,9 +13,8 @@ defineOptions({
 });
 
 const modelValue = defineModel<string>({ default: 'auto' });
-const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu', {
-  default: true,
-});
+const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu');
+const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
 const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
   {
@@ -77,5 +76,8 @@ function nameView(name: string) {
     >
       {{ $t('preferences.theme.darkMenu') }}
     </SwitchItem>
+    <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
+      {{ $t('preferences.theme.darkHeader') }}
+    </SwitchItem>
   </div>
 </template>

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

@@ -74,6 +74,7 @@ const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
 const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu');
+const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
 const sidebarWidth = defineModel<number>('sidebarWidth');
@@ -274,6 +275,7 @@ async function handleReset() {
             <Block :title="$t('preferences.theme.title')">
               <Theme
                 v-model="themeMode"
+                v-model:theme-semi-dark-header="themeSemiDarkHeader"
                 v-model:theme-semi-dark-menu="themeSemiDarkMenu"
               />
             </Block>