html.theme-default {
    --hc-theme-text-color: #1A1A1A;
    background-color: #F1F5F8;
    body, #app {
        background-color: #F1F5F8;
    }
    .hc-layout-box {
        .hc-layout-header {
            background: white;
            color: var(--hc-theme-text-color);
            .hc-layout-header-logo {
                background: #20222a;
                .logo-name {
                    color: hsla(0,0%,100%,.8);
                }
            }
            .header-content-bar .header-icon-bar {
                color: var(--hc-theme-text-color);
                &:hover {
                    color: var(--el-color-primary);
                }
            }
            .user-info-bar .user-name {
                color: var(--hc-theme-text-color);
            }
            .user-info-bar .arrow-icon {
                color: var(--hc-theme-text-color);
            }
        }
        .hc-layout-container .hc-layout-aside {
            background: #20222a;
            .el-menu {
                --el-menu-active-color: rgba(0,0,0,.8);
                --el-menu-text-color: hsla(0,0%,100%,.7) !important;
            }
            .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
                background-color: inherit;
            }
            .el-menu .el-menu-item.is-active {
                color: white;
                background-color: var(--el-menu-active-color);
                &::after {
                    background-color: var(--el-color-primary);
                }
            }
            .el-menu .el-sub-menu .el-sub-menu__title:hover, .el-menu .el-menu-item:not(.is-active):hover {
                color: white;
                background-color: rgba(0,0,0,.3);
            }
        }
        .hc-layout-container .hc-layout-main {
            .hc-router-menu-bar {
                border-top: 1px solid #f6f6f6;
            }
        }
    }
}
