html.dark { --el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important; --el-border-color-lighter: #1d2023; --el-fill-color-blank: #111417; --el-bg-color: rgba(0, 11, 21, 1); // --el-text-color-primary: #999999; --el-text-color-regular: #bbbfc4 !important; --el-fill-color-light: #111417; --el-border-color: #303438; --el-bg-color-overlay: rgba(0, 11, 21, 1); --el-border-color-light: #1d2023; // * menu --el-menu-bg-color: #111417 !important; --el-menu-item-bg-color: #111417; --el-menu-text-color: #ffffff; --el-menu-item-bg-color-active: rgb(44, 45, 46); // * panel-admin --panel-text-color: rgb(174, 166, 153); --panel-border: 1px solid #1d2023; --panel-border-color: #394c5e; --panel-main-bg-color: rgba(12, 12, 12, 1); --panel-button-active: var(--el-color-primary); --panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%); --panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%); --panel-popup-color: #060708; --panel-alert-bg: #2f3030; --panel-path-bg: #2f3030; --panel-button-disabled: #5a5a5a; .el-tag.el-tag--info { --el-tag-bg-color: rgb(49, 51, 51); --el-tag-border-color: rgb(64, 67, 67); } .el-tag.el-tag--light { --el-tag-bg-color: #111417; --el-tag-border-color: var(--el-color-primary); } .el-tag.el-tag--success { --el-tag-border-color: var(--el-color-success); } .el-tag.el-tag--danger { --el-tag-border-color: var(--el-color-danger); } .el-card { --el-card-bg-color: #111417; color: #ffffff; border: 1px solid var(--el-card-border-color) !important; } .el-table { --el-table-bg-color: rgba(0, 11, 21, 1); --el-table-tr-bg-color: rgba(0, 11, 21, 1); --el-table-header-bg-color: rgba(0, 11, 21, 1); --el-table-border: var(--panel-border); --el-table-border-color: rgb(64, 67, 67); } .el-message-box { --el-messagebox-title-color: var(--el-menu-text-color); border: 1px solid var(--panel-border-color); } .el-alert--info { --el-alert-bg-color: rgb(56, 59, 59); } .el-input { --el-input-bg-color: rgb(47 48 48); --el-input-border-color: #303438; } .el-pagination { --el-pagination-button-color: #999999; } .el-popover { --el-popover-title-text-color: #999999; border: 1px solid var(--panel-border-color); } // * wangEditor --w-e-textarea-bg-color: #1b1b1b; --w-e-textarea-color: #eeeeee; .md-editor-dark { --md-bk-color: #111417; } // * 以下为自定义暗黑模式内容 // login .login-container { .login-form { input:-webkit-autofill { box-shadow: 0 0 0 1000px #f1f4f9 inset; -webkit-text-fill-color: #333333; -webkit-transition: background-color 1000s ease-out 0.5s; transition: background-color 1000s ease-out 0.5s; } .el-input__wrapper { background-color: #ffffff; box-shadow: 0 0 0 1px #dcdfe6 inset; } .el-input__inner { color: #606266; } } } // scroll-bar ::-webkit-scrollbar { background-color: var(--el-scrollbar-bg-color) !important; } ::-webkit-scrollbar-thumb { background-color: var(--el-border-color-darker); } // sidebar .sidebar-container-popper { border: 1px solid #66686c; .el-menu--popup-container { border: none; } } .sidebar-container { border-right: 1px solid var(--el-border-color-light); } .el-menu { .el-menu-item { &:hover { background: rgba(37, 39, 44, 1); } &.is-active { background: var(--el-color-primary); color: #ffffff; &:hover { .el-icon { color: #ffffff !important; } span { color: #ffffff !important; } } &::before { background: #ffffff; } } } .el-sub-menu { .el-sub-menu__title { &:hover { background: rgba(37, 39, 44, 1); } } } } .menu-collapse { color: var(--el-menu-text-color); border: var(--panel-border); } // layout .app-wrapper { .main-container { background-color: var(--panel-main-bg-color) !important; } .app-footer { background-color: var(--panel-main-bg-color) !important; border-top: var(--panel-border); } .mobile-header { background-color: var(--panel-main-bg-color) !important; border-bottom: var(--panel-border); color: #ffffff; } } .system-label { color: var(--el-menu-text-color); } .router_card_button { .el-radio-button__inner { background: none !important; } .el-radio-button__original-radio:checked + .el-radio-button__inner { color: #ffffff; background-color: var(--panel-button-active) !important; box-shadow: none !important; border: none !important; } } // content-box .content-box { .text { color: var(--el-text-color-regular) !important; } } .el-drawer .el-drawer__header span { color: var(--el-menu-text-color); } .el-drawer { border-left: 0.5px solid var(--panel-border-color); } .el-input__wrapper { background-color: var(--el-disabled-bg-color); } .el-input.is-disabled .el-input__wrapper { box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset; } .el-radio-button__inner { background: #1d2023; } .el-button--primary.is-plain.is-disabled { background: #1d2023; border-color: #303438; } .el-button--primary.is-plain { background: #1d2023; border-color: #303438; } .el-button.is-link.is-disabled { color: var(--panel-button-disabled) !important; } .el-button.is-disabled { border-color: #303438; color: var(--panel-button-disabled); } .el-popper.is-dark { color: rgb(171 173 173); } .path { border: var(--panel-border); .split { color: #666666; } } input:-webkit-autofill { box-shadow: 0 0 0 1000px #323232 inset; -webkit-text-fill-color: #cfd3dc; transition: background-color 1000s ease-out 0.5s; } .el-avatar { --el-avatar-bg-color: #111417 !important; box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1); border: 0.5px solid #1f2022; } .el-page-header__content { color: rgb(174, 166, 153); } .el-dialog { .el-dialog__header { border-bottom: var(--panel-border); color: #999999; .el-dialog__title { color: var(--el-menu-text-color); } } border: 1px solid var(--panel-border-color); } .el-tabs__item { color: #999999; } .el-tabs__item.is-active { color: var(--el-color-primary) !important; } .el-descriptions__title { color: #999999; } .el-descriptions__content.el-descriptions__cell.is-bordered-content { color: #999999; } .terminal-tabs { background: none !important; .el-tabs__header { background: #000000; } } .el-pager { li { color: #999999; &.is-active { color: var(--el-pagination-hover-color); } } } .el-loading-mask { background-color: rgba(0, 0, 0, 0.8); } .h-app-card { .h-app-content { .h-app-title { color: #f2f8ff; } } } .infinite-list .infinite-list-item { background: #212426; &:hover { background: #212426; } } .el-alert--warning.is-light { background-color: rgb(56, 59, 59); color: var(--el-color-warning); } .el-dropdown-menu__item.is-disabled { color: var(--panel-button-disabled); } .el-date-editor .el-range-separator { color: var(--panel-button-disabled); } .el-input-group__append { border-left: 0; &:hover { color: var(--el-color-primary); background-color: var(--el-color-primary-light-9) !important; } background-color: #212426 !important; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset, -1px 0 0 0 var(--el-input-border-color) inset; } .el-collapse-item__header { color: #ffffff; } }