pco/sp-admin/sa-frame/index/theme.css

/* 样式调整为继承父级 */
.nav-left .el-submenu__title i,
.nav-left .el-menu-item i,
.nav-right-1 .el-dropdown,
.tab-title:hover .el-icon-caret-right,
.tab-title.tab-native .el-icon-caret-right {
    color: inherit;
}

.el-menu,
.el-submenu,
.nav-left .el-submenu__title,
.nav-left .el-submenu .el-submenu .el-submenu__title,
.nav-left .el-menu-item {
    color: inherit;
    background-color: inherit;
}

.theme-0 .menu-name, .theme-0 .tab-title-2 > span {
    transition: none !important;
}


/* 声明变量 */
body {
    --menu-bg-color: #222; /* 菜单 - 背景色 */
    --menu-color: #FFF; /* 菜单 - 文字色 */
    --menu-bg-color-2: #000; /* 二级菜单 - 背景色 */
    --menu-hover-bg-color: #4E5465; /* 菜单悬浮 - 背景色 */
    --menu-active-bg-color: #2D8CF0; /* 菜单选中 - 背景色 */
    --menu-active-color: #FFF; /* 菜单选中 - 文字色 */
    --tool-bg-color: #FFF; /* 工具栏 - 背景色 */
    --tool-color: #333; /* 工具栏 - 文字色 */
    --tool-hover-bg-color: #EEE; /* 工具栏悬浮 - 背景色 */

    /* --tab-hover-bg-color: var(--menu-active-bg-color); */ /* Tab栏悬浮和选中 - 文字色 */
    /* --tab-hover-color: var(--menu-active-color); */ /* Tab栏悬浮和选中 - 文字色 */

    --nav-left-top-border-color: 1px #222 solid; /* 左上 - 右边框颜色 */
    --nav-left-bottom-border-color: 1px #222 solid; /* 左下 - 右边框颜色 */
}

/* ========================== 主题 - 0 默认样式 蓝色 ==========================  */
.theme-0 {
}

/* 左上 - 右边框颜色 */
.theme-0 .nav-left-top {
    border-right: var(--nav-left-top-border-color);
}

/* 左下 - 右边框颜色 */
.theme-0 .nav-left-bottom {
    border-right: var(--nav-left-bottom-border-color);
}

/* 左边栏背景色，前景色 */
.theme-0 .nav-left {
    background-color: var(--menu-bg-color);
    color: var(--menu-color);
}

/* 二级菜单背景色 */
.theme-0 .el-submenu .el-menu-item,
.theme-0 .nav-left .el-submenu .el-submenu .el-submenu__title {
    background: var(--menu-bg-color-2);
}

/* 所有菜单悬浮样式*/
.theme-0 .nav-left .el-submenu__title:hover,
.theme-0 .nav-left .el-submenu .el-submenu .el-submenu__title:hover,
.theme-0 .nav-left .el-menu-item:hover {
    background-color: var(--menu-hover-bg-color);
}

/* 所有菜单选中时 */
.theme-0 .nav-left .el-menu-item.is-active {
    /* background-color: var(--menu-active-bg-color); */
    background: var(--menu-active-bg-color);
    color: var(--menu-active-color);
}

/* 工具栏背景色颜色, 前景色 */
.theme-0 .nav-right-1 {
    color: var(--tool-color);
    background-color: var(--tool-bg-color);
}

/* 工具栏悬浮颜色 */
.theme-0 .tool-fox:hover {
    background-color: var(--tool-hover-bg-color);
}

/* tab卡片栏 - 悬浮颜色 */
.theme-0 .tab-title:hover {
    color: var(--menu-active-bg-color);
    border: 1px var(--menu-active-bg-color) solid;
}

/* tab卡片栏 - 选中颜色 */
.theme-0 .tab-native.tab-title {
    background-color: var(--menu-active-bg-color);
    color: var(--menu-active-color);
    border: 1px var(--menu-active-bg-color) solid;
}

/* 以下的主题 logo栏变小 */
.theme-3 .nav-left-top,
.theme-4 .nav-left-top,
.theme-10 .nav-left-top {
    height: 50px;
    line-height: 50px;
    text-indent: 0.3em;
}

.theme-3 .nav-left-top .admin-logo,
.theme-4 .nav-left-top .admin-logo,
.theme-10 .nav-left-top .admin-logo {
    width: 28px;
    height: 28px;
    position: relative;
    top: -2px;
}

.theme-3 .nav-left-bottom,
.theme-4 .nav-left-bottom,
.theme-10 .nav-left-bottom {
    height: calc(100% - 85px + 36px);
}


/* ========================== 主题-1 什么也不覆盖 即：全部取默认样式 ==========================  */
.theme-1 {
}

/* ========================== 主题-2 绿色 ==========================  */
.theme-2 {
    --menu-active-bg-color: #009688; /* 菜单选中 - 背景色 */
}

