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>
vbenjs · Nov 2, 2023 · bb3d5b8 · bb3d5b8
1 parent 3689bd1
commit bb3d5b8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,40 @@
 <template>
-  <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
+  <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
     <AppProvider>
       <RouterView />
     </AppProvider>
   </ConfigProvider>
 </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>
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
@@ -379,7 +379,7 @@
 
     &-row__striped {
       td {
-        background-color: @app-content-background;
+        background-color: @app-content-background !important;
       }
     }
 

diff --git a/src/logics/theme/dark.ts b/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
   {