只用一行CSS代码，轻松给网站加上暗黑模式

更新日期: 2025-08-28阅读: 160标签: 样式分享

复制链接

新浪微博

QQ 好友

扫一扫分享

你是不是觉得给网站做暗黑模式很麻烦？通常我们需要准备两套颜色，写不少 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 代码绝对值得一试。它不仅简单，而且效果出乎意料地好，适合大多数临时或非正式的场景。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！