web系统主题功能

最新推荐文章于 2024-08-25 10:33:27 发布

原创最新推荐文章于 2024-08-25 10:33:27 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种使用JavaScript和CSS变量来动态改变网页主题颜色和表格字体大小的方法。通过读取本地存储的主题设置，该方法可以灵活地切换不同的颜色方案和尺寸风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

1.js

代码如下（示例）：

window.onload = function () {
var themeColorSet = localStorage.getItem('themeColorSet'),
themeSizeSet = localStorage.getItem('themeSizeSet');
switch (themeColorSet) {
case 'blue':
document.body.style.setProperty('--themeColor', '#409EFF');
document.body.style.setProperty('--themeSecondColor', '#66b1ff');
document.body.style.setProperty('--themeThirdColor', '#b3d8ff');
document.body.style.setProperty('--themeFourthColor', '#ecf5ff');
document.body.style.setProperty('--themeDisabledColor', '#a0cfff');
document.body.style.setProperty('--themeHeaderColor', '#2B7DE1');
break;
case 'red':
document.body.style.setProperty('--themeColor', '#F56C6C');
document.body.style.setProperty('--themeSecondColor', '#f78989');
document.body.style.setProperty('--themeThirdColor', '#fbc4c4');
document.body.style.setProperty('--themeFourthColor', '#fef0f0');
document.body.style.setProperty('--themeDisabledColor', '#fab6b6');
document.body.style.setProperty('--themeHeaderColor', '#F56C6C');
break;
case 'orange':
document.body.style.setProperty('--themeColor', '#e6a23c');
document.body.style.setProperty('--themeSecondColor', '#ebb563');
document.body.style.setProperty('--themeThirdColor', '#f5dab1');
document.body.style.setProperty('--themeFourthColor', '#fdf6ec');
document.body.style.setProperty('--themeDisabledColor', '#f3d19e');
document.body.style.setProperty('--themeHeaderColor', '#e6a23c');
break;
case 'green':
document.body.style.setProperty('--themeColor', '#67c23a');
document.body.style.setProperty('--themeSecondColor', '#85ce61');
document.body.style.setProperty('--themeThirdColor', '#c2e7b0');
document.body.style.setProperty('--themeFourthColor', '#f0f9eb');
document.body.style.setProperty('--themeDisabledColor', '#b3e19d');
document.body.style.setProperty('--themeHeaderColor', '#67c23a');
break;
case 'grey':
document.body.style.setProperty('--themeColor', '#909399');
document.body.style.setProperty('--themeSecondColor', '#a6a9ad');
document.body.style.setProperty('--themeThirdColor', '#d3d4d6');
document.body.style.setProperty('--themeFourthColor', '#f4f4f5');
document.body.style.setProperty('--themeDisabledColor', '#c8c9cc');
document.body.style.setProperty('--themeHeaderColor', '#909399');
break;
}
switch (themeSizeSet) {
case 'default':
document.body.style.setProperty('--themeTableSize', '14px');
break;
case 'mini':
document.body.style.setProperty('--themeTableSize', '12px');
break;
case 'medium':
document.body.style.setProperty('--themeTableSize', '16px');
break;
case 'large':
document.body.style.setProperty('--themeTableSize', '18px');
break;
}
}
body {
--themeColor: #409EFF;
--themeSecondColor: #66b1ff;
--themeThirdColor: #c6e2ff;
--themeFourthColor: #ecf5ff;
--themeDisabledColor: #a0cfff;
--themeHeaderColor: #2B7DE1;
--themeTableSize: 14px;
}


.el-table {
font-size: var(--themeTableSize);
}


.el-menu-item.is-active, .el-tabs__item.is-active, .el-tabs__item:hover, .el-button--text, .el-link.el-link--primary, .el-date-table td.today span, .el-date-table td.available:hover, .el-date-picker__header-label.active, .el-date-picker__header-label:hover, .el-picker-panel__icon-btn:hover, .el-select-dropdown__item.selected, .el-month-table td .cell:hover, .el-month-table td.today .cell, .el-month-table td.current:not(.disabled) .cell, .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close, .el-pager li.active, .el-pager li:hover, .el-pagination button:hover {
color: var(--themeColor);
}

.el-checkbox__inner:hover, body .el-input.is-active .el-input__inner, body .el-input__inner:focus, body .el-select .el-input__inner:focus, body .el-select .el-input.is-focus .el-input__inner, .el-textarea__inner:focus, .el-pagination__sizes .el-input .el-input__inner:hover {
border-color: var(--themeColor);
}

.main .el-header, .divStyle .pStyle {
background-color: var(--themeHeaderColor);
}

.el-button--primary, .el-date-table td.current:not(.disabled) span, .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: var(--themeColor);
border-color: var(--themeColor);
}

.el-button--primary:focus, .el-button--primary:hover {
background-color: var(--themeSecondColor);
border-color: var(--themeSecondColor);
}

.el-button--text:focus, .el-button--text:hover, .el-link.el-link--primary:hover {
color: var(--themeSecondColor);
}

.el-table--enable-row-hover .el-table__body tr:hover > td, .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td, .el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.el-table__row--striped.current-row > td, .el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row > td, .el-menu-item:focus, .el-menu-item:hover, .el-select-dropdown__item.hover, .el-select-dropdown__item:hover, .el-submenu__title:hover {
background-color: var(--themeFourthColor);
}


.el-button--default.el-button:hover, .el-button--default.el-button:focus, .el-tag {
color: var(--themeColor);
border-color: var(--themeThirdColor);
background-color: var(--themeFourthColor);
}


.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
background-color: var(--themeDisabledColor);
border-color: var(--themeDisabledColor);
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover, body .menu-right ul li:hover, body .user-set .user-set-list li:hover, body .user-set .user-set-list li.isActive, .el-container .dropdown-opt .dropdown-opt-item:hover {
color: var(--themeSecondColor);
background-color: var(--themeFourthColor);
}