It is copied from others.
The modified effect is as follows:
Custom CSS for the backend:
<style>
/* Screen adaptation */
@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;
}
}
/* Overall icon */
i.icon {
color: #000;
width: 1.2em !important;
}
/* Background image */
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;
}
/* Navigation bar */
.ui.large.menu {
border: 0 !important;
border-radius: 0px !important;
background-color: rgba(29, 29, 29, 0.55) !important;
}
/* Home button */
.ui.menu .active.item {
background-color: transparent !important;
}
/* Dropdown menu in the navigation bar */
.ui.dropdown .menu {
border: 0 !important;
border-radius: 0 !important;
background-color: rgba(29, 29, 29, 0.8) !important;
}
/* Login button */
.nezha-primary-btn {
background-color: transparent !important;
color: #fff !important;
}
/* Large card */
#app .ui.fluid.accordion {
background-color: #3030301f !important;
border-radius: 0.4rem !important;
}
/* Small card */
.ui.four.cards>.card {
border-radius: 0.6rem !important;
background-color: #272526a3 !important;
}
/* Small chicken name */
.status.cards .flag {
margin-right: 0.5rem !important;
}
/* Popup card icon */
.status.cards .header>.info.icon {
margin-right: 0 !important;
}
.nezha-secondary-font {
color: #21ba45 !important;
}
/* Progress bar */
.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;
}
/* Upload and download */
.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;
}
/* Popup card small arrow */
.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;
}
/* Popup card */
.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;
}
/* Service page */
.ui.table {
background: RGB(225, 225, 225, 0.6) !important;
}
.ui.table thead th {
background: transparent !important;
}
/* Service page progress bar */
/* Copyright */
.ui.inverted.segment,
.ui.primary.inverted.segment {
color: #000 !important;
font-weight: bold !important;
background-color: #272526a3 !important;
}
</style>
About the black background and displaying server CPU information effects:
You need to change header.html and menu.html in the template/common/ folder of the Docker container; at the same time, you need to change home.html in the template/theme-default/ folder. The general modification idea is as follows:
<i class="dropdown icon"></i>change to<i class="dropdown icon" style="color:#ffffff"></i>
And
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@change to<font color="#dddddd">@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@</font>
In general, you need to change the text display part to white and change the background and top menu to black.