【技术】实现哪吒监控面板ServerStatus主题明亮和暗黑模式下的美化

前几天哪吒监控的新版本又实现了 ServerStatus 主题深色模式的半透明样式美化，并且官方 Github 也放出了自定义代码：

<style>
body[theme="dark"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /** bing每日壁纸 **/
    background: url(https://imgapi.cn/bing.php) no-repeat 50% 50%;
    background-size: cover;
    z-index: -1;
}

body[theme="dark"] {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: #f1f1f1;
}

body[theme="dark"]::after {
    content: "";
    position: fixed;
}

body[theme="dark"] .navbar {
    /** 顶部导航条 背景 **/
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: none;
    border: none;
}

body[theme="dark"] .navbar .navbar-brand {
    color: #ffffff;
}

body[theme="dark"] .navbar .dropdown-menu {
    /** 二级导航下拉 背景 **/
    background-color: rgba(0, 0, 0, 0.85);
    border-top: none;
    border-color: #31363b;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}

body[theme="dark"] .navbar .dropdown-menu > li > a {
    color: #c8c3bc;
}

body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
    /** 二级导航鼠标悬停选中背景 **/
    background-color: rgba(0, 0, 0, 0.95);
    background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
}

body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
    color: #f1f1f1;
}

body[theme="dark"] .table,
body[theme="dark"] .table-condensed > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr:hover,
body[theme="dark"] .table-striped tbody > tr.even,
body[theme="dark"] .table-striped tbody > tr.odd,
body[theme="dark"] .table-striped tbody > tr.even > td,
body[theme="dark"] .table-striped tbody > tr.even > th,
body[theme="dark"] .table-striped tbody > tr.odd > td,
body[theme="dark"] .table-striped tbody > tr.odd > th,
body[theme="dark"] .table-striped tbody > tr.even > td:hover,
body[theme="dark"] .table-striped tbody > tr.even > th:hover,
body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
    background-color: transparent !important;
}

body[theme="dark"] .content {
    /** 主box 背景 **/
    background-color: rgba(28, 29, 38, 0.8); 
    border: none;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
}

body[theme="dark"] .table > thead > tr.node-group-tag > th,
body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
    background: unset;
}

body[theme="dark"] .table > tbody > tr > td:before,
body[theme="dark"] .table > tfoot > tr > td:before,
body[theme="dark"] .table > thead > tr > td:before,
body[theme="dark"] .table > thead > tr.node-group-cell > th:before{
     /** border-bottom 颜色 **/
    background-color: rgba(155, 155, 155, 0.1); 
}

body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
    background-color: unset;
}

/* expandRow展开部分样式 */
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
    background-color: unset;
}

body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
    background-color: unset;
}
/* expandRow展开部分样式结束 */

body[theme="dark"] .progress {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.075); 
}
</style>

官方代码链接页面在这里：
https://github.com/naiba/nezha/pull/395

但是，官方代码只是实现了基本的暗黑主题模式（Dark Mode)下的修改背景及半透明美化，而亮色模式（Light Mode)下并未做任何修改，试用了一下总感觉不太完美，而且官方只是做了基本的面板美化，想要修改面板 Logo 和标签页 Favicon 也需要自己动手。

以下是我和 ChatGPT 大牛讨论半小时的最终成品（已按照我自己的喜好修改了默认字体）：

<style>
/* Common Styles */
body[theme]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /** bing每日壁纸 **/
    background: url(https://imgapi.cn/bing.php) no-repeat 50% 50%;
    background-size: cover;
    z-index: -1;
}

body[theme]::after {
    content: "";
    position: fixed;
}

body[theme] {
    font-family: "Consolas", Arial, Helvetica, sans-serif;
    background: rgba(var(--bg-color), 0.8);
    color: var(--text-color);
}

body[theme] .navbar {
    background-color: rgba(var(--navbar-bg-color), 0.8);
    box-shadow: none;
    border: none;
}

body[theme] .navbar .navbar-brand,
body[theme] .navbar .navbar-nav > li > a {
    color: var(--navbar-brand-color) !important;
}

body[theme] .navbar .dropdown-menu {
    background-color: rgba(var(--dropdown-bg-color), 0.85);
    border-top: none;
    border-color: var(--dropdown-border-color);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}

body[theme] .navbar .dropdown-menu > li > a {
    color: var(--dropdown-link-color);
}

