feat: vxe 暗黑模式

yudao-ui-admin-vue3/src/plugins/vxeTable/index.scss

@@ -1,6 +1,6 @@
 @import 'vxe-table/styles/variable.scss';
 @import 'vxe-table/styles/modules.scss';
-
+// @import './theme/light.scss';
 i {
   border-color: initial;
 }

yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts

@@ -1,8 +1,9 @@
-import { App, unref } from 'vue'
+import { App, unref, watch } from 'vue'
 import XEUtils from 'xe-utils'
 import './index.scss'
 import './renderer'
 import { i18n } from '@/plugins/vueI18n'
+import { useAppStore } from '@/store/modules/app'
 import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
 import enUS from 'vxe-table/lib/locale/lang/en-US'
 import {
@@ -45,6 +46,18 @@ import {
   Table
 } from 'vxe-table'
 
+const appStore = useAppStore()
+watch(
+  () => appStore.getIsDark,
+  () => {
+    if (appStore.getIsDark) {
+      import('./theme/dark.scss')
+    } else {
+      import('./theme/light.scss')
+    }
+  },
+  { immediate: true }
+)
 // 全局默认参数
 VXETable.setup({
   size: 'medium', // 全局尺寸

yudao-ui-admin-vue3/src/plugins/vxeTable/theme/dark.scss

@@ -0,0 +1,50 @@
+// 修改样式变量
+//@import 'vxe-table/styles/variable.scss';
+
+/*font*/
+$vxe-font-color: #e5e7eb;
+$vxe-font-size: 14px !default;
+$vxe-font-size-medium: 14px !default;
+$vxe-font-size-small: 13px !default;
+$vxe-font-size-mini: 12px !default;
+
+/*icon*/
+$vxe-icon-font-family: Verdana, Arial, Tahoma !default;
+$vxe-icon-background-color: #fff !default;
+
+$vxe-toolbar-background-color: #262626;
+$vxe-toolbar-button-border: #dcdfe6 !default;
+
+$vxe-table-font-color: #e5e7eb;
+$vxe-table-header-background-color: #262626;
+$vxe-table-body-background-color: #141414;
+$vxe-table-row-striped-background-color: #1d1d1d;
+$vxe-table-row-hover-background-color: #262626;
+$vxe-table-row-hover-striped-background-color: #1e1e1e;
+$vxe-table-footer-background-color: #141414;
+$vxe-table-row-current-background-color: #a7a3a3;
+$vxe-table-column-current-background-color: #a7a3a3;
+$vxe-table-column-hover-background-color: #a7a3a3;
+$vxe-table-row-hover-current-background-color: #a7a3a3;
+$vxe-table-menu-background-color: #262626;
+$vxe-table-border-width: 0px !default;
+$vxe-table-border-color: #dfe5f0 !default;
+
+$vxe-form-background-color: #141414;
+
+$vxe-pager-background-color: #262626;
+
+$vxe-input-background-color: #141414;
+$vxe-select-panel-background-color: #141414;
+$vxe-select-option-hover-background-color: #262626;
+
+/*button*/
+$vxe-button-default-background-color: #262626;
+$vxe-button-dropdown-panel-background-color: #141414;
+
+/*modal*/
+$vxe-modal-header-background-color: #141414;
+$vxe-modal-body-background-color: #141414;
+$vxe-modal-border-color: #3b3b3b;
+
+@import 'vxe-table/styles/index';

yudao-ui-admin-vue3/src/plugins/vxeTable/theme/light.scss

@@ -0,0 +1,24 @@
+// 修改样式变量
+
+//$vxe-font-color: #606266;
+
+//$vxe-table-header-background-color: #f8f8f9;
+//$vxe-toolbar-background-color:#262626;
+//$vxe-button-default-background-color:#262626;
+//$vxe-table-body-background-color: #151515;
+//$vxe-table-row-striped-background-color: #1d1d1d;
+//$vxe-table-row-hover-background-color: #262626;
+//$vxe-table-row-hover-striped-background-color: #1e1e1e;
+//$vxe-table-footer-background-color: #151515;
+//$vxe-table-row-current-background-color:	#8C8C8C;
+//$vxe-table-column-current-background-color:	#8C8C8C;
+//$vxe-table-column-hover-background-color:#8C8C8C;
+//$vxe-table-row-hover-current-background-color: #8C8C8C ;
+//$vxe-pager-background-color: #151515;
+//$vxe-table-menu-background-color: #262626;
+//
+//
+//$vxe-input-background-color: #151515;
+//$vxe-select-panel-background-color: #151515;
+//$vxe-select-option-hover-background-color: #262626;
+@import 'vxe-table/styles/index.scss';