@media (prefers-color-scheme: dark) {
html {
filter: invert(90%) hue-rotate(180deg);
}
img, video, svg, div[class*="language-"] {
filter: invert(110%) hue-rotate(180deg);
opacity: .8;
}
}
invert
将所有色值反转,hue-rotate
将黑白以外的其它主色调再反转回来(防止页面主题色出现大的变化);- 网上的
invert
通常取值为100%
,但是这样反转得到的黑色往往太过黑,眼睛看起来有点累,因此我觉得90%
是一个更合理的值; - 将图片、视频等其它不需要被反转的元素再反转回来,并加一个透明度,让其不那么刺眼;
- 如果 html 反转
90%
,则图片等元素需要反转110%
; div[class*="language-"]
对应的是本站 (VuePress) 上的代码块。