zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: vxe 暗黑模式

pull/2/head
xingyu4j 2022-11-23 18:05:36 +08:00
parent aae0b8c328
commit 0c6b448390
4 changed files with 89 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,8 +1,9 @@
import { App, unref } from 'vue' import { App, unref, watch } from 'vue'
import XEUtils from 'xe-utils' import XEUtils from 'xe-utils'
import './index.scss' import './index.scss'
import './renderer' import './renderer'
import { i18n } from '@/plugins/vueI18n' import { i18n } from '@/plugins/vueI18n'
import { useAppStore } from '@/store/modules/app'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN' import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
import enUS from 'vxe-table/lib/locale/lang/en-US' import enUS from 'vxe-table/lib/locale/lang/en-US'
import { import {
@ -45,6 +46,18 @@ import {
Table Table
} from 'vxe-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({ VXETable.setup({
size: 'medium', // 全局尺寸 size: 'medium', // 全局尺寸

50
yudao-ui-admin-vue3/src/plugins/vxeTable/theme/dark.scss Normal file
View File

@ -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';

24
yudao-ui-admin-vue3/src/plugins/vxeTable/theme/light.scss Normal file
View File

@ -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';