一行代码实现网站“暗模式”

参考文章 Dark Mode in One Line of Code!

本文不是翻译，也不是转载，而是用自己的语言表达上面文章想表达的东西。本来想设置成“转载”或“翻译”文章，但并没有途径获取原作者的授权。但毕竟是拾人牙慧，惭愧惭愧

我是不喜欢这样的标题的，除非内容真如标题所说。是的，只需要这一行代码，就可以让你的网站变成“暗模式”：

document.querySelector('html').style.filter = 'invert(1)'

你可以按 F12打开开发者工具，然后切换到 控制台/console栏，然后输入上面的代码，然后回车
是吧！

如果你觉得某些元素不需要“暗模式”，可以针对那个元素设置 css：

img {
  filter: invert(1);
}

比如图片，比如已经进行了暗处理的代码块，比如在暗模式下不好看的一切元素……

如果你需要在“暗模式”和“亮模式”之间切换，则可以给某按钮绑定点击事件：

function toggleDark() {
  var tmp = document.querySelector('html').style.filter
  document.querySelector('html').style.filter = {
    '': 'invert(1)',
    'invert(1)': ''
  }[tmp]
}

你也可以在控制台试试下面代码：

document.querySelector('html').onclick = function toggleDark() {
  var tmp = document.querySelector('html').style.filter
  document.querySelector('html').style.filter = {
    '': 'invert(1)',
    'invert(1)': ''
  }[tmp]
}

当你点击网页时，就会来回切换暗、亮模式

如果你不需要切换暗亮模式，也许用 css 设置暗模式会更合适：

html {
  filter: invert(1);
}
img {
  filter: invert(1);
}

写在后面

filter 是 css 里较新的属性，功能很强大，类似的，也可以通过一行代码，让网站变灰：

document.querySelector('html').style.filter = 'grayscale(1)';

本文只说了“怎么做”，而未说明“为什么”，如果感兴趣欢迎一起讨论。