I followed a senior member here to install the Komari probe; thanks for the tutorial, it’s really convenient and easy to use.
\u003cbr\u003e \u003cbr\u003e
However, official themes are relatively few, so based on my favorite Nezha panel theme, I used AI to apply some beautification effects.
Original Nezha theme:
\u003cbr\u003e \u003cbr\u003e
If you like it, you can grab it yourself by pasting it into the site’s custom header and saving.
Modifications to the Nezha probe: custom font set to Google Noto Sans SC, changed the avatar in the top-right corner, and added random anime backgrounds:
\u003clink rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]\u0026display=swap"\u003e
\u003cstyle\u003e* { font-family: 'Noto Sans SC', sans-serif !important; }\u003c/style\u003e
\u003cscript\u003e
window.ShowNetTransfer = true
window.CustomIllustration = 'https://tuchuangvps.mikumiku.us.kg/fengjin2.gif'
window.CustomBackgroundImage = 'https://cdn.moei.cc/public/img/index.php?type=pc\u0026view=2'
\u003c/script\u003e
\u003cbr\u003e \u003cbr\u003e
AI-generated beautification, frosted glass effects, etc:
\u003cscript\u003e
(function() {
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
/* === General Glass Morphology Cards === */
.rounded-lg.bg-card\\/70,
.bg-card\\/70.p-4.rounded-\\[10px\\],
.server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70 {
position: relative;
overflow: hidden;
border-radius: 1rem;
background: rgba(255,255,255,0.28);
backdrop-filter: blur(16px) saturate(180%) contrast(110%);
-webkit-backdrop-filter: blur(16px) saturate(180%) contrast(110%);
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 6px 24px rgba(0,0,0,0.08), inset 0 0 10px rgba(255,255,255,0.15);
color: #111;
transition: all 0.3s ease;
will-change: backdrop-filter, background, box-shadow;
}
/* Dark mode */
.dark .rounded-lg.bg-card\\/70,
.dark .bg-card\\/70.p-4.rounded-\\[10px\\],
.dark .server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70 {
background: rgba(0,0,0,0.35);
backdrop-filter: blur(18px) saturate(200%) contrast(115%);
-webkit-backdrop-filter: blur(18px) saturate(200%) contrast(115%);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 8px rgba(255,255,255,0.05) inset;
color: #eee;
}
/* Hover: enhanced blur on hover */
.rounded-lg.bg-card\\/70:hover,
.bg-card\\/70.p-4.rounded-\\[10px\\]:hover,
.server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70:hover {
background: rgba(255,255,255,0.32);
backdrop-filter: blur(20px) saturate(180%) contrast(115%);
-webkit-backdrop-filter: blur(20px) saturate(180%) contrast(115%);
box-shadow: 0 12px 36px rgba(0,0,0,0.12), inset 0 0 12px rgba(255,255,255,0.2);
}
.dark .rounded-lg.bg-card\\/70:hover,
.dark .bg-card\\/70.p-4.rounded-\\[10px\\]:hover,
.dark .server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70:hover {
background: rgba(0,0,0,0.38);
backdrop-filter: blur(22px) saturate(200%) contrast(120%);
-webkit-backdrop-filter: blur(22px) saturate(200%) contrast(120%);
box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 0 12px rgba(255,255,255,0.05);
}
/* === Glass blur for options box === */
.scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\] {
position: relative;
background: rgba(255,255,255,0.28);
backdrop-filter: blur(18px) saturate(180%) contrast(110%);
-webkit-backdrop-filter: blur(18px) saturate(180%) contrast(110%);
border-radius: 50px;
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 0 8px rgba(255,255,255,0.12);
transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
will-change: backdrop-filter, background, box-shadow;
}
.dark .scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\] {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(20px) saturate(200%) contrast(115%);
-webkit-backdrop-filter: blur(20px) saturate(200%) contrast(115%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 0 8px rgba(255,255,255,0.05);
}
.scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\]:hover {
background: rgba(255, 255, 255, 0.36);
backdrop-filter: blur(22px) saturate(180%) contrast(115%);
-webkit-backdrop-filter: blur(22px) saturate(180%) contrast(115%);
box-shadow: 0 6px 20px rgba(0,0,0,0.08), inset 0 0 12px rgba(255,255,255,0.18);
}
.dark .scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\]:hover {
background: rgba(0, 0, 0, 0.42);
backdrop-filter: blur(24px) saturate(200%) contrast(120%);
-webkit-backdrop-filter: blur(24px) saturate(200%) contrast(120%);
box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 0 12px rgba(255,255,255,0.05);
}
`;
document.head.appendChild(style);
})();
\u003c/script\u003e
\u003cbr\u003e \u003cbr\u003e
Because everything is done by AI, there are some bugs like this, which is not surprising.
And at times the images are too complex, the text on the frosted glass becomes hard to read; anyway the AI fixes couldn’t get it right, hope the experts can point out any corrections.
不行了，我自己不会代码，全靠AI，后面很多修改AI是修了一个bug多了另一个bug，然后越修问题越多了