参考Night mode bookmarklet: 5 minutes of fun with CSS filters

结合css filter的invert(1)和hue-rotate(180deg)可以实现颜色明暗的转变, 同时色调不变. 其中invert(1)会将颜色明暗和色调都进行反转, 而hue-rotate(180deg)又将色调进行反转, 即回复到原来的色调.

css如下

html, img, video {
  -webkit-filter: invert(1) hue-rotate(180deg);
  filter: invert(1) hue-rotate(180deg);
}

body {
  background: black;
}

以Chrome为例, 如果你想试用这个效果: 书签上右键"Add Page" > 名字随便起个名字, 比如"夜景模式", URL里面复制粘贴一下代码即可.

javascript:!function(d){d.head.appendChild(d.createElement('style')).innerText='html,img,video{-webkit-filter:invert(1)hue-rotate(180deg);filter:invert(1)hue-rotate(180deg)}body{background:#000}'}(document);

使用的时候, 点一下这个书签就好了.

效果图

Normal

Night-mode