JavaScript实现网站暗黑模式代码详解 -六月初技术站

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

六月初 JavaScipt 2023-06-01 20:22:45

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

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

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

实现效果代码如下：

<!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>