运用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="zhanzhangluntanfe14-2247-855d-9ab8 content">
<div class="zhanzhangluntan2247-855d-9ab8-e5fa mode">
<p id="light-mode" style="display: none;">
<svg width="24" height="24">
<rect width="24" height="24" fill="none" rx="0" ry="0" />
<path
fill="#000000"
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.9247 6.7793 12.7532 6.78101C13.5817 6.78284 14.2517 7.45581 14.25 8.28418ZM20.931 11.316C20.9327 10.4877 20.2626 9.8147 19.4342 9.81299C18.6057 9.81116 17.9327 10.4813 17.931 11.3098C17.9293 12.1383 18.5995 12.8112 19.4279 12.813C20.2562 12.8147 20.9293 12.1445 20.931 11.316ZM2.75 16.3748C2.75183 15.5464 3.42469 14.8762 4.25318 14.8779C5.08167 14.8798 5.75171 15.5527 5.75 16.3811C5.74817 17.2096 5.07532 17.8796 4.24683 17.8779C3.41834 17.8762 2.74817 17.2032 2.75 16.3748ZM19.75 16.3748C19.7518 15.5464 20.4247 14.8762 21.2532 14.8779C22.0817 14.8798 22.7517 15.5527 22.75 16.3811C22.7482 17.2096 22.0753 17.8796 21.2468 17.8779C20.4183 17.8762 19.7482 17.2032 19.75 16.3748ZM6.08301 9.81299C5.25452 9.81116 4.58167 10.4813 4.57984 11.3098C4.57813 12.1383 5.24817 12.8112 6.07666 12.813C6.90515 12.8147 7.57801 12.1445 7.57984 11.316C7.58167 10.4877 6.9115 9.8147 6.08301 9.81299ZM7.83899 17.3777C7.83899 14.6697 10.0421 12.4675 12.7501 12.4675C15.4581 12.4675 17.6603 14.6697 17.6603 17.3777C17.6603 17.7087 17.3917 17.9773 17.0607 17.9773H8.4386C8.10754 17.9773 7.83899 17.7087 7.83899 17.3777ZM12.7501 13.6667C10.9073 13.6667 9.37512 15.0164 9.08704 16.7781H16.4122C16.1241 15.0164 14.5919 13.6667 12.7501 13.6667Z"
/>
</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="#22a6b3"
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.85C13.5501 8.12 13.3101 8.32 13.0201 8.32C12.7301 8.32 12.4901 8.13 12.4301 7.85C12.0801 6.24 11.9501 6.1 10.3301 5.75C10.0601 5.69 9.86011 5.45 9.86011 5.16C9.86011 4.87 10.0501 4.63 10.3301 4.57C11.9401 4.22 12.0801 4.09 12.4301 2.47C12.4901 2.2 12.7301 2 13.0201 2C13.3101 2 13.5501 2.2 13.6201 2.48C13.9701 4.09 14.1001 4.23 15.7201 4.58ZM12.2901 5.16C12.6001 5.35 12.8301 5.58 13.0201 5.89C13.2101 5.58 13.4401 5.35 13.7501 5.16C13.4401 4.97 13.2101 4.74 13.0201 4.43C12.8301 4.74 12.6001 4.97 12.2901 5.16ZM18.5801 7.99002C19.0301 10.04 19.2501 10.27 21.3001 10.71C21.5801 10.77 21.7701 11.01 21.7701 11.3C21.7701 11.59 21.5801 11.83 21.3001 11.89C19.2501 12.34 19.0201 12.56 18.5801 14.61C18.5201 14.88 18.2801 15.08 17.9901 15.08C17.7001 15.08 17.4601 14.89 17.4001 14.61C16.9501 12.56 16.7301 12.33 14.6801 11.89C14.4101 11.83 14.2101 11.59 14.2101 11.3C14.2101 11.01 14.4001 10.77 14.6801 10.71C16.7301 10.26 16.9601 10.04 17.4001 7.99002C17.4601 7.72002 17.7001 7.52002 17.9901 7.52002C18.2801 7.52002 18.5201 7.71002 18.5801 7.99002ZM16.8101 11.29C17.3601 11.57 17.7201 11.93 18.0001 12.48C18.2801 11.94 18.6401 11.57 19.1901 11.29C18.6401 11.01 18.2801 10.65 18.0001 10.1C17.7201 10.65 17.3601 11.01 16.8101 11.29Z"
/>
<path
fill="#000000"
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.33008 7.43014 5.38008 7.61014 5.56008C7.79014 5.74008 7.84013 6.01008 7.73013 6.24008C7.26013 7.23008 7.03014 8.30008 7.03014 9.42008C7.03014 13.5601 10.4001 16.9301 14.5501 16.9301C15.6601 16.9301 16.7201 16.6901 17.7101 16.2301C17.9401 16.1201 18.2101 16.1701 18.3901 16.3501C18.5701 16.5301 18.6201 16.8001 18.5101 17.0301C17.0901 20.0901 13.9901 22.0701 10.6001 22.0701ZM6.06013 7.36008C4.21013 8.77008 3.08014 10.9901 3.08014 13.3501C3.08014 17.5001 6.45013 20.8701 10.6001 20.8701C12.9801 20.8701 15.1901 19.7401 16.5901 17.8901C15.9201 18.0501 15.2401 18.1301 14.5401 18.1301C9.73013 18.1301 5.82013 14.2201 5.82013 9.42008C5.82013 8.72008 5.90014 8.03008 6.06013 7.36008Z"
/>
<path
fill="black" fill-opacity="0.3"
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.7301 2 12.4901 2.2 12.4301 2.47C12.0801 4.09 11.9401 4.22 10.3301 4.57C10.0501 4.63 9.86011 4.87 9.86011 5.16C9.86011 5.45 10.0601 5.69 10.3301 5.75C11.9501 6.1 12.0801 6.24 12.4301 7.85C12.4901 8.13 12.7301 8.32 13.0201 8.32C13.3101 8.32 13.5501 8.12 13.6101 7.85C13.9601 6.23 14.1001 6.1 15.7101 5.75C15.9901 5.69 16.1901 5.45 16.1901 5.17ZM13.0201 5.89C12.8301 5.58 12.6001 5.35 12.2901 5.16C12.6001 4.97 12.8301 4.74 13.0201 4.43C13.2101 4.74 13.4401 4.97 13.7501 5.16C13.4401 5.35 13.2101 5.58 13.0201 5.89Z"
/>
</svg>
<span>黑夜模式</span>
</p>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script src="https://cdn.bootcss.com/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()) {
document.getElementById("light-mode").style.display = "none";
document.getElementById("dark-mode").style.display = "flex";
} else {
document.getElementById("light-mode").style.display = "flex";
document.getElementById("dark-mode").style.display = "none";
}
});
$(".darkmode-toggle").click(function () {
if (darkmode.isActivated()) {
document.getElementById("light-mode").style.display = "none";
document.getElementById("dark-mode").style.display = "flex";
} else {
document.getElementById("light-mode").style.display = "flex";
document.getElementById("dark-mode").style.display = "none";
}
});
</script>
</html>
0