CSS自定义属性切换主题

作者：小小林熬夜学编程 | 2024-02-15 13:15:33

踩

html修改theme属性


<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			:root {
				--THEME: var(--USER-THEME, red);
				--THEME-COLOR: var(--USER-THEME-COLOR, green);
			}
			#main {
				width: 300px;
				height: 300px;
				background: var(--THEME);
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
			}
			
			.con {
				width: 100px;
				height: 100px;
				background: var(--THEME-COLOR);
			}
		</style>
	</head>
 
	<body>
		<div id="main">
			<div class="con"></div>
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("main").onclick = function() {
			const elm = document.documentElement
			const colorArr = ['blue', 'black']
			elm.style.setProperty('--USER-THEME', colorArr[0]);
			elm.style.setProperty('--USER-THEME-COLOR', colorArr[1]);
		}
	</script>
 
</html>
复制代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/84786