JavaScript实现网站暗黑模式代码详解

网站换肤在一些注重于用户交互体验的网站中是常见的功能之一,换肤功能使网站对于用户来说更加个性化。

那么前端开发中如何实现开启网站的暗黑模式效果呢?

先来看看网站中对于网站常规代码设置后的效果,如图


实现效果代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
* {
width: 100vw;
height: 100vh;
background-color: #fff;
}
</style>
<div class="" style="text-align: center;">
<div style="display: block;height: 30px;">暗黑模式</div>
<img src="1681896352833.jpg" style="width:300px;height: auto;" alt="" srcset="">
</div>
<script>
document.documentElement.style.filter='invert(100%) hue-rotate(180deg)'
document.body.querySelectorAll('img, picture, video').forEach(el => {
el.style.filter = 'invert(1) hue-rotate(180deg)'
});
</script>
</body>
</html>

代码关键点解析:

    1、document.documentElement 获取文档对象的根元素,即元素

    2、给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg)

    3、invert属性:反转图像。

    4、hue-rotate属性:色相旋转。

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