使用:root和var实现网站主题色切换

六月初六月初 CSS 2021-01-29 22:38:59

网站主题色切换使用css3特性实现操作及介绍。本文就结合CSS3特性:root和var来实现我们常见的网站主题色切换。

完整代码如下：

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
		<style>
			:root{
				--bg-color:#039885;
			}
			:root[theme='dark']{
				--bg-color:#535353;
			}
			html{
				background-color: var(--bg-color);
			}
		</style>
	</head>
	<body>
		<button type="button">切换背景色</button>
		<script>
			$(function(){
				$("button").click(function(){
					$('html').attr('theme','dark')
				})
			})
		</script>
	</body>
</html>

实现效果流程解析：

1、通过使用:root选择器来定义，我们切换主题色需要用到颜色值。

CSS变量声明是字母前加两个横线（--）

2、使用var()函数来调用在:root中声明的主题色变量。

在具体的css使用时通过var(--)来进行调用，实现背景色，字体颜色等的定义。

3、对html定义一个自定义属性，本文以theme为例。改变theme的属性值，来匹配不同的:root选择器。

当我们改变不同的:root选择器时，选择器中定义的变量值不同，直接影响了通过var()函数来调用颜色样式。如此便实现了使用:root和var切换不同主题色。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！