采用css3的var实现动态主题切换

Posted on 2022-01-16 12:40 中园阅读(1295) 评论(0) 编辑收藏举报

背景

因为是一个二期项目，需要在一期的基础上做一些风格的改变，但是苦于没有产品和UI，所以这个事情就落到了前端的头上，一开始只是想的统一一下按钮和标题的颜色（这里就用到了var），顺便做些颜色改动比较方便，后面直接要求做一个动态主题切换（当然只是颜色的切换），所以就顺便研究了一下利用var来实现主题颜色切换。

准备

css自定义属性（也叫做css变量）
官方称呼其为自定义属性，坊间通常叫做css变量，因为它类似于其他js语言中的变量，可用于存储颜色、字体、大小宽度等css属性值；定义方式为两个连字符也就是中划线（--）开头，引用方式为var(custom-property-name, value)，其中custom-property-name为定义的变量名称（必须），value为回退值（非必须），也叫默认值（如果前面引用的变量名称未定义时就会使用该值）。具体使用如下：

 :root{
  --theme-color: blue;
  --theme-border: 1px solid var(--theme-color, #ccc);
}
.demo-txt{
  color: var(--theme-color);
}
.demo-btn{
  border: var(--theme-border);
}

:root伪类
它匹配文档的根<html>元素，但具有更高的优先级，所以在:root中定义定义的变量可用于全局访问，如需覆盖其中的变量值，只需要在引用的元素同级或父级定义变量名称相同的变量覆盖即可。

使用

在theme.css文件中定义好变量

 :root{
  --theme-color: #ff6a00;
  --font-color: #333;
  --bg-color: #fff;
  --panel-bg-color: #eee;
  --border: 1px solid #ddd;
  /** more attribute **/
}
:root[theme='blue']{
  --theme-color: #2563eb;
}
:root[theme='dark']{
  filter: invert(1) brightness(1);
}

在页面中动态切换主题
添加页面文件index.html，内容如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Theme Demo</title>
    <link rel="stylesheet" href="theme.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section class="container">
        <header class="header">头部标题</header>
        <main class="main">
            <div class="con">
                <p>主题说明：链接文字采用主题色，按钮背景采用主题色</p>
                <a href="#">链接</a><br>
                <button>按钮</button>
            </div>
            <div class="radio-group">
                <input id="default" type="radio" name="theme" value="defalut" checked/><label for="default">默认</label>&nbsp;
                <input id="blue" type="radio" name="theme" value="blue" /><label for="blue">蓝色</label>&nbsp;
                <input id="dark" type="radio" name="theme" value="dark" /><label for="dark">暗黑</label>
            </div>
        </main>
        <footer class="footer">页面底部</footer>
    </section>
    <script>
        var themes = document.getElementsByName("theme");
        Array.from(themes).forEach(themeRadio => {
            themeRadio.addEventListener("click", function(){
                document.documentElement.setAttribute("theme", this.value);
            })
        })
    </script>
</body>
</html>

添加样式文件index.html, 内容如下：

  
*{
    padding: 0;
    margin: 0;
    border: 0;
    font-size: var(--font-size);
    color: var(--font-color);
}
html, body{
    width: 100%;
    height: 100%;
    background-color: var(--body-bg-color);
}
a{
    color: var(--theme-color);
}
button{
    background-color: var(--theme-color);
    color: var(--body-bg-color);
    line-height: 20px;
    padding: 10px;
}
.container{
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 100%;
    margin: 0 auto;
    background-color: var(--body-bg-color);
}
.container .header{
    --line-height: 40px;
    height: var(--line-height);
    line-height: var(--line-height);
    padding: var(--content-padding); 
    font-size: var(--font-size-lg);
    box-shadow: var(--boxshadow);
    background-color: var(--bg-color);
}
.container .main{
    flex: 1;
    line-height: 30px;
    padding: var(--content-padding);
}
.container .footer{
    --line-height: 30px;
    height: var(--line-height);
    line-height: var(--line-height);
    padding: var(--content-padding);
    font-size: var(--font-size-sm);
    background-color: var(--bg-color-lg);
}

主要就是通过切换html的属性来达到切换的效果。

总结

使用var切换主题的方式比较简单，而且对统一页面样式以及后期维护有很大帮助，适用于对兼容性要求不高的（IE15以上支持）需求。如果需要兼容性更高的主题切换，可以参考张鑫旭老师的这篇文章《link rel=alternate网站换肤功能最佳实现》。

参考文章

https://zhuanlan.zhihu.com/p/60975003

转载请注明出处

https://www.cnblogs.com/jieli/p/15806735.html

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 原生js实现两个时间相隔时长，自适应天时分秒

· vant+vue3自定义主题

· 根据css3的:root实现项目的主题切换功能

· css变量实现换肤

· js修改css变量值实现主题切换

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

中园

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

采用css3的var实现动态主题切换

背景

准备

使用

总结

参考文章

转载请注明出处

	:root{
	--theme-color: blue;
	--theme-border: 1px solid var(--theme-color, #ccc);
	}
	.demo-txt{
	color: var(--theme-color);
	}
	.demo-btn{
	border: var(--theme-border);
	}

	:root{
	--theme-color: #ff6a00;
	--font-color: #333;
	--bg-color: #fff;
	--panel-bg-color: #eee;
	--border: 1px solid #ddd;
	/ more attribute /
	}
	:root[theme='blue']{
	--theme-color: #2563eb;
	}
	:root[theme='dark']{
	filter: invert(1) brightness(1);
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dynamic Theme Demo</title>
	<link rel="stylesheet" href="theme.css">
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<section class="container">
	<header class="header">头部标题</header>
	<main class="main">
	<div class="con">
	<p>主题说明：链接文字采用主题色，按钮背景采用主题色</p>
	<a href="#">链接</a><br>
	<button>按钮</button>
	</div>
	<div class="radio-group">
	<input id="default" type="radio" name="theme" value="defalut" checked/><label for="default">默认</label>
	<input id="blue" type="radio" name="theme" value="blue" /><label for="blue">蓝色</label>
	<input id="dark" type="radio" name="theme" value="dark" /><label for="dark">暗黑</label>
	</div>
	</main>
	<footer class="footer">页面底部</footer>
	</section>
	<script>
	var themes = document.getElementsByName("theme");
	Array.from(themes).forEach(themeRadio => {
	themeRadio.addEventListener("click", function(){
	document.documentElement.setAttribute("theme", this.value);
	})
	})
	</script>
	</body>
	</html>


	*{
	padding: 0;
	margin: 0;
	border: 0;
	font-size: var(--font-size);
	color: var(--font-color);
	}
	html, body{
	width: 100%;
	height: 100%;
	background-color: var(--body-bg-color);
	}
	a{
	color: var(--theme-color);
	}
	button{
	background-color: var(--theme-color);
	color: var(--body-bg-color);
	line-height: 20px;
	padding: 10px;
	}
	.container{
	display: flex;
	flex-direction: column;
	width: 70%;
	height: 100%;
	margin: 0 auto;
	background-color: var(--body-bg-color);
	}
	.container .header{
	--line-height: 40px;
	height: var(--line-height);
	line-height: var(--line-height);
	padding: var(--content-padding);
	font-size: var(--font-size-lg);
	box-shadow: var(--boxshadow);
	background-color: var(--bg-color);
	}
	.container .main{
	flex: 1;
	line-height: 30px;
	padding: var(--content-padding);
	}
	.container .footer{
	--line-height: 30px;
	height: var(--line-height);
	line-height: var(--line-height);
	padding: var(--content-padding);
	font-size: var(--font-size-sm);
	background-color: var(--bg-color-lg);
	}