158 lines
3.1 KiB
SCSS
158 lines
3.1 KiB
SCSS
// $--colors: (
|
|
// "primary": (
|
|
// "base": #589ef8,
|
|
// ),
|
|
// );
|
|
|
|
// @forward "element-plus/theme-chalk/src/dark/var.scss" with (
|
|
// $colors: $--colors
|
|
// );
|
|
/** element内置黑暗主题 */
|
|
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
|
|
|
|
/** 自定义黑暗主题 */
|
|
html.dark {
|
|
// * admin
|
|
--bg-color: #000;
|
|
--main-bg-color: #181818;
|
|
--v-border-light: 1px solid #4c4c4d;
|
|
|
|
body {
|
|
background-color: var(--bg-color) !important;
|
|
}
|
|
|
|
.login_container {
|
|
// background: rgba(171, 181, 196, 0.3);
|
|
.login_box {
|
|
background-color: var(--main-bg-color) !important;
|
|
}
|
|
}
|
|
|
|
.top_bar_container {
|
|
background-color: var(--main-bg-color) !important;
|
|
}
|
|
|
|
.router_box {
|
|
background-color: var(--main-bg-color) !important;
|
|
}
|
|
|
|
.aside_container {
|
|
background-color: var(--main-bg-color) !important;
|
|
}
|
|
|
|
.terminal_top {
|
|
border-bottom: 1px solid #454242;
|
|
}
|
|
.sftp_tab_container {
|
|
background-color: var(--main-bg-color) !important;
|
|
.dir-list {
|
|
.active {
|
|
background-color: #454242 !important;
|
|
}
|
|
li:hover {
|
|
background-color: #454242 !important;
|
|
}
|
|
}
|
|
}
|
|
.info_box {
|
|
border-right: 1px solid #454242;
|
|
.el-progress-bar__innerText {
|
|
span {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// scroll-bar
|
|
::-webkit-scrollbar {
|
|
background-color: var(--el-scrollbar-bg-color) !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--el-border-color-darker) !important;
|
|
}
|
|
|
|
.layout-sidebar-container {
|
|
background-color: var(--bg-color) !important;
|
|
}
|
|
|
|
.app-main-container {
|
|
background-color: var(--main-bg-color) !important;
|
|
|
|
.card {
|
|
background-color: var(--bg-color) !important;
|
|
}
|
|
}
|
|
|
|
.layout-footer-container {
|
|
color: var(--el-text-color-regular) !important;
|
|
background-color: var(--main-bg-color) !important;
|
|
}
|
|
|
|
.fold-unfold {
|
|
color: #fff !important;
|
|
}
|
|
|
|
// .el-menu,
|
|
// .el-sub-menu,
|
|
// .el-menu-item,
|
|
// .el-sub-menu__title {
|
|
// background-color: var(--bg-color) !important;
|
|
|
|
// &:not(.is-active) {
|
|
// color: #bdbdc0 !important;
|
|
// }
|
|
|
|
// &.is-active {
|
|
// color: #fff !important;
|
|
// background-color: #000 !important;
|
|
// }
|
|
// }
|
|
|
|
.el-menu-item:not(.is-active):hover {
|
|
color: var(--el-menu-active-color);
|
|
}
|
|
|
|
.nav-bar-container {
|
|
background-color: var(--bg-color) !important;
|
|
}
|
|
|
|
.table-header {
|
|
.el-icon {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.tabs-bar-container {
|
|
background-color: var(--bg-color) !important;
|
|
border-top: 1px solid var(--el-border-color-light) !important;
|
|
|
|
.tabs-action {
|
|
.el-icon {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
.fold-unfold {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-tabs__item.is-active {
|
|
color: var(--el-color-primary);
|
|
background-color: var(--main-bg-color) !important;
|
|
|
|
.el-icon {
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
}
|
|
|
|
.el-tabs__item:not(.is_active):hover {
|
|
background-color: var(--main-bg-color) !important;
|
|
|
|
.el-icon {
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|