只用一行CSS代码，轻松给网站加上暗黑模式
你是不是觉得给网站做暗黑模式很麻烦？通常我们需要准备两套颜色，写不少 JavaScript 代码来切换，还要测试各种效果，确实挺费时间的。
但今天我要分享一个特别简单的方法。只需要一行 css 代码，就能立刻让整个网站变成暗黑风格。这个方法虽然不是完美的，但非常适合快速实现，或者用在个人博客、文档网站这类对样式要求不是特别高的项目中。
现在就来试试这行代码：
html {
filter: invert(1) hue-rotate(180deg);
}你可以直接把它加到你网站的 CSS 文件里，或者在浏览器开发者工具中粘贴到 <html> 标签的样式里试试看。
加上之后，你会发现页面立刻变了个样：原来的白色背景变成了黑色，黑色文字变成了白色，其他颜色也发生了明显的变化，但整体看起来还挺协调的。
这行代码为什么有效？
核心是用了 CSS 的 filter 属性，它就像给网页加了一层滤镜。这里用了两个滤镜函数：invert() 和 hue-rotate()。
invert(1) 的作用是把所有颜色完全反转。白色变成黑色，黑色变成白色，蓝色会变成黄色。这样做虽然黑白颜色互换了，但其他颜色可能变得很奇怪，比如蓝色的链接变成亮黄色，看起来不太舒服。
所以加上了 hue-rotate(180deg)，它的作用是把颜色在色环上旋转180度。经过这个处理，原本被反转的颜色又会回到原来的色系，只是明暗有所不同。比如蓝色反转成黄色，再旋转一次，又会回到蓝色系，只是会更深或更浅一些。
这两个组合在一起，就能实现一个视觉效果不错的暗黑模式。
但这个方法也有一个问题：网页上的图片、视频和嵌入内容（比如 iframe）也会被颜色反转，导致它们看起来很奇怪。
不用担心，这个问题也可以修复。我们只要把这些元素再反转一次，它们就能恢复正常显示。我们可以这样写：
img, video, iframe {
filter: invert(1) hue-rotate(180deg);
}这样，图片和视频就会恢复原本的颜色，而其他内容仍然保持暗黑模式。
需要注意的是，这个方法更像是一个巧妙的“快速解决方案”，并不适合所有情况。它最适合用在这些地方：
个人博客或项目展示页
内部工具或文档网站
通过浏览器插件给任意网站强制启用暗黑模式
如果你在做商业项目，或者对视觉效果要求很高，建议还是用传统方式实现暗黑模式，比如使用 CSS 变量和 prefers-color-scheme 媒体查询，这样可以更精细地控制每一处的颜色和效果。
但如果你只是想快速实现一个可用的暗黑模式，这一行 CSS 代码绝对值得一试。它不仅简单，而且效果出乎意料地好，适合大多数临时或非正式的场景。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
