写了一个响应操作系统深色模式的自定义样式，分享一下。

[sileence114]

兼容单列、单列剧中。

@media (prefers-color-scheme: dark) {
  :root {
    --back-ground-color-1: #111;
    --back-ground-color-2: #222;
    --back-ground-color-3: #333;
    --back-ground-color-4: #444;
    --text-color-nomal: #fff;
    --text-color-abstract: #ccc;
    --text-color-em:#f66;
    --text-color-link-nomal: #66f;
    --text-color-link-visited: #f6f;
    --flip--color: Invert();
  }

/*
直接给body深色会护眼模式鬼畜……
1761行 checkIsDarkMode()
为何通过body背景色强制启用护眼模式？
护眼模式为什么要通过背景色判断？
*/

/* Background Color */
#wrapper #page,
#wrapper #foot,
#wrapper #foot #help{
  background-color: var(--back-ground-color-1);
}
#wrapper,
#wrapper #head,
#rs,
#wrapper #page .page-inner a,
#wrapper #s_top_wrap,
#wrapper #bottom_layer,
#wrapper #s_tab,
button.ghhider.ghhb{
  background-color: var(--back-ground-color-2);
}
#wrapper #container #content_left .c-container,
#wrapper #u .bdpfmenu,
#wrapper #u .bdpfmenu a,
#wrapper #u .usermenu,
#wrapper #u .usermenu a,
#wrapper #head_wrapper input#kw,
#wrapper form#form .bdsug-new,
#wrapper form#form .bg.s_ipt_wr{
  background-color: var(--back-ground-color-3);
}
#wrapper #content_left .result h3{
  background-color: var(--back-ground-color-4);
}
#wrapper #content_left .sp-separator.AC{
  /* 按钮用的图片，只能给你反色了。 */
  filter: var(--flip--color);
}


/* Text Color */
#wrapper #u>a,
#wrapper #u a,
#wrapper #form #kw,
#wrapper .c-color-t,
#wrapper .c-color-t,
#wrapper .c-font-normal,
#wrapper #s_tab b.cur-tab,
#wrapper #s_tab .s-tab-item:hover,
#wrapper #s_tab .s-tab-item:hover:before,
#wrapper .head_nums_cont_inner .search_tool_conter>span:hover,
#wrapper .head_nums_cont_inner .nums .search_tool:hover,
#wrapper #foot .foot-inner #help a:hover,
#wrapper #header_top_bar div span:hover,
#wrapper #bottom_layer a:hover,
#wrapper form#form div.bdsug-new b{
  color: var(--text-color-nomal);
}
#wrapper .new-pmd .c-abstract,
#wrapper .c-color-gray,
#wrapper .new-pmd.c-container,
#wrapper .new-pmd span.c-font-normal,
#wrapper #u .bdpfmenu a:hover,
#wrapper #u .usermenu a:hover,
#wrapper #page .page-inner a,
#wrapper form#form div.bdsug-new li{
  color: var(--text-color-abstract);
}
#wrapper .new-pmd em,
#wrapper a em,
#wrapper #container #content_left .result h3 a em{
  color: var(--text-color-em);
}
#wrapper .new-pmd a.c-color-t,
#wrapper a{
  color: var(--text-color-link-nomal);
}
#wrapper .new-pmd a.c-color-t:visited,
#wrapper #content_left .c-container h3 a:visited{
  color: var(--text-color-link-visited);
}
/* AC-Baidu-fix */
button.ghhider.ghhb{
  color: var(--text-color-nomal);
}

/* AC-Baidu-fix */
button.ghhider.ghhb{
  margin-left:10px;
  border: var(--back-ground-color-2);
}
}
/* Layout */
div#wrapper div#wrapper_wrapper div#content_left{
  width: 660px;
}
div#wrapper div#wrapper_wrapper div#content_left div.c-container.new-pmd{
  width: 660px;
  padding: 0 10px 5px 10px;
  border-radius:10px;
}
#wrapper form#form div.bdsug-new ul{
  border-top-color: var(--text-color-abstract, #f5f5f6);
}
#wrapper #content_left .result h3{
  margin: 0px -10px 10px -10px;
  padding: 8px 20px 5px;
  border-radius: 5px 5px 0px 0px;
}

[langren1353]

东西确实很棒，想抄来用用。
但是后来发现。。。。。。emmm不是我想要的，很尴尬，我只是想做一个假的护眼色，纯黑护眼的那种暂时不想搞，我还是在原来的基础上把背景色检测删了。
至于暗夜模式的话，以后就来抄你的代码了，希望不要喷我 P_P (会注明作者)

[sileence114]

好耶

其实也是现学现卖的…… https://www.cnblogs.com/guangzan/p/13524990.html

(话说百度的前端真垃圾……)

[wolfcon]

@langren1353 大佬快点搞起来

[twbworld]

@langren1353 感谢大佬,大佬辛苦了

[liangfengxiao]

谢谢