added dark mode

src/components/BaseCollapse.vue

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {})
 .open {
   width: 100%;
   height: 1px;
-  background-color: #E5E7EB;
+  background-color: var(--admin-border-strong);
 }
 
 .rotate {
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {})
 .ant-collapse > .ant-collapse-item > .ant-collapse-header {
   direction: rtl !important;
   justify-content: space-between !important;
-  background-color: #fff !important;
+  background-color: var(--admin-bg-surface) !important;
   font-weight: bold;
 }
 

src/components/BasicActionSheet.vue

@@ -206,8 +206,8 @@ function handleCancel() {
   position: sticky;
   bottom: 0;
   z-index: 2;
-  background: #fff;
+  background: var(--admin-bg-elevated);
   padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--admin-border);
 }
 </style>

src/components/BasicInfoModal/index.vue

@@ -29,7 +29,7 @@
     footer
   >
     <div class="overflow-y-auto max-h-[70vh] mt-10">
-      <div :class="[prefixCls]" class="bg-blue-50 rounded flex justify-between p-3">
+      <div :class="[prefixCls]" class="admin-stat-muted rounded flex justify-between p-3">
         <div>
           <div class="font-bold">{{ props.name }}</div>
           <div class="text-primary-type mt-1">{{ props.type }}</div>
@@ -40,15 +40,15 @@
         </div>
       </div>
     </div>
-    <div class="bg-[#CACED8] w-full h-[1px] my-8" />
-    <div class="text-[#949DB0]">{{ props.itemsTitle }}</div>
+    <div class="my-8 h-px w-full bg-[var(--admin-border)]" />
+    <div class="text-[var(--admin-text-secondary)]">{{ props.itemsTitle }}</div>
     <div class="grid md:grid-cols-4 mt-5 gap-5 p-5">
       <div v-for="val in props.items">
-        <div class="text-[#949DB0]">{{ val.key }}</div>
+        <div class="text-[var(--admin-text-secondary)]">{{ val.key }}</div>
         <div class="font-bold">{{ val.value }}</div>
       </div>
       <div class="md:col-span-5" v-if="props.description">
-        <div class="text-[#949DB0]">توضیحات</div>
+        <div class="text-[var(--admin-text-secondary)]">توضیحات</div>
         <div class="font-bold">{{ props.description ?? '-' }}</div>
       </div>
     </div>

src/components/BasicMenu/index.vue

@@ -4,7 +4,7 @@
       v-model:selectedKeys="selectedKeys"
       :style="{ width: props.width }"
       :mode="props.mode"
-      :theme="props.theme"
+      :theme="resolvedTheme"
     >
       <BasicMenuItem :menu="props.menu" />
     </AMenu>
@@ -17,6 +17,9 @@ import { defineProps } from 'vue'
 //import Icon from '@core/components/BaseIcon/src/Icon.vue'
 import BasicMenuItem from '@/components/BasicMenu/components/BasicMenuItem.vue'
 import type { RouteRecordRaw } from 'vue-router'
+import { useAdminTheme } from '@core/composable/useAdminTheme'
+
+const { menuTheme } = useAdminTheme()
 
 const selectedKeys = ref<string[]>([])
 const router = useRouter()
@@ -39,11 +42,13 @@ interface Prop {
   theme?: MenuTheme
   width?: string
 }
+
 const props = withDefaults(defineProps<Prop>(), {
   mode: 'inline',
-  theme: 'light',
   width: '20rem'
 })