body[theme] .navbar .dropdown-menu > li > a:focus,
body[theme] .navbar .dropdown-menu > li > a:hover {
    background-color: rgba(var(--dropdown-hover-bg-color), 0.95);
    background-image: linear-gradient(var(--dropdown-hover-bg-color) 0, var(--dropdown-hover-bg-color) 100%);
}

body[theme] .table,
body[theme] .table-condensed > tbody > tr,
body[theme] .table-hover > tbody > tr,
body[theme] .table-hover > tbody > tr:hover,
body[theme] .table-striped tbody > tr.even,
body[theme] .table-striped tbody > tr.odd,
body[theme] .table-striped tbody > tr.even > td,
body[theme] .table-striped tbody > tr.even > th,
body[theme] .table-striped tbody > tr.odd > td,
body[theme] .table-striped tbody > tr.odd > th,
body[theme] .table-striped tbody > tr.even > td:hover,
body[theme] .table-striped tbody > tr.even > th:hover,
body[theme] .table-striped tbody > tr.odd > td:hover,
body[theme] .table-striped tbody > tr.odd > th:hover,
body[theme] .table-striped tbody > tr.expandRow:hover {
    background-color: transparent !important;
}

body[theme] .content {
    background-color: rgba(var(--content-bg-color), 0.8);
    border: none;
    box-shadow: rgba(0, 0, 0, var(--box-shadow-opacity)) 0 0.625em 2em;
}

body[theme] .table > thead > tr.node-group-tag > th,
body[theme] .table > thead > tr.node-group-tag > th:before,
body[theme] .table > tbody > tr > td:before,
body[theme] .table > tfoot > tr > td:before,
body[theme] .table > thead > tr > td:before,
body[theme] .table > thead > tr.node-group-cell > th:before,
body[theme] .table-hover > tbody > tr:not(.expandRow):hover > td,
body[theme] .table > tbody > tr.expandRow.odd > td:before,
body[theme] .table > tbody > tr.expandRow.even > td:before {
    background-color: unset;
}

body[theme] .progress {
    background-image: none;
    background-color: rgba(var(--progress-bg-color), 0.075);
}

/* Theme Variables */
body[theme="dark"] {
    --bg-color: 0, 0, 0;
    --text-color: #f1f1f1;
    --navbar-bg-color: 0, 0, 0;
    --navbar-brand-color: #ffffff;
    --dropdown-bg-color: 0, 0, 0;
    --dropdown-border-color: #31363b;
    --dropdown-link-color: #c8c3bc;
    --dropdown-hover-bg-color: #1c1d26;
    --navbar-nav-open-color: #f1f1f1;
    --content-bg-color: 28, 29, 38;
    --box-shadow-opacity: 0.5;
    --border-color: 155, 155, 155;
    --progress-bg-color: 255, 255, 255;
}

body[theme="light"] {
    --bg-color: 255, 255, 255;
    --text-color: #333333;
    --navbar-bg-color: 255, 255, 255;
    --navbar-brand-color: #333333;
    --dropdown-bg-color: 255, 255, 255;
    --dropdown-border-color: #cccccc;
    --dropdown-link-color: #666666;
    --dropdown-hover-bg-color: #ffffff;
    --navbar-nav-open-color: #333333;
    --content-bg-color: 255, 255, 255;
    --box-shadow-opacity: 0.1;
    --border-color: 0, 0, 0;
    --progress-bg-color: 0, 0, 0;
}
</style>

<!-- Logo -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var logo = document.querySelector('.navbar-brand img');
        if (logo) {
            logo.src = 'https://logo.png';
        }
    });
</script>

<!-- Favicon -->
<script>
var faviconurl = "https://logo.png";
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = faviconurl;
document.getElementsByTagName('head')[0].appendChild(link);
</script>

<!--统计代码-->
<script async src="https://tongji.com/tongji.js"></script>

不喜欢用Bing壁纸的话，可以替换成你自己的壁纸。你也可以自行修改全局字体，替换成你自己喜欢的字体。

修改后的自定义代码完美实现了明亮和暗黑模式下的半透明美化，且加入了Logo和Favicon的替换代码，可以自行修改默认菜单栏Logo和标签Favicon，可以说效果基本完美。

具体美化演示效果可参照我的探针：
https://misaka.se/

原文发表在我的博客（转载请注明出处）：
https://misaka.es/archives/39.html