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

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

Open sileence114 opened this issue 3 years ago • 5 comments

兼容单列、单列剧中。

@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;
}