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

/ 1,002 阅读 / 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)便可。

404 Not Found

404

Not Found

The resource requested could not be found on this server!


Proudly powered by LiteSpeed Web Server

Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.