0
点赞
收藏
分享

微信扫一扫

一行代码就可以“黑”掉任意网站


如何通过一行代码让网站主题变成暗黑主题呢?

实际上只需要一行代码,就可以轻松解决。

一行代码就可以“黑”掉任意网站_前端

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()色相旋转。

为了更方便实用,我们将代码加入书签里

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)' : '');})();

一行代码就可以“黑”掉任意网站_javascript_02

 以后在任意网站,只需要轻轻一点​​切换模式​​书签就可以让它变成85%的暗黑,再点一次就是100%的暗黑,再点一次变回正常模式。

3、效果演示

一行代码就可以“黑”掉任意网站_控制台输入_03

举报

相关推荐

0 条评论