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"

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

@@ -776,7 +776,7 @@ $namespace: vben;
   &.is-active {
     div[data-state='open'] > .#{$namespace}-sub-menu-content,
     > .#{$namespace}-sub-menu-content {
-      font-weight: 500;
+      // font-weight: 500;
       color: var(--menu-submenu-active-color);
       text-decoration: none;
       cursor: pointer;

packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared';
 
@@ -11,7 +11,7 @@ import {
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & HoverCardContentProps>(),
+  defineProps<{ class?: any } & HoverCardContentProps>(),
   {
     sideOffset: 4,
   },

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -109,7 +109,7 @@ function scrollIntoView() {
                 <!-- divider -->
                 <div
                   v-if="i !== 0 && tab.key !== active"
-                  class="tabs-chrome__divider bg-foreground/80 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
+                  class="tabs-chrome__divider bg-foreground/60 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
                 ></div>
                 <!-- background -->
                 <div