网页暗黑模式 - 一行代码就可以“黑”掉任意网站
如何通过一行代码让网站主题变成暗黑主题呢?实际上只需要一行代码,就可以轻松解决。
1、代码实现
在任意网站中,打开浏览器开发者工具(F12),在Console控制台输入如下代码并回车:
document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'神奇的事情发生了,当前打开的网站变成了暗黑模式。
2、原理解释
1、document.documentElement 获取文档对象的根元素,即<html>元素
2、给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg)
3、invert() 反转图像。
4、hue-rotate()色相旋转。
3、设置书签
为了更方便实用,我们将代码加入书签里

网址内容:
javascript: (function () { const docStyle = document.documentElement.style; if (!window.modeIndex) { window.modeIndex = 0; } const styleList = [ '', 'invert(85%) hue-rotate(180deg)', 'invert(100%) hue-rotate(180deg)', ]; modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1; docStyle.filter = styleList[modeIndex]; document.body.querySelectorAll('img, picture, video').forEach(el => el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '');})();以后在任意网站,只需要轻轻一点切换模式书签就可以让它变成85%的暗黑,再点一次就是100%的暗黑,再点一次变回正常模式。
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!