0

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

xinyu
2024-12-31 106

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

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

}
本站申明 1、本论坛一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请投诉举报
2、本论坛的资源部分来源于网络,如有侵权,请 私信联系站长进行删除处理。
3、不得发布和链接任何有关政治, 色情, 宗教, 迷信.低俗、变态、血腥、暴力以及危害国家安全.诋毁政府形象等违法言论和信息的帖子.
4、本帖图片及内容纯属发布用户个人意见,与本站无关!
4,本帖如为原创资源/教程分享帖,则本站与发布用户共同享有内容版权!
6,本站管理有权在不经发布者同意的情况下,根据版规及相关法律法规删除/修改本帖!
7,如无特别说明,任何个人或者组织不得转载本帖内容!任何个人或团体不得将本站资源用于非法用途!
8,未尽事宜最终解释权归本站(小白网)所有!

最新回复 (0)

    暂无评论

    • Xiuno论坛
      2
返回
来发布一条评论吧~点击关闭评论框