参考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
