前端皮肤功能实现（基于Less）

最新推荐文章于 2022-09-27 11:38:08 发布

vileman

最新推荐文章于 2022-09-27 11:38:08 发布

阅读量366

点赞数

分类专栏：前端皮肤文章标签： html css js vue less

本文链接：https://blog.csdn.net/vileman/article/details/114363223

版权

前端皮肤专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.核心思想

（1）在html根元素上设置theme属性（随意名字），切换主题就是切换属性值

（2）将公共的css提取出来，使用less的混入

2.具体代码

（1）html设置

<html lang="" theme="default">

（2）js控制切换主题

document.getElementsByTagName('html')[0].setAttribute('theme', themeData)

（3）less样式设置

.theme-function(@topImg, @linearGradient1, @linearGradient2){
    .view-main {
		.el-menu {
			background-color: rgb(60, 78, 90);

			.el-submenu__title {
				background-image: linear-gradient(@linearGradient1, @linearGradient2);
				color: #FFFFFF;

				& i {
					color: #FFFFFF;
				}
			}

			.submenu .el-submenu__title {
				background-color: rgb(60, 78, 90);
                background-image: none;
			}

			.submenu .el-submenu__title:hover,
			.submenu.is-opened .el-submenu__title,
			.submenu.is-active .el-submenu__title {
				background-color: rgb(45, 104, 144);
			}

			.el-menu-item,
			.el-icon-arrow-down:before {
				color: #FFFFFF;
				user-select: none;
			}

			.is-active,
			.el-menu-item:hover {
				background-color: rgb(216, 242, 255);
				color: rgb(0, 50, 77);
			}
		}

		&-top {
			background-image: @topImg;
		}

		&-bottom {
			&-left {
				background-color: rgb(60, 78, 90);
			}
			&-right {
				&-top {
					&-main {
						&>div {
							background-color: rgb(248, 248, 248);
						}
						.active-route span {
							color: rgb(39, 159, 220);
						}
					}
				}

				&-main {
					background-color: rgb(233, 233, 233);
					// &>div {
					// 	background-color: #FFFFFF;
					// }
				}

				&-bottom {
					background-color: #e9e9e9;
				}
			}
		}

	}

}

html[theme="default"] {
    .theme-function(url('../../assets/public/theme/icon_daohangtiao.png'),#43bdfa, #248acd);
}

html[theme="yellow"] {
    .theme-function(url('../../assets/public/theme/icon_daohangtiao2.png'),#d8fa43, #cdca24);
}

html[theme="green"] {
    .theme-function(url('../../assets/public/theme/icon_daohangtiao3.png'),#43fa4c, #32cd24);
}

vileman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端皮肤功能实现（基于Less）

1.核心思想（1）在html根元素上设置theme属性（随意名字），切换主题就是切换属性值（2）将公共的css提取出来，使用less的混入2.具体代码（1）html设置<html lang="" theme="default">（2）js控制切换主题document.getElementsByTagName('html')[0].setAttribute('theme', themeData)（3）less样式设置.theme-function(@.
复制链接

扫一扫

专栏目录