Previously shared a Komari Nezha theme beautification.
But this theme has some bugs and hasn’t been updated for a long time.
So I found a similar new theme called Next, and re-styled it in the same way.
Original Next theme:
After beautification:
If you like it, you can download and use it yourself.
First, you need to install this theme:
Then set the following on the homepage:
Because this theme comes with different UI, my optimization currently only takes effect for the settings above. Do not fill in the background image at the bottom; filling it here will not be saved to the cloud. The effect of changing the background image is built into the optimization.
A random timestamp has been added to the background image part to solve the problem of the browser calling the cache directly, making refreshes ineffective, and causing the background image not to change for a long time. However, this also has a downside: entering subpages will refresh the background image as well. If you don’t like it, you can modify it yourself.
The code also includes detailed comments added by AI, so you can adjust the details yourself.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]\u0026display=swap">
<script>
window.addEventListener('load', function() {
if (!document.getElementById('custom-dynamic-bg')) {
var bgLayer = document.createElement('div');
bgLayer.id = 'custom-dynamic-bg';
bgLayer.style.position = 'fixed';
bgLayer.style.inset = '0';
bgLayer.style.zIndex = '-9999';
/* ==========================================
🎨 【Global background image setting】 🎨
------------------------------------------
The following line controls the background of the entire page.
Currently using a random anime/scenery wallpaper API.
If you want to replace it with your own fixed image, simply replace the link inside the single quotes ' '!
For example, replace with your own image:
bgLayer.style.backgroundImage = "url('https://your-image-hosting-link.jpg')";
========================================== */
bgLayer.style.backgroundImage = 'url(https://api.neix.in/random/pc?t=' + new Date().getTime() + ')';
bgLayer.style.backgroundSize = 'cover';
bgLayer.style.backgroundPosition = 'center';
document.body.appendChild(bgLayer);
}
});
</script>
<style>
/* ==========================================
【0. Global font & baseline protection】
========================================== */
* { font-family: 'Noto Sans SC', sans-serif !important; }
body { background-color: transparent !important; }
body .bg-background:not(nav) { background-color: transparent !important; }
/* 🎨 【Global wallpaper dim overlay】 */
body::before {
content: ""; position: fixed; inset: 0;
/* Adjust the final 0.35. If you feel the wallpaper is too bright/colorful, you can increase it (e.g., 0.5) to darken the wallpaper; if you want the wallpaper brighter, you can decrease it (e.g., 0.2) */
background-color: rgba(0, 0, 0, 0.35) !important;
z-index: -9998; pointer-events: none;
}
/* ==========================================
【1. Navbar adjustment】
========================================== */
nav.sticky {
/* 🎨 【Navbar background color & opacity】 The trailing 0.55 is the opacity. To make it more transparent, decrease it (e.g., 0.3); to make it darker, increase it (e.g., 0.8) */
background-color: rgba(50, 50, 50, 0.55) !important;
/* 🎨 【Navbar frosted glass blur】 12px; bigger is blurrier, smaller is clearer to reveal wallpaper */
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
nav.sticky .container {
/* 📏 【Navbar height】4.25rem ~ 68px. To make it narrower, change to 3.5rem; to make it wider, change to 5rem */
height: 4.25rem !important;
min-height: 4.25rem !important;
}
/* ==========================================
【2. Main server card tuning】
========================================== */
.text-card-foreground.bg-gradient-to-br.rounded-xl,
div.bg-card:not(button):not(.bg-popover) {
/* 🎨 【Card base color】 This string controls the card's gradient glow. The trailing 0.45 controls the overall glass panel darkness/thickness */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%), rgba(15, 15, 20, 0.45) !important;
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%) !important;
/* 🎨 【Card frosted glass blur】 Default 16px */
backdrop-filter: blur(16px) saturate(100%) !important;
-webkit-backdrop-filter: blur(16px) saturate(100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
/* 🎨 【Card hover shadow】 Control the size and darkness of the shadow under the card */
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5) !important;
color: #ffffff !important;
transition: all 0.3s ease !important;
border-radius: 0.75rem !important;
}
/* Card hover brighten effect */
.text-card-foreground.bg-gradient-to-br.rounded-xl:hover,
div.bg-card:not(button):not(.bg-popover):hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.1) 100%), rgba(25, 25, 30, 0.55) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6) !important;
}
/* ==========================================
【3. Top 5 cards typography】
========================================== */
/* 📏 【First three main data cards: single-line large numbers】 */
.grid .text-2xl {
/* Change the 1.65rem here to control the size of main numbers like time, online count, etc. */
font-size: 1.65rem !important;
line-height: 1.2 !important;
/* 🎨 【Text shadow】0.5 is shadow depth. If you don't want 3D text, you can remove this line. */
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important;
}
.grid .text-xs.font-black {
font-size: 1.2rem !important;
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important;
}
/* 📏 【Next two secondary data cards: traffic / speed two-line data】 */
.grid .text-2xl .flex-col div {
/* Change the 1.05rem here to control the font size of the two lines of data */
font-size: 1.05rem !important;
line-height: 1.4 !important;
}
.grid .text-xs.font-black .flex-col div {
font-size: 0.85rem !important;
line-height: 1.3 !important;
}
/* ==========================================
【4. 🔥 Flat crystal bar progress bar 🔥】
========================================== */
/* Lock the percentage text above the progress bar to white */
.space-y-1 > div.text-sm.font-bold {
color: rgba(255, 255, 255, 0.95) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
/* Progress bar track (base groove) */
div[role="progressbar"] {
background-color: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
/* 📏 【Progress bar thickness】 Make larger (e.g., 0.5rem) to thicken, smaller (e.g., 0.2rem) to thin */
height: 0.35rem !important;
border-radius: 9999px !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Progress bar fill (acrylic feel) */
div[role="progressbar"] > div {
/* 🎨 【Progress bar opacity】0.85 gives color while showing through the bottom; 1 is solid opaque */
opacity: 0.85 !important;
border-radius: 9999px !important;
box-shadow: none !important;
border-right: none !important;
background-color: #4ade80 !important;
transition: all 0.5s ease !important;
}
/* 🎨 【Smart color change: medium usage (50% - 79%)】 default yellow-orange */
div[role="progressbar"] > div[style*="translateX(-4"],
div[role="progressbar"] > div[style*="translateX(-3"],
div[role="progressbar"] > div[style*="translateX(-2"] {
/* You can replace #fbbf24 with other hex colors, e.g., orange #f97316 */
background-color: #fbbf24 !important;
}
/* 🎨 【Smart color change: high usage (80% - 100%)】 default red alert */
div[role="progressbar"] > div[style*="translateX(-1"],
div[role="progressbar"] > div[style*="translateX(-0"],
div[role="progressbar"] > div[style*="translateX(0"] {
/* Red color code #f87171 */
background-color: #f87171 !important;
}
/* 🎨 【Smart color change: low usage (0% - 49%)】 revert to light green to avoid misjudgment */
div[role="progressbar"] > div[style*="translateX(-100"] {
background-color: #4ade80 !important;
}
/* ==========================================
【5. Various small widget & button fixes】
========================================== */
/* Normal button base (search box, grid toggle, etc.) */
button[data-slot="button"]:not(.size-9):not(.h-8),
button[aria-haspopup="dialog"]:not(.size-9):not(.h-8),
button.border:not([role="tab"]):not(.rounded-full):not(.size-9):not(.h-8),
input[placeholder*="搜索"], .bg-muted\/50.p-1.rounded-lg, div[role="tablist"] {
background: rgba(0, 0, 0, 0.25) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
color: rgba(255, 255, 255, 0.8) !important;
}
/* Active tab state */
button[role="tab"][data-state="active"], .bg-muted\/50.p-1.rounded-lg button.bg-card {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
button[role="tab"][data-state="inactive"], .bg-muted\/50.p-1.rounded-lg button:not(.bg-card) {
background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; border: 1px solid transparent !important;
}
/* Status indicator green dot / red dot */
.text-card-foreground .rounded-full.bg-green-600 {
background-color: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; color: #4ade80 !important;
}
.text-card-foreground .rounded-full.bg-red-600, .text-card-foreground .rounded-full.bg-destructive {
background-color: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important;
}
/* 🎨 【Popover panel background】 */
.bg-popover, div[role="dialog"] {
/* Control the darkness and blur of pop-up menus */
background: rgba(30, 30, 35, 0.85) !important;
backdrop-filter: blur(24px) saturate(120%) !important;
-webkit-backdrop-filter: blur(24px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
border-radius: 0.75rem !important;
color: #ffffff !important;
}
/* 🎨 【Toggle switch color】 */
button[role="switch"] span {
background-color: #ffffff !important; /* color of the round knob inside the switch */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
button[role="switch"][data-state="unchecked"] {
background-color: rgba(255, 255, 255, 0.15) !important; /* track color when off */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
button[role="switch"][data-state="checked"] {
/* track color when on, default green. You can change to another color */
background-color: #4ade80 !important;
border-color: #4ade80 !important;
}
</style>
