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

资源共享 · 05-27 10:21

无需安装任何插件,也无需部署任何代码,只需一个书签加一行代码即可搞定,轻轻一点就可以把任意网站变成暗黑模式。

效果展示

为了方便给大家演示,我们这里就以谷歌首页为例(其他任意网站都是可以的)。打开谷歌,F12键进入Console控制台输入以下代码并回车:

document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'

神奇的事情发生了,当前打开的网站变成了暗黑模式。

刘郎阁

此方法来自Evan

Evan

哈哈,是不是很神奇,其实原理很简单。

document.documentElement 获取文档对象的根元素,即元素
给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg)
invert() 反转图像。
hue-rotate()色相旋转。

为了更方便食用,达到轻轻一点就能实现该效果,我们可以这么做。

具体操作

1.将本页保存为书签(或者其他页面也可以)

2.点击进入刚才保存的书签,编辑并在网址这里添加以下代码:

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%的暗黑,再点一次变回正常模式。

相关文章推荐:

完!

特效 在线体验

上一篇 : SSH客户端工具

下一篇 : 蓝奏云盘第三方客户端:支持批量下载


  1. HowieHz   Lv1
    06-18 12:43 第11楼 中国上海市移动Windows 10 · Google Chrome

    好玩,
    一反转emoji都变成黑人了哈哈😂

    1. 刘郎   博主
      06-18 12:45 第12楼 中国贵州省移动Windows 10 · QQ Browser
      @HowieHz

      哈哈 全黑了都😂

  2. 两对半   访客
    06-17 10:37 第9楼 中国四川省成都市移动Windows 7 · Google Chrome

    一看到黑网站就心头一紧,几个月前博客就被黑。
    还好,是黑艺术

    1. 刘郎   博主
      06-17 10:42 第10楼 中国移动iPhone · Safari
      @两对半

      "黑"网站,黑艺术😂 哈哈 有点意思 我喜欢

  3. ST MInuo   访客
    06-04 23:31 第7楼 中国河南省周口市移动iPhone · Google Chrome

    这个是真的黑。

    1. 刘郎   博主
      06-05 06:51 第8楼 中国贵州省移动iPhone · Safari
      @ST MInuo

      可以自定义颜色

  4. Evan   访客
    05-27 15:27 第5楼 中国北京市亦庄联通iPhone · Google Chrome

    哈哈~欢迎弄着玩^_^

    1. 刘郎   博主
      05-27 15:30 第6楼 中国贵州省移动iPhone · Safari
      @Evan

      欢迎常来😎

  5. obaby   Lv2
    05-27 13:08 第3楼 中国山东省青岛市联通iPhone · Google Chrome

    真 高级黑
    哈哈哈

    1. 刘郎   博主
      05-27 13:10 第4楼 中国移动iPhone · Safari
      @obaby

      黑的麻麻都认不出来了 哈哈哈

  6. 龙笑天   访客
    05-27 12:21 第1个脚印 中国广东省深圳市联通Windows 10 · FireFox

    不是很好 图片变负片不忍直视~
    PS:还是习惯了白色背景...

    1. 刘郎   博主
      05-27 12:24 第2楼 中国移动iPhone · Safari
      @龙笑天

      这个只能娱乐玩玩,如果要用可以自定义修改js的嘛,把图片过滤掉就可以了

| 黔ICP备2024020400号-2 | 萌ICP备20246777号 | | 当前有 4 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力