فهرست منبع

perf(ConfigProvider): 配置antdv主题色, 使其与modifyVars配置一致 (#3219)

* perf(ConfigProvider): 配置antdv主题, 使其与modifyVars配置一致

* fix(dark): 修正颜色写法

* fix(dark): 修正app-content-background-color深色颜色

* style(BasicTable): row striped style add important

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
苗大 1 سال پیش
والد
کامیت
bb3d5b8ae8
3فایلهای تغییر یافته به همراه21 افزوده شده و 6 حذف شده
  1. 18 3
      src/App.vue
  2. 1 1
      src/components/Table/src/BasicTable.vue
  3. 2 2
      src/logics/theme/dark.ts

+ 18 - 3
src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
+  <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -7,19 +7,34 @@
 </template>
 
 <script lang="ts" setup>
-  import { ConfigProvider } from 'ant-design-vue';
   import { AppProvider } from '@/components/Application';
   import { useTitle } from '@/hooks/web/useTitle';
   import { useLocale } from '@/locales/useLocale';
+  import { ConfigProvider } from 'ant-design-vue';
 
-  import 'dayjs/locale/zh-cn';
   import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
+  import 'dayjs/locale/zh-cn';
+  import { computed } from 'vue';
 
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
   const { isDark, darkTheme } = useDarkModeTheme();
 
+  const themeConfig = computed(() =>
+    Object.assign(
+      {
+        token: {
+          colorPrimary: '#0960bd',
+          colorSuccess: '#55D187',
+          colorWarning: '#EFBD47',
+          colorError: '#ED6F6F',
+          colorInfo: '#0960bd',
+        },
+      },
+      isDark.value ? darkTheme : {},
+    ),
+  );
   // Listening to page changes and dynamically changing site titles
   useTitle();
 </script>

+ 1 - 1
src/components/Table/src/BasicTable.vue

@@ -379,7 +379,7 @@
 
     &-row__striped {
       td {
-        background-color: @app-content-background;
+        background-color: @app-content-background !important;
       }
     }
 

+ 2 - 2
src/logics/theme/dark.ts

@@ -14,7 +14,7 @@ export type CustomColorType = {
 export const customColorList: CustomColorType[] = [
   {
     name: '--text-color',
-    light: 'rgb(0,0,0,85%)',
+    light: 'rgba(0 0 0 85%)',
     dark: '#c9d1d9',
   },
   {
@@ -30,7 +30,7 @@ export const customColorList: CustomColorType[] = [
   {
     name: '--app-content-background-color',
     light: '#fafafa',
-    dark: '#151515',
+    dark: '#1e1e1e',
   },
   // custom example
   {