/* ========================== 主题-3 白色 清爽 ==========================  */
.theme-3 {
    --menu-bg-color: #FFF; /* 菜单 - 背景色 */
    --menu-color: #333; /* 菜单 - 文字色 */
    --menu-bg-color-2: #fafafa; /* 二级菜单 - 背景色 */
    --menu-hover-bg-color: #ECF5FF; /* 菜单悬浮 - 背景色 */
    --menu-active-bg-color: #ECF5FF; /* 菜单选中 - 背景色 */
    --menu-active-color: #409EFF; /* 菜单选中 - 文字色 */

    --nav-left-top-border-color: 1px #ddd solid; /* 左上 - 右边框颜色 */
    --nav-left-bottom-border-color: 1px #ddd solid; /* 左下 - 右边框颜色 */
}

/* ----- 附加样式 ----- */
/* logo下面的边框 */
.theme-3 .nav-left-top {
    border-bottom: 1px #eee solid;
}

/* tab卡片栏 - 悬浮颜色 */
.theme-3 .tab-title:hover {
    color: var(--menu-active-color);
    border: 1px var(--menu-active-color) solid;
}

/* tab卡片栏 - 选中颜色 */
.theme-3 .tab-native.tab-title {
    background-color: var(--menu-active-bg-color);
    color: var(--menu-active-color);
    border: 1px var(--menu-active-color) solid;
}


/* ========================== 主题-4 灰绿色 ==========================  */
.theme-4 {
    --menu-bg-color: #EEE; /* 菜单 - 背景色 */
    --menu-color: #333; /* 菜单 - 文字色 */
    --menu-bg-color-2: #DDD; /* 二级菜单 - 背景色 */
    --menu-hover-bg-color: #ECF5FF; /* 菜单悬浮 - 背景色 */
    --menu-active-bg-color: #009688; /* 菜单选中 - 背景色 */
    --menu-active-color: #FFF; /* 菜单选中 - 文字色 */
    --tool-bg-color: #222; /* 工具栏 - 背景色 */
    --tool-color: #EEE; /* 工具栏 - 文字色 */
    --tool-hover-bg-color: #444; /* 工具栏悬浮 - 背景色 */

    --nav-left-bottom-border-color: 1px #ddd solid; /* 左下 - 右边框颜色 */
}

.theme-4 .nav-left-top {
    height: 49px;
    line-height: 49px;
    text-indent: 0.3em;
    background-color: #222;
    color: #FFF;
}

/* ========================== 主题-5 红色 ==========================  */
.theme-5 {
    --menu-active-bg-color: #dd4949; /* 菜单选中 - 背景色 */
}

/* ========================== 主题-6 钛合金  ==========================  */
.theme-6 {
    --menu-active-bg-color: #805322; /* 菜单选中 - 背景色 */
    --tool-bg-color: #222; /* 工具栏 - 背景色 */
    --tool-color: #EEE; /* 工具栏 - 文字色 */
    --tool-hover-bg-color: #444; /* 工具栏悬浮 - 背景色 */
}

/* ========================== 主题-7 沉淀式黑蓝 ==========================  */
.theme-7 {
    --tool-bg-color: #222; /* 工具栏 - 背景色 */
    --tool-color: #EEE; /* 工具栏 - 文字色 */
    --tool-hover-bg-color: #444; /* 工具栏悬浮 - 背景色 */
}

/* ========================== 主题-8 简约式灰蓝 ==========================  */
.theme-8 {
    --menu-active-bg-color: #4E5465; /* 菜单选中 - 背景色 */
}

/* ========================== 主题-9 紫色 ==========================  */
.theme-9 {
    --menu-active-bg-color: #A906B3; /* 菜单选中 - 背景色 */
}

/* ========================== 主题-10 简约草绿 ==========================  */
.theme-10 {
    --menu-bg-color: #FFF; /* 菜单 - 背景色 */
    --menu-color: #333; /* 菜单 - 文字色 */
    --menu-bg-color-2: #fff; /* 二级菜单 - 背景色 */
    --menu-hover-bg-color: #ECF5FF; /* 菜单悬浮 - 背景色 */
    --menu-active-bg-color: #73D13D; /* 菜单选中 - 背景色 */

    --nav-left-top-border-color: 1px #fff solid; /* 左下 - 右边框颜色 */
    --nav-left-bottom-border-color: 1px #ddd solid; /* 左下 - 右边框颜色 */
}

/* logo下面的边框 */
.theme-10 .nav-left-top {
    border-bottom: 1px #eee solid;
}

/* tab卡片栏 - 悬浮颜色 */
.theme-10 .tab-title:hover {
    color: var(--menu-active-bg-color);
    border: 1px var(--menu-active-bg-color) solid;
}

/* tab卡片栏 - 选中颜色 */
.theme-10 .tab-native.tab-title {
    background-color: var(--menu-active-bg-color);
    color: var(--menu-active-color);
    border: 1px var(--menu-active-bg-color) solid;
}