一段代码搞定黑暗模式(跟随浏览器)
juse 3月前

注意,此效果并无按钮,跟随浏览器设置,你浏览器是暗黑模式,网站就是暗黑模式,如果不是,则反之

将代码添加到css里即可,目前来看还算ok,当然如果你希望微调,就直接改css就得了

另外就是预览效果仅针对默认风格,其他风格请自行修改css

 

 

效果预览

/* ==========================================================================
   css 黑暗模式
   ========================================================================== */
@media screen and (prefers-color-scheme: dark) {
 /* 在这里把需要转换的样式样式加上就好了 */ 
html{
  filter: invert(1) hue-rotate(180deg);
}
html img,
iframe,
#lbImage,
#lbOverlay,
.sitelogo{
  filter: invert(1) hue-rotate(180deg);
}
html {
  transition: color 300ms, background-color 300ms;
}
img,
#lbImage{
    opacity: .88;background-color:#111
  }

}
最新回复 (5)
全部楼主
  • juse 楼主
    3月前 2
    0

    效果对比

  • wohenfeijie
    2月前 3
    0
    不错的帖子!
  • samyasa
    2月前 4
    0
    哈哈,不错哦!
  • xc81597703
    2月前 5
    0
    我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止! 
  • xc81597703
    2月前 6
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
返回