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

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

}