修改 Adams 主题夜间模式配色方案笔记

/ 518 阅读 / 1

觉得 Adams 主题自带的夜间模式(深夜蓝)色值:#1c1f2b 还不够黑,所以重新调整了配色方案。

你可以在外观> 自定义> 额外 CSS 把 CSS 内容拷贝进去,点发布就可以。我测试的时候就是这么操作的。

“额外 CSS” 虽然可以用,但总觉得页面打开的速度有点慢,而且这个深夜蓝的夜间模式我也不打算继续用,所以干脆覆盖 CSS 内容了。

  1. 打开 Adams 主题内的 style.css
  2. 找到/* 夜间模式 */
  3. 复制替换掉原有的 CSS 内容
  4. 保存上传便可。

如果你使用了缓存,可以随意更新一篇文章,刷新一下缓存就 OK。

Tips: 切记备份原 css 文件!!免得到时候没有后悔药吃。

以下就是 CSS 代码:

/* 夜间模式(重新定义黑色)*/
body.night .post_article ol,
body.night .post_article ul,
body.night blockquote,
body.night q,
body.night code {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
body.night .header .menu li,
body.night a,
body.night .archives tr a,
body.night ul.link-items li a,
body.night .readerswall li a {
    color: #898989;
}

body.night .header .menu li:hover,
body.night .header .menu li:hover a,
body.night .current-menu-item,
body.night .current_page_item,
body.night .current-menu-parent,
body.night .current-post-parent,
body.night a:hover,
body.night .archives tr a:hover,
body.night ul.link-items li a:hover,
body.night .readerswall li a:hover {
    color: #bdc1c6 !important;
}

body.night,
body.night .post-list .meta header h2,
body.night .infos.fixed .fixed-title,
body.night .infos,
body.night .infos.donate-close .donate .window,
body.night .infos.share-close .qrcode {
    background: #202124;
    color: #bdc1c6;
}

body.night .infos.donate-close .donate .window,
body.night .infos.share-close .qrcode {
    box-shadow: 0 1px 0 #141517, -1px 0 0 #141517, 1px 0 0 #141517;
}

body.night .header:after,
body.night .header .menu li:after,
body.night .footer .menu li:after,
body.night .alink hr {
    background: #141517;
}

body.night .header h1,
body.night .current-menu-item a,
body.night .current_page_item a,
body.night .current-menu-parent a,
body.night .current-post-parent a,
body.night .social * {
    color: #fff;
}

body.night .infos:before,
body.night .infos:after {
    background: #333;
}

body.night .post-list .reade_more .page-numbers,
body.night .post-list .reade_more .page-numbers:hover,
body.night .post-list .reade_more span.page-numbers {
    background: #141517;
    box-shadow: none;
    color: #bdc1c6;
}

body.night .post-list .reade_more .page-numbers:hover,
body.night .post-list .reade_more span.page-numbers {
    background: #898989;
}

body.night .infos.fixed {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

body.night .alink {
    border-top: 1px solid #141517;
}

body.night .post-list .meta header h2:hover {
    color: #fff;
}

body.night .post-list .reade_more a,
body.night .post-list .reade_more a:hover {
    background: #898989;
    color: #202124;
}

body.night .post-list .reade_more a:hover {
    color: #fff;
}

body.night .comment .comment {
    border-left: 1px solid #141517;
}

body.night .post-list .meta footer span,
body.night .comment-meta a,
body.night .comment-author span,
body.night .infos,
body.night .infos a {
    color: #898989;
}

body.night .comment .comment-author .avatar,
body.night .comment .comment-author:before,
body.night #commentform input,
body.night #commentform textarea,
body.night #commentform input#submit:focus {
    color: #bdc1c6;
    background: #202124;
    border: 1px solid #141517;
}

body.night #commentform textarea:focus,
body.night #commentform input:focus,
body.night #commentform input#submit:hover {
    border-color: #bdc1c6;
}

body.night #commentform input#submit {
    color: #fff;
}

body.night #commentform input#submit:hover {
    background: #141517;
    border-color: #141517;
}

body.night .nearbypost {
    box-shadow: 0 1px 0 #333, 0 -1px 0 #333;
}

body.night .nearbypost div.alignright {
    box-shadow: -1px 0 0 #333;
}

body.night .view-img {
    background: rgba(28, 31, 43, 0.9) !important;
}

body.night .setting_tool,
body.night .setting_tool a,
body.night .setting_tool.colors div.c,
body.night .setting_tool.search div.s input,
body.night .setting_tool.search div.s input::placeholder {
    background: #141517;
    color: #bdc1c6;
}

20220510

补充一下修改 CSS 文件遗漏的地方:图片灯箱背景颜色

位置:第 720 行

body.night .view-img {
    background: rgba(28, 31, 43, 0.9) !important;
}

将 rgba 里面的颜色值修改为 rgba(18, 18, 18, 0.9)便可。