### 彪哥

爱好前端

- 学习

- 面试

- 心情杂货

- 实用技巧

  - 2分钟规则
  - 一行代码“黑”掉任意网站
- 友情链接

- 更多
- 实用技巧

heBody
2021-11-25

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

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

实用技巧：只需一行代码，轻轻一点就可以把任意网站变成暗黑模式。

首先我们先做一个实验，在任意网站中，打开浏览器开发者工具(F12)，在`Console`控制台输入如下代码并回车：

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

1

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

原理解释

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

更多滤镜知识：`filter`
(opens new window)。

为了更方便实用，达到轻轻一点就可以对网页施加魔法🎉，

我们对代码做了一点点🤏🏻改动。（修正了滤镜对图片等元素的影响）

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

1

然后打开浏览器书签管理器，添加新书签，在网址栏粘贴这段代码并保存：

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

编辑
(opens new window)
#JavaScript #css #实用技巧
上次更新: 2022/12/14, 19:36:42
2分钟规则
友情链接

← 2分钟规则 友情链接→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式