Skip to content

Commit

Permalink
fix: 升级vxe-table版本 对应暗黑模式改为css变量模式
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuntian001
yuntian001 committed Aug 23, 2023
1 parent ebd6cec commit 0dfc3e0
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 8 deletions.
16 changes: 12 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"vue-i18n": "^9.1.10",
"vue-request": "^2.0.1",
"vue-router": "^4.1.1",
"vxe-table": "^4.3.5",
"vxe-table": "^4.5.5",
"vxe-table-plugin-element": "^3.0.6",
"xe-utils": "^3.5.7"
},
Expand Down
104 changes: 101 additions & 3 deletions src/components/meVxeTable/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,7 @@
background-color: rgba(163, 166, 173, 0.3);
}

//暗黑模式暂时只加上table相关，vxetable不支持css变量 只能写死，后续vxetable升级支持css变量后会更新一版完整的暗黑样式。
.dark {
html.dark {
/*font*/
$vxe-font-color: #cfd3dc !default;

Expand Down Expand Up @@ -151,5 +150,104 @@
$vxe-tooltip-validate-error-color: #fff !default;
$vxe-tooltip-validate-error-background-color: #f56c6c !default;

@import 'vxe-table/styles/index.scss';
//css变量---

/*font*/
--vxe-font-color: #{$vxe-font-color};

/*color*/
--vxe-primary-color: #{$vxe-primary-color};
--vxe-success-color: #{$vxe-success-color};
--vxe-info-color: #{$vxe-info-color};
--vxe-warning-color: #{$vxe-warning-color};
--vxe-danger-color: #{$vxe-danger-color};
--vxe-disabled-color: #{$vxe-disabled-color};
--vxe-primary-disabled-color: #{$vxe-primary-disabled-color};

/*input/radio/checkbox*/
--vxe-input-border-color: #{$vxe-input-border-color};
--vxe-input-disabled-color: #{$vxe-input-disabled-color};
--vxe-input-disabled-background-color: #{$vxe-input-disabled-background-color};
--vxe-input-placeholder-color: #{$vxe-input-placeholder-color};

/*table*/
--vxe-table-font-color: #{$vxe-table-font-color};
--vxe-table-header-font-color: #{$vxe-table-header-font-color};
--vxe-table-footer-font-color: #{$vxe-table-footer-font-color};
// --vxe-table-border-radius: #{$vxe-table-border-radius};
--vxe-table-border-width: #{$vxe-table-border-width};
--vxe-table-border-color: #{$vxe-table-border-color};
--vxe-table-resizable-line-color: #{$vxe-table-resizable-line-color};
--vxe-table-resizable-drag-line-color: #{$vxe-table-resizable-drag-line-color};
--vxe-table-header-background-color: #{$vxe-table-header-background-color};
--vxe-table-body-background-color: #{$vxe-table-body-background-color};
--vxe-table-footer-background-color: #{$vxe-table-footer-background-color};
--vxe-table-tree-node-line-color: #{$vxe-table-tree-node-line-color};
--vxe-table-tree-node-line-style: #{$vxe-table-tree-node-line-style};
--vxe-table-header-font-weight: #{$vxe-table-header-font-weight};

--vxe-table-row-height-default: #{$vxe-table-row-height-default};
--vxe-table-row-height-medium: #{$vxe-table-row-height-medium};
--vxe-table-row-height-small: #{$vxe-table-row-height-small};
--vxe-table-row-height-mini: #{$vxe-table-row-height-mini};
--vxe-table-row-line-height: #{$vxe-table-row-line-height};
--vxe-table-row-hover-background-color: #{$vxe-table-row-hover-background-color};
--vxe-table-row-striped-background-color: #{$vxe-table-row-striped-background-color};
--vxe-table-row-hover-striped-background-color: #{$vxe-table-row-hover-striped-background-color};
--vxe-table-row-radio-checked-background-color: #{$vxe-table-row-radio-checked-background-color};
--vxe-table-row-hover-radio-checked-background-color: #{$vxe-table-row-hover-radio-checked-background-color};
--vxe-table-row-checkbox-checked-background-color: #{$vxe-table-row-checkbox-checked-background-color};
--vxe-table-row-hover-checkbox-checked-background-color: #{$vxe-table-row-hover-checkbox-checked-background-color};
--vxe-table-row-current-background-color: #{$vxe-table-row-current-background-color};
--vxe-table-row-hover-current-background-color: #{$vxe-table-row-hover-current-background-color};

--vxe-table-column-padding-default: #{$vxe-table-column-padding-default};
--vxe-table-column-padding-medium: #{$vxe-table-column-padding-medium};
--vxe-table-column-padding-small: #{$vxe-table-column-padding-small};
--vxe-table-column-padding-mini: #{$vxe-table-column-padding-mini};
--vxe-table-column-hover-background-color: #{$vxe-table-column-hover-background-color};
--vxe-table-column-current-background-color: #{$vxe-table-column-current-background-color};
--vxe-table-column-icon-border-color: #{$vxe-table-column-icon-border-color};
--vxe-table-column-icon-border-hover-color: #{$vxe-table-column-icon-border-hover-color};

--vxe-table-cell-placeholder-color: #{$vxe-table-cell-placeholder-color};
--vxe-table-cell-padding-left: #{$vxe-table-cell-padding-left};
--vxe-table-cell-padding-right: #{$vxe-table-cell-padding-right};
--vxe-table-cell-input-height-default: #{$vxe-table-cell-input-height-default};
--vxe-table-cell-input-height-medium: #{$vxe-table-cell-input-height-medium};
--vxe-table-cell-input-height-small: #{$vxe-table-cell-input-height-small};
--vxe-table-cell-input-height-mini: #{$vxe-table-cell-input-height-mini};
--vxe-table-cell-dirty-width: #{$vxe-table-cell-dirty-width};
--vxe-table-cell-dirty-update-color: #{$vxe-table-cell-dirty-update-color};
--vxe-table-cell-dirty-insert-color: #{$vxe-table-cell-dirty-insert-color};
--vxe-table-cell-area-border-color: #{$vxe-table-cell-area-border-color};
--vxe-table-cell-area-border-width: #{$vxe-table-cell-area-border-width};
--vxe-table-cell-main-area-extension-border-color: #{$vxe-table-cell-main-area-extension-border-color};
--vxe-table-cell-main-area-extension-background-color: #{$vxe-table-cell-main-area-extension-background-color};
--vxe-table-cell-extend-area-border-width: #{$vxe-table-cell-extend-area-border-width};
--vxe-table-cell-copy-area-border-width: #{$vxe-table-cell-copy-area-border-width};
--vxe-table-cell-active-area-border-width: #{$vxe-table-cell-active-area-border-width};
--vxe-table-cell-copy-area-border-color: #{$vxe-table-cell-copy-area-border-color};
--vxe-table-cell-extend-area-border-color: #{$vxe-table-cell-extend-area-border-color};
--vxe-table-cell-active-area-border-color: #{$vxe-table-cell-active-area-border-color};
--vxe-table-cell-area-background-color: #{$vxe-table-cell-area-background-color};

--vxe-table-checkbox-range-border-width: #{$vxe-table-checkbox-range-border-width};
--vxe-table-checkbox-range-border-color: #{$vxe-table-checkbox-range-border-color};
--vxe-table-checkbox-range-background-color: #{$vxe-table-checkbox-range-background-color};

--vxe-table-fixed-left-scrolling-box-shadow: #{$vxe-table-fixed-left-scrolling-box-shadow};
--vxe-table-fixed-right-scrolling-box-shadow: #{$vxe-table-fixed-right-scrolling-box-shadow};

/*toolbar*/
--vxe-toolbar-background-color: #{$vxe-toolbar-background-color};
--vxe-toolbar-custom-active-background-color: #{$vxe-toolbar-custom-active-background-color};
--vxe-toolbar-panel-background-color: #{$vxe-toolbar-panel-background-color};

/*tooltip*/
--vxe-tooltip-dark-color: #{$vxe-tooltip-dark-color};
--vxe-tooltip-dark-background-color: #{$vxe-tooltip-dark-background-color};
--vxe-tooltip-light-background-color: #{$vxe-tooltip-light-background-color};
--vxe-tooltip-validate-error-color: #{$vxe-tooltip-validate-error-color};
--vxe-tooltip-validate-error-background-color: #{$vxe-tooltip-validate-error-background-color};
}

0 comments on commit 0dfc3e0

Please sign in to comment.