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

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

将代码添加到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
  }

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

    效果对比

  • wohenfeijie
    5月前 3
    0
    不错的帖子!
  • samyasa
    5月前 4
    0
    哈哈,不错哦!
  • xc81597703
    5月前 5
    0
    我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止! 
  • xc81597703
    5月前 6
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
  • weige
    16天前 7
    0
    感谢楼主ing!!!
  • liuyio
    14天前 8
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
返回