之前已经基于哪吒监控面板默认主题做了半透明美化，之后我也一直在使用官方主题，文章及代码链接在这里：
https://misaka.es/archives/33.html

前几天哪吒监控的新版本又实现了 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 程序猿来帮我基于官方的版本做一个全局的美化代码了。

以下是和 ChatGPT 大牛讨论半小时的最终成品（已按照我自己的喜好替换掉了官方代码的 Bing 壁纸及默认字体）：

<style>
/* Common Styles */
body[theme]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url(https://image.jpg) 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;
}

/* Mobile Specific Styles */
@media (max-width: 768px) {
    body[theme="light"] .navbar .navbar-toggle {
        background-color: #ffffff;
        border-color: #ffffff;
    }

    body[theme="light"] .navbar .navbar-toggle .icon-bar {
        background-color: #333333;
    }
}
</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 壁纸作为背景，链接地址：
https://imgapi.cn/bing.php

也可以自行修改全局字体，替换成你自己喜欢的字体。

修改后的自定义代码完美实现了明亮和暗黑模式下的半透明美化，且可以自行替换默认 Logo 和 Favicon，可以说效果基本完美。在此感谢 ChatGPT-4o 的辛勤劳动。

2024.08.10 更新

2024.08.09 发布的最新 Nezha 面板 v0.18.7 版本对 server-status 主题进行了更多优化，主题文件已经默认同时适配了深色和浅色模式，并做了一些其它的修改，这样用更少的代码即可实现全局半透明美化效果。

官方详细更新内容及给出的代码页面在这里：
https://github.com/naiba/nezha/pull/405

我也在第一时间对官方的代码进行了优化调整（比如优化官方版本的显示宽度，修改字体等）。这是我修改优化后的代码：

<style>
/* 容器宽度 */
.container-fluid {
  width: 100%;
  max-width: 1280px;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
}

/* 手机端（屏幕宽度小于 1080px）样式 */
@media (max-width: 1080px) {
    .load {
        display: none; /* 隐藏负载列 */
    }
}

/* 背景图片 */
body[theme]::before {
    content: ''; /* 添加 content 属性 */
    background-image: url(https://image.jpg); /* 替换为自己的背景图片链接 */
}

/* 字体设置 */
body[theme] {
    font-family: "Consolas", Arial, Helvetica, sans-serif; /* 修改默认字体 */
}
</style>

<script>
// 默认半透明设置
localStorage.setItem("showGroup", true);
localStorage.setItem('semiTransparent', true);

// Logo & Favicon 设置
document.addEventListener('DOMContentLoaded', function() {
    // Logo
    var logo = document.querySelector('.navbar-brand img');
    if (logo) {
        logo.src = 'https://logo.png'; /* 替换为自己的 Logo 图片链接 */
    }

    // Favicon
    var faviconurl = "https://logo.png"; /* 替换为自己的 Logo 图片链接 */
    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>

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