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

* feat: support custom background colors for sidebar and header

* fix: type error

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

@@ -36,6 +36,10 @@ interface Props {
    * 侧边菜单宽度
    */
   sidebarWidth: number;
+  /**
+   * 主题
+   */
+  theme: string | undefined;
   /**
    * 宽度
    */
@@ -76,8 +80,9 @@ function handleToggleMenu() {
 
 <template>
   <header
+    :class="theme"
     :style="style"
-    class="border-border bg-background top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
+    class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
   >
     <div v-if="slots.logo" :style="logoStyle">
       <slot name="logo"></slot>

packages/@core/ui-kit/layout-ui/src/vben-layout.ts

@@ -72,6 +72,10 @@ interface VbenLayoutProps {
    * @default 'fixed'
    */
   headerMode?: LayoutHeaderModeType;
+  /**
+   * header 顶栏主题
+   */
+  headerTheme?: ThemeModeType;
   /**
    * 是否显示header切换侧边栏按钮
    * @default
@@ -127,7 +131,6 @@ interface VbenLayoutProps {
    * @default 80
    */
   sidebarMixedWidth?: number;
-
   /**
    * 侧边栏
    * @default dark

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -485,6 +485,7 @@ function handleOpenMenu() {
           :show="!isFullContent && !headerHidden"
           :show-toggle-btn="showHeaderToggleButton"
           :sidebar-width="sidebarWidth"
+          :theme="headerTheme"
           :width="mainStyle.width"
           :z-index="headerZIndex"
           @open-menu="handleOpenMenu"