+
+const resolvedTheme = computed(() => props.theme ?? menuTheme.value)
 onMounted(() => {
   selectedKeys.value = [router.currentRoute.value.name as string]
   //emits('onChange', '1')

src/components/BasicMobileBottomNav.vue

@@ -104,9 +104,9 @@ function navigateTo(item: RouteRecordRaw) {
   justify-content: space-around;
   gap: 4px;
   padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
-  background: #fff;
-  border-top: 1px solid #f0f0f0;
-  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
+  background: var(--admin-bg-surface);
+  border-top: 1px solid var(--admin-border);
+  box-shadow: 0 -2px 12px var(--admin-shadow);
 }
 
 .mobile-bottom-nav__item {
@@ -122,14 +122,14 @@ function navigateTo(item: RouteRecordRaw) {
   background: transparent;
   cursor: pointer;
   position: relative;
-  color: #595959;
+  color: var(--admin-text-secondary);
 
   &--active {
-    color: #1677ff;
+    color: var(--admin-menu-selected-text);
 
     .mobile-bottom-nav__icon-wrap {
-      background: #e6f4ff;
-      color: #1677ff;
+      background: var(--admin-menu-selected);
+      color: var(--admin-menu-selected-text);
     }
 
     &::after {
@@ -141,7 +141,7 @@ function navigateTo(item: RouteRecordRaw) {
       width: 28px;
       height: 3px;
       border-radius: 3px 3px 0 0;
-      background: #1677ff;
+      background: var(--admin-menu-selected-text);
     }
   }
 
@@ -157,7 +157,7 @@ function navigateTo(item: RouteRecordRaw) {
   width: 40px;
   height: 32px;
   border-radius: 10px;
-  color: #292d32;
+  color: var(--admin-text-muted);
 
   :deep(svg path) {
     stroke: currentColor;

src/components/BasicMobileHeader.vue

@@ -22,6 +22,7 @@
                 </div>
               </AMenuItem>
               <AMenuDivider />
+              <ThemeMenuSection />
               <AMenuItem @click="myInfoVisible = true">
                 <div class="flex items-center gap-1">
                   <Icon icon="vuesax-linear:profile" size="18" />
@@ -80,6 +81,7 @@ import { message } from 'ant-design-vue/es'
 import { onMounted, ref, computed } from 'vue'
 import type { FormInstance } from 'ant-design-vue'
 import { cloneDeep } from 'lodash'
+import ThemeMenuSection from '@core/components/ThemeMenuSection.vue'
 
 const { prefixCls } = usePrefix('basic-header')
 const userStore = useUserStore()
@@ -129,7 +131,11 @@ async function ok() {
 }
 
 function clearLocalStorage() {
+  const colorSchema = localStorage.getItem('color-schema')
   localStorage.clear()
+  if (colorSchema) {
+    localStorage.setItem('color-schema', colorSchema)
+  }
   location.reload()
 }
 
@@ -142,9 +148,9 @@ function handleRefresh() {
 @prefix: ~'@{prefixCls}-basic-header';
 
 .@{prefix} {
-  padding: 12px 16px;
-  background-color: #f5f5f5;
-  border-bottom: none;
+  padding: 0;
+  background-color: var(--admin-bg-surface);
+  border-bottom: 1px solid var(--admin-border);
 }
 
 .mobile-header-bar {
@@ -153,17 +159,18 @@ function handleRefresh() {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 12px 16px;
-  background: #fff;
-  border: 1px solid #e8e8e8;
-  border-radius: 16px;
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--admin-bg-surface);
+  border: none;
+  border-radius: 0;
 }
 
 .mobile-header-bar__name {
   max-width: 34%;
   font-size: 15px;
   font-weight: 600;
-  color: #1f1f1f;
+  color: var(--admin-text);
   line-height: 1.4;
   white-space: nowrap;
   overflow: hidden;
@@ -195,7 +202,7 @@ function handleRefresh() {
   padding: 0;
   border: none;
   background: transparent;
-  color: #292d32;
+  color: var(--admin-text);
   cursor: pointer;
   line-height: 0;
 
@@ -203,4 +210,17 @@ function handleRefresh() {
     opacity: 0.7;
   }
 }
+
+:deep(.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>

src/components/BasicMobileOverflowMenu.vue

@@ -92,11 +92,11 @@ function handleSelect(item: RouteRecordRaw) {
 }
 
 .mobile-overflow-menu__trigger--active {
-  color: #1677ff;
+  color: var(--admin-menu-selected-text);
 
   .mobile-overflow-menu__icon-wrap {
-    background: #e6f4ff;
-    color: #1677ff;
+    background: var(--admin-menu-selected);
+    color: var(--admin-menu-selected-text);
   }
 
   &::after {
@@ -108,7 +108,7 @@ function handleSelect(item: RouteRecordRaw) {
     width: 28px;
     height: 3px;
     border-radius: 3px 3px 0 0;
-    background: #1677ff;
+    background: var(--admin-menu-selected-text);
   }
 }
 

src/components/BasicShowContext.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex h-full min-h-0 min-w-0 w-full max-w-full flex-col overflow-hidden py-2 pr-3">
     <div class="flex shrink-0 min-w-0 items-center justify-between gap-2">
-      <div class="truncate text-black font-bold">{{ props.title }}</div>
+      <div class="truncate font-bold text-[var(--admin-text)]">{{ props.title }}</div>
       <slot name="extra" />
     </div>
     <div class="mt-2 min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-1">

src/components/mobile/MobileCard.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="rounded-2xl border border-gray-200 bg-white shadow-sm"
+    class="rounded-2xl border-base surface shadow-sm"
     :class="[paddingClass, clickable ? 'cursor-pointer' : '']"
     @click="clickable ? $emit('click') : undefined"
   >