added dark mode

src/core/layouts/BasicHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <ALayoutHeader
-    theme="light"
+    :theme="menuTheme"
     :class="[prefixCls]"
-    :style="`height:${layoutStore.header.height};line-height:${layoutStore.header.height}`"
+    :style="`height:${layoutStore.header.height}`"
   >
     <!--    :style="`height:${layoutStore.header.height};line-height:${layoutStore.header.height}`"-->
     <div class="flex w-full min-w-0 items-center overflow-hidden">
@@ -26,8 +26,8 @@
         <ADropdown placement="bottomLeft" class="ml-5">
           <a class="ant-dropdown-link" @click.prevent>
             <!--            Hover me-->
-            <div class="flex items-center gap-1 text-gray-400">
-              <AAvatar :src="placeholderM" />
+            <div class="flex items-center gap-1 text-[var(--admin-text-secondary)]">
+              <AAvatar :src="placeholderM" class="header-avatar" />
               <Icon icon="vuesax-linear:arrow-down" size="15" />
             </div>
           </a>
@@ -40,6 +40,7 @@
                 </div>
               </AMenuItem>
               <AMenuDivider />
+              <ThemeMenuSection />
               <AMenuItem @click="myInfoVisible = true">
                 <div class="flex items-center gap-1">
                   <Icon icon="vuesax-linear:profile" size="18" />
@@ -164,11 +165,14 @@ import type { FormInstance } from 'ant-design-vue'
 import { cloneDeep } from 'lodash'
 import { useWindowSize } from '@vueuse/core'
 import {getConfigApp} from "@/utils/config";
+import ThemeMenuSection from '@core/components/ThemeMenuSection.vue'
+import { useAdminTheme } from '@core/composable/useAdminTheme'
 const { prefixCls } = usePrefix('basic-header')
 const layoutStore = useLayoutStore()
 const store = useStaticApiListsStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
+const { menuTheme } = useAdminTheme()
 
 
 const { width } = useWindowSize()
@@ -223,7 +227,11 @@ function handleShowSettings() {
 }
 
 function clearLocalStorage() {
+  const colorSchema = localStorage.getItem('color-schema')
   localStorage.clear()
+  if (colorSchema) {
+    localStorage.setItem('color-schema', colorSchema)
+  }
   location.reload()
 }
 </script>
@@ -232,16 +240,35 @@ function clearLocalStorage() {
 @prefix: ~'@{prefixCls}-basic-header';
 
 .@{prefix} {
-  padding: unset;
+  padding: 0 12px !important;
+  line-height: normal !important;
   overflow: hidden;
   max-width: 100%;
-  //height: unset;
-  //@apply flex flex-col justify-center ;
-  //height: 64px;
-  //line-height: unset;
-  border-bottom: 2px solid #eee;
-  // height: @header-height;
-  background-color: #fff;
-  //@apply backdrop-blur bg-red-200;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--admin-border);
+  background-color: var(--admin-bg-surface);
+
+  > .flex {
+    height: 100%;
+    align-items: center;
+  }
+
+  .header-avatar {
+    border: 2px solid var(--admin-border-strong);
+  }
+
+  .hr-tamin-base-button.ant-btn-text {
+    color: var(--admin-text-secondary);
+    background: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+
+    &:hover,
+    &:focus {
+      color: var(--admin-text);
+      background: var(--admin-bg-hover) !important;
+    }
+  }
 }
 </style>