1Panel/frontend/src/styles/element-dark.scss

html.dark {
    --el-fill-color-blank: rgb(49, 51, 51);
    --el-bg-color: rgb(36, 37, 37);
    --el-text-color-regular: #cfd3dc;
    --el-fill-color-light: rgb(49, 51, 51);
    --el-border-color: rgb(64, 67, 67);
    --el-bg-color-overlay: rgb(36, 37, 37);
    --el-border-color-light: rgb(64, 67, 67);
    // * menu
    --el-menu-bg-color: rgb(36, 37, 37) !important;
    --el-menu-item-bg-color: rgb(36, 37, 37);
    --el-menu-text-color: rgb(174, 166, 153);
    --el-menu-item-bg-color-active: rgb(44, 45, 46);

    // * panel-admin
    --panel-border: 1px solid rgb(64, 67, 67);
    --panel-main-bg-color: rgb(41, 43, 43);
    --panel-button-active: rgb(44, 45, 46);

    --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;
    .el-card {
        --el-card-border-color: rgb(64, 67, 67);
        --el-card-bg-color: rgb(36, 37, 37);
        color: rgb(174, 166, 153);
    }

    .el-table {
        --el-table-bg-color: rgb(36, 37, 37);
        --el-table-tr-bg-color: rgb(36, 37, 37);
        --el-table-header-bg-color: rgb(36, 37, 37);
        --el-table-border: var(--panel-border);
        --el-table-border-color: rgb(64, 67, 67);
    }

    .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: rgb(64, 67, 67);
    }

    // * wangEditor
    --w-e-textarea-bg-color: #1b1b1b;
    --w-e-textarea-color: #eeeeee;

    // * 以下为自定义暗黑模式内容
    // login
    // .login-container {
    //     background-color: var(--el-fill-color-extra-light) !important;
    //     .login-box {
    //         background-color: var(--el-mask-color) !important;
    //         .login-form {
    //             background-color: var(--el-bg-color) !important;
    //             box-shadow: var(--panel-login-shadow-light) !important;
    //             .logo-text {
    //                 color: var(--el-text-color-primary) !important;
    //             }
    //         }
    //     }
    // }

    // scroll-bar
    ::-webkit-scrollbar {
        background-color: var(--el-scrollbar-bg-color) !important;
    }
    ::-webkit-scrollbar-thumb {
        background-color: var(--el-border-color-darker);
    }
    // menu
    .menu-popper {
        border: 1px solid #66686c;
        .el-menu--popup-container {
            border: none;
        }
    }
    .el-menu {
        .el-menu-item {
            &:hover {
                background-color: var(--el-menu-item-bg-color-active);
            }
        }
    }
    .collapse {
        color: var(--el-menu-text-color);
        border: var(--panel-border);
    }

    // layout
    .el-container {
        .el-main {
            background-color: var(--panel-main-bg-color) !important;
        }
        .footer {
            background-color: var(--panel-main-bg-color) !important;
            border-top: var(--panel-border);
        }
    }
    .el-descriptions__body {
        background-color: rgb(36, 37, 37);
    }
    .system-label {
        color: var(--el-menu-text-color);
    }

    .router_card_button {
        .el-radio-button__inner {
            background: none;
        }
    }
    // content-box
    .content-box {
        .text {
            color: var(--el-text-color-regular) !important;
        }
    }

    .el-drawer .el-drawer__header span {
        color: var(--el-menu-text-color);
    }
    span {
        color: var(--el-menu-text-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: rgb(49, 51, 51);
    }
    .el-button--primary.is-plain.is-disabled {
        background: rgb(49, 51, 51);
        border-color: rgb(64, 67, 67);
    }
    .el-button.is-disabled {
        border-color: rgb(64, 67, 67);
    }
    .el-popper.is-dark {
        color: rgb(171 173 173);
    }
    .path {
        border: var(--panel-border);
    }
    input:-webkit-autofill {
        box-shadow: 0 0 0 1000px #323232 inset;
        -webkit-text-fill-color: #cfd3dc;
        transition: background-color 1000s ease-out 0.5s;
    }
}