Darkmode.js实现⿊暗模式
运⽤CSS 3.0的过滤属性可以实现⿊暗模式，当我们⽤这个属性实现⿊暗模式时，我们会发现图⽚的颜⾊会受影响，并不是很美观，是⽆法完美切换⿊暗模式的，⽽最近出了⼀个JavaScript辅助插件叫Darkmode.js可以完美的切换⿊暗模式。
Darkmode.js运⽤的是CSS⾥⾯的⼀个特性叫mix-blend-mode ，这个 属性描述了元素的内容应该与元素的直系⽗元素的内容和元素的背景如何混合，再加上Javascript的辅助判断哪些页⾯上的元素需要⿊化的，哪些是不需要⿊化的。
以下是代码实现，欢迎⼤家复制粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Darkmode.js实现⿊暗模式</title>
<style>
* {
margin: 0;
padding: 0;
transition: 0.3s ease-in-out;
}
html {
background: #fff;
}
body {
background: #fff;
font-family: "Rubik", sans-serif;
display: flex;
justify-content: center;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mode p {
display: flex;
cursor: pointer;
margin-top: 15px;
width: 100%;
text-align: right;
font-size: 20px;
}
.mode p:hover {
color: #ef6eae;
}
img{
width:400px;
height:400px;
}
</style>
</head>
<body>
<div class="content">
javascript的特性<div class="mode">
<p id="light-mode" >
<svg width="24" height="24">
<rect width="24" height="24" fill="none" rx="0" ry="0" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.25 8.28418C14.2482 9.11267 13.5753 9.78284 12.7468 9.78101C11.9183 9.7793 11.2482 9.10633 11.25 8.27784C11.2518 7.44947 11                        fill="#000000" />
</svg>
<span>⽇间模式</span>
</p>
<p id="dark-mode">
<svg width="24" height="24">
<rect width="24" height="24" fill="none" rx="0" ry="0" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.7201 4.58C15.9901 4.64 16.1901 4.89 16.1901 5.17C16.1901 5.45 15.9901 5.69 15.7101 5.75C14.1001 6.1 13.9601 6.23 13.6101 7.85C                        fill="#22a6b3" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.6001 22.0701C5.79013 22.0701 1.88013 18.1601 1.88013 13.3501C1.88013 9.98008 3.86013 6.87008 6.93013 5.44008C7.16013 5.330                        fill="#000000" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16.1901 5.17C16.1901 4.89 15.9901 4.64 15.7201 4.58C14.1001 4.23 13.9701 4.09 13.6201 2.48C13.5501 2.2 13.3101 2 13.0201 2C12.73                        fill="black" fill-opacity="0.3" />
</svg>
<span>⿊夜模式</span>
</p>
</div>
</div>
</body>
<script src="cdn.jsdelivr/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script src="cdn.bootcss/jquery/3.4.1/jquery.min.js"></script>
<script>
var options = {
bottom: "32px",                // default: '32px'
right: "32px",                  // default: '32px'
left: "unset",                  // default: 'unset'
time: "0.5s",                  // default: '0.3s'
mixColor: "#fff",              // default: '#fff'
backgroundColor: "#fff",        // default: '#fff'
buttonColorDark: "#262728",    // default: '#100f2c'
buttonColorLight: "#fff",      // default: '#fff'
saveInCookies: true,            // default: true,
label: " ",                    // default: ''
autoMatchOsTheme: true,        // default: true
let darkmode = new Darkmode(options);
darkmode.showWidget();
$("document").ready(function () {
if (darkmode.isActivated()) {
});
$(".darkmode-toggle").click(function () {
if (darkmode.isActivated()) {
});
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。