现在很多的网站都喜欢采用黑暗模式，毕竟这种界面看起来逼格比较高端，比如下面这样的效果：
你可能会认为这是不是需要写两套样式，其实不用，用一个属性就可以变成黑暗模式，以下是代码实现，欢迎大家复制粘贴和收藏。
<!DOCTYPE html>标签：getElementById,过滤,5.16,mode,3.0,13.0201,document,display,CSS From： https://blog.51cto.com/u_15959833/6046808
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 3.0的过滤属性实现黑暗模式</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;
}
body.dark-mode {
/* filter: invert() — 是从0到1的刻度，1是从白变黑 */
/* filter: hue-rotate() — 改变你元素的颜色，同时尽量保持原本相同的色系，取值0deg到360deg。 */
filter: invert(1) hue-rotate(270deg);
}
.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;
}
</style>
</head>
<body>
<div class="content">
<div class="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-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"
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.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"
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.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"
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.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"
fill="black" fill-opacity="0.3" />
</svg>
<span>黑夜模式</span>
</p>
</div>
</div>
</body>
<script>
// 点击切换模式
document.getElementById("dark-mode").onclick = function () {
let bodyEl = document.body;
bodyEl.classList.add("dark-mode");
document.getElementById("light-mode").style.display = "flex";
document.getElementById("dark-mode").style.display = "none";
};
document.getElementById("light-mode").onclick = function () {
let bodyEl = document.body;
bodyEl.classList.remove("dark-mode");
document.getElementById("light-mode").style.display = "none";
document.getElementById("dark-mode").style.display = "flex";
};
</script>
</html>