【技巧】哪吒面板後台美化

是抄別人的。
修改後的效果如下：
後台自定義 CSS：
<style>

/* 屏幕適配 */
@media only screen and (min-width: 1200px) {
    .ui.container {
        width: 90% !important;
    }
}

@media only screen and (max-width: 767px) {

    .ui.card>.content>.header:not(.ui),
    .ui.cards>.card>.content>.header:not(.ui) {
        margin-top: 0.4em !important;
    }
}

/* 整體圖標 */
i.icon {
    color: #000;
    width: 1.2em !important;
}

/* 背景圖片 */
body {
    content: " " !important;
    background: fixed !important;
    z-index: -1 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-image: url(https://s1.locimg.com/2023/04/25/4d8a5ab26c352.jpg) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* 導航欄 */
.ui.large.menu {
    border: 0 !important;
    border-radius: 0px !important;
    background-color: rgba(29, 29, 29, 0.55) !important;
}

/* 首頁按鈕 */
.ui.menu .active.item {
    background-color: transparent !important;
}

/* 導航欄下拉框 */
.ui.dropdown .menu {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: rgba(29, 29, 29, 0.8) !important;
}

/* 登錄按鈕 */
.nezha-primary-btn {
    background-color: transparent !important;
    color: #fff !important;
}

/* 大卡片 */
#app .ui.fluid.accordion {
    background-color: #3030301f !important;
    border-radius: 0.4rem !important;
}

/* 小卡片 */
.ui.four.cards>.card {
    border-radius: 0.6rem !important;
    background-color: #272526a3 !important;
}

/* 小雞名 */
.status.cards .flag {
    margin-right: 0.5rem !important;
}

/* 彈出卡片圖標 */
.status.cards .header>.info.icon {
    margin-right: 0 !important;
}

.nezha-secondary-font {
    color: #21ba45 !important;
}

/* 進度條 */
.ui.progress {
    border-radius: 50rem !important;
}

.ui.progress .bar {
    min-width: 1.8em !important;
    border-radius: 15px !important;
    line-height: 1.65em !important;
    color: black
}

.ui.fine.progress>.bar {
    background-color: #ba45ac !important;
}

.ui.progress>.bar {
    background-color: #000 !important;
}

.ui.progress.fine .bar {
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    !important;
}

.ui.progress.warning .bar {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    !important;
}

.ui.progress.error .bar {
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    important;
}

.ui.progress.offline .bar {
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    !important;
}

/* 上傳下載 */
.status.cards .outline.icon {
    margin-right: 1px !important;
}

i.arrow.alternate.circle.down.outline.icon {
    color: #21ba45 !important;
}

i.arrow.alternate.circle.up.outline.icon {
    color: red !important;
}

/* 彈出卡片小箭頭 */
.ui.right.center.popup {
    margin: -3px 0 0 0.914286em !important;
    -webkit-transform-origin: left 50% !important;
    transform-origin: left 50% !important;
}

.ui.bottom.left.popup {
    margin-left: 1px !important;
    margin-top: 3px !important;
}

.ui.top.left.popup {
    margin-left: 0 !important;
    margin-bottom: 10px !important;
}

.ui.top.right.popup {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
}

.ui.left.center.popup {
    margin: -3px .91428571em 0 0 !important;
    -webkit-transform-origin: right 50% !important;
    transform-origin: right 50% !important;
}

.ui.right.center.popup:before,
.ui.left.center.popup:before {
    border: 0px solid #272526eb !important;
    background: #272526eb !important;
}

.ui.top.popup:before {
    border-color: #272526eb transparent transparent !important;
}

.ui.popup:before {
    border-color: #272526eb transparent transparent !important;
}

.ui.bottom.left.popup:before {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    border-color: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.ui.bottom.right.popup:before {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    border-color: #272526eb transparent transparent !important;
    background: #272526eb !important -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.ui.top.left.popup:before {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    border-color: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.ui.top.right.popup:before {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    border-color: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.ui.left.center.popup:before {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    border-color: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* 彈出卡片 */
.status.cards .ui.content.popup {
    min-width: 20rem !important;
    line-height: 2rem !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
    background-color: #272526eb !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.ui.content {
    margin: 0 !important;
    padding: 1em !important;
}

/* 服務頁 */
.ui.table {
    background: RGB(225, 225, 225, 0.6) !important;
}

.ui.table thead th {
    background: transparent !important;
}

/* 服務頁進度條 */

/* 版權 */
.ui.inverted.segment,
.ui.primary.inverted.segment {
    color: #000 !important;
    font-weight: bold !important;
    background-color: #272526a3 !important;
}

</style>
關於黑色背景與顯示伺服器 CPU 信息顯示等效果：
需更改 Docker 容器中template/common/文件夾中的header.html與menu.html；同時需要更改template/theme-default/文件夾中的home.html。大致修改思路如下：
 修改為 
以及
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@ 修改為 @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
大致就是需要將文字顯示部分更改為白色、將背景與頂部菜單更改為黑色。