写在前面
折腾 OpenList 面板很久，原生默认界面过于朴素，界面单调、按钮辨识度低、没有氛围感，网上大多美化代码要么文字颜色错乱，要么动态背景花里胡哨，改起来一堆 bug。
自己反复调试两套完整美化样式，分别适配喜欢浅色清爽、深色赛博两种需求，无需改页面模板，后台自定义头部直接粘贴就能生效，新手也能一次搞定。
前置操作（必看）
登录你的 OpenList 后台管理页面
左侧菜单栏找到【设置】-【全局】
定位到「自定义头部」文本框
二选一，只粘贴其中一套代码，两套同时使用会样式冲突
粘贴完成点击保存，浏览器按
Ctrl+F5强制清缓存刷新页面
方案一｜浅白金玻璃风（白底黑字，日常长时间使用首选）
风格亮点
整体低饱和浅白基底，毛玻璃卡片质感柔和，所有文字统一黑色，长时间浏览眼睛不会疲劳。
头部边框自带循环渐变霓虹流光，卡片 hover 上浮浮现彩色描边，底层搭配缓慢移动网格 + 浮动光点，氛围感拉但不刺眼。
下载按钮单独做高亮霓虹外圈，白底黑字，再也不会出现文字融合看不清的问题。同时完美兼容面板自带浅色 / 深色切换模式。
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<style>
:root {
--ui-blur: 22px;
--ui-radius: 24px;
/* 白金赛博主色 */
--bg-white: #fafbfc;
--bg-deep: #eef2ff;
--bg-panel: rgba(255, 255, 255, 0.78);
--bg-panel-strong: rgba(255, 255, 255, 0.92);
--bg-card: rgba(255, 255, 255, 0.86);
/* 霓虹渐变 */
--neon-cyan: #00f0ff;
--neon-purple: #a855f7;
--neon-pink: #ff2d7a;
--neon-gold: #ffd700;
/* 文字 */
--text-black: #0f172a;
--text-gray: #64748b;
--text-sub: #334155;
/* 边框与光影 */
--border-soft: rgba(0, 0, 0, 0.06);
--border-glow: rgba(0, 240, 255, 0.35);
--border-strong: rgba(168, 85, 247, 0.45);
--glow-soft:
0 0 10px rgba(0, 240, 255, 0.18),
0 0 22px rgba(168, 85, 247, 0.12);
--glow-medium:
0 0 12px rgba(0, 240, 255, 0.25),
0 0 30px rgba(168, 85, 247, 0.18);
--glow-strong:
0 0 18px rgba(0, 240, 255, 0.35),
0 0 45px rgba(168, 85, 247, 0.25);
--card-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.9);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, p, span, div, a, h1, h2, h3, h4, h5, h6, input, button, textarea, pre, code, label, li, td, th {
font-family: 'LXGW WenKai Mono Screen', 'Maple Mono CN', sans-serif !important;
color: var(--text-black) !important;
}
body {
font-weight: 400;
background-color: var(--bg-white) !important;
background-image: none !important;
margin: 0;
min-height: 100vh;
overflow-x: hidden;
cursor: auto;
}
h1, h2, h3, h4, h5, h6, .title {
font-weight: 700;
letter-spacing: 0.8px;
}
b, strong {
font-weight: 800;
}
.footer {
display: none !important;
}
/* 底层动态粒子网格 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.08) 0 2px, transparent 3px),
radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.08) 0 2px, transparent 3px),
radial-gradient(circle at 40% 80%, rgba(255, 45, 122, 0.06) 0 2px, transparent 3px),
linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
background-size:
180px 180px,
180px 180px,
180px 180px,
24px 24px,
24px 24px;
animation: particleDrift 20s linear infinite;
}
/* 全局流动霓虹光晕 */
body::after {
content: "";
position: fixed;
top: -40%;
left: -30%;
width: 160%;
height: 160%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 25% 35%, rgba(0, 240, 255, 0.32), transparent 45%),
radial-gradient(circle at 75% 25%, rgba(168, 85, 247, 0.28), transparent 48%),
radial-gradient(circle at 50% 85%, rgba(255, 45, 122, 0.22), transparent 50%),
radial-gradient(circle at 10% 90%, rgba(255, 215, 0, 0.18), transparent 50%);
filter: blur(100px);
transform: translateZ(0);
animation: slowFlow 18s ease-in-out infinite alternate;
}
@keyframes slowFlow {
0% {
transform: translate(0, 0) rotate(0deg) translateZ(0);
}
50% {
transform: translate(160px, 100px) rotate(90deg) translateZ(0);
}
100% {
transform: translate(-80px, -60px) rotate(180deg) translateZ(0);
}
}
@keyframes particleDrift {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 24px);
}
}
.body {
position: relative;
z-index: 1;
padding-top: 12px;
}
/* 头部：玻璃拟态霓虹边框 */
.header {
position: relative !important;
backdrop-filter: blur(var(--ui-blur));
-webkit-backdrop-filter: blur(var(--ui-blur));
background: var(--bg-panel-strong) !important;
border: 1px solid transparent;
border-radius: var(--ui-radius);
padding: 18px 24px;
box-shadow: var(--glow-soft);
overflow: unset;
}
.header::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--ui-radius);
background: linear-gradient(
135deg,
var(--neon-cyan),
var(--neon-purple),
var(--neon-pink),
var(--neon-gold)
);
opacity: 0.55;
z-index: -1;
animation: borderShift 6s linear infinite;
}
.header::after {
content: "";
position: absolute;
inset: 1px;
border-radius: calc(var(--ui-radius) - 1px);
background: var(--bg-panel-strong);
z-index: -1;
}
.header .title,
.header h1,
.header h2 {
color: var(--text-black) !important;
text-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
letter-spacing: 1.4px;
font-weight: 800;
}
.header a {
border: 1px solid rgba(0, 240, 255, 0.25);
color: var(--text-sub) !important;
padding: 10px 18px;
margin: 0 6px;
text-decoration: none;
background: rgba(255, 255, 255, 0.6);
border-radius: 999px;
transition: 0.25s ease;
font-size: 14px;
}
.header a:hover {
color: var(--text-black) !important;
border-color: var(--neon-cyan);
background: rgba(0, 240, 255, 0.12);
box-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}
/* 侧边导航 */
.body > .nav {
position: relative;
backdrop-filter: blur(var(--ui-blur));
-webkit-backdrop-filter: blur(var(--ui-blur));
border-radius: var(--ui-radius);
background: var(--bg-panel) !important;
border: 1px solid var(--border-soft);
box-shadow: var(--glow-soft);
padding: 16px;
overflow: hidden;
}
.body > .nav::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 240, 255, 0.08),
rgba(168, 85, 247, 0.08)
);
opacity: 0.6;
pointer-events: none;
}
.body > .nav::after {
display: none;
}
.body > .nav a {
border: 1px solid transparent;
padding: 12px 16px;
border-radius: 16px;
transition: 0.25s ease;
color: var(--text-sub) !important;
font-size: 14px;
display: block;
margin: 6px 0;
position: relative;
z-index: 1;
}
.body > .nav a:hover {
color: var(--text-black) !important;
border-color: var(--border-strong);
background: rgba(168, 85, 247, 0.12);
box-shadow: 0 0 16px rgba(168, 85, 247, 0.45);
}
/* 文件卡片 / 内容容器 */
.obj-box,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css,
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css,
.hope-c-PJLV-iSMXDf-css {
backdrop-filter: blur(var(--ui-blur));
-webkit-backdrop-filter: blur(var(--ui-blur));
border-radius: var(--ui-radius);
border: 1px solid var(--border-soft);
background: var(--bg-card) !important;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.obj-box::before,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css::before,
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css::before,
.hope-c-PJLV-iSMXDf-css::before {
content: "";
position: absolute;
inset: -2px;
border-radius: var(--ui-radius);
background: linear-gradient(
135deg,
transparent,
rgba(0, 240, 255, 0.35),
rgba(168, 85, 247, 0.35),
transparent
);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.obj-box:hover::before,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css:hover::before,
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css:hover::before,
.hope-c-PJLV-iSMXDf-css:hover::before {
opacity: 1;
}
.obj-box:hover,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css:hover,
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css:hover,
.hope-c-PJLV-iSMXDf-css:hover {
border-color: var(--border-glow);
box-shadow: var(--glow-strong);
transform: translateY(-4px) scale(1.015);
}
/* 圆形头像 / 按钮 */
.hope-c-PJLV-ijgzmFG-css {
backdrop-filter: blur(var(--ui-blur));
border-radius: 50%;
border: 1px solid var(--border-glow);
background: var(--bg-panel-strong) !important;
box-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}
/* 输入框 */
.hope-c-PJLV-iiBaxsN-css,
.hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-c-PJLV-ikEIIxw-css {
backdrop-filter: blur(var(--ui-blur)) !important;
border: 1px solid var(--border-soft);
background: rgba(255, 255, 255, 0.8) !important;
border-radius: 16px;
}
/* 全局按钮 */
button, .hope-c-button {
border: 1px solid var(--border-glow) !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 999px;
transition: 0.25s ease;
font-size: 14px;
position: relative;
overflow: hidden;
color: var(--text-black) !important;
}
button::before,
.hope-c-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(0, 240, 255, 0.18),
rgba(168, 85, 247, 0.18),
transparent
);
transition: 0.5s;
}
button:hover::before,
.hope-c-button:hover::before {
left: 100%;
}
button:hover,
.hope-c-button:hover {
box-shadow: 0 0 18px rgba(0, 240, 255, 0.45);
background: #ffffff !important;
transform: scale(1.05);
}
/* 下载按钮：更醒目的白金霓虹按钮 */
button:contains("下载"),
a:contains("下载") {
background: linear-gradient(
135deg,
#ffffff,
#f8fff8
) !important;
border: 1px solid transparent !important;
color: var(--text-black) !important;
font-weight: 700 !important;
position: relative;
}
button:contains("下载")::before,
a:contains("下载")::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
background: linear-gradient(
135deg,
var(--neon-cyan),
var(--neon-purple),
var(--neon-pink)
);
opacity: 0.65;
z-index: -1;
animation: borderShift 4s linear infinite;
}
button:contains("下载")::after,
a:contains("下载")::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 999px;
background: #ffffff;
z-index: -1;
}
button:contains("下载"):hover,
a:contains("下载"):hover {
transform: scale(1.08);
box-shadow: 0 0 22px rgba(168, 85, 247, 0.55);
}
pre {
border: 1px solid var(--border-soft);
border-radius: var(--ui-radius);
background: rgba(0, 0, 0, 0.06) !important;
}
/* 浅色主题适配 */
.hope-ui-light .body > .nav,
.hope-ui-light .obj-box,
.hope-ui-light .hope-c-PJLV-ikSuVsl-css,
.hope-ui-light .hope-c-PJLV-iSMXDf-css,
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
background-color: rgba(255, 255, 255, 0.82) !important;
}
.hope-ui-light pre {
background-color: rgba(0, 0, 0, 0.08) !important;
}
.hope-ui-light .hope-c-PJLV-iiBaxsN-css,
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-ui-light .hope-c-PJLV-ikEIIxw-css {
background-color: rgba(0, 0, 0, 0.04) !important;
}
/* 深色主题降级为白色科技风 */
.hope-ui-dark .body > .nav,
.hope-ui-dark .obj-box,
.hope-ui-dark .hope-c-PJLV-iiuDLME-css,
.hope-ui-dark .hope-c-PJLV-iSMXDf-css,
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
background-color: rgba(255, 255, 255, 0.78) !important;
}
.hope-ui-dark pre {
background-color: rgba(0, 0, 0, 0.06) !important;
}
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css,
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css {
background-color: rgba(0, 0, 0, 0.04) !important;
}
/* 边框流光动画 */
@keyframes borderShift {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const titles = document.querySelectorAll(".header h1, .header h2, .header .title");
titles.forEach(el => el.removeAttribute("data-cyber-text"));
});
</script>可自行微调地方
打开代码最顶部:root变量区，修改对应数值即可：
ui-blur：毛玻璃模糊程度，数值越大朦胧感越强
ui-radius：卡片、导航圆角大小
neon-cyan/neon-purple 等：霓虹灯光颜色，可替换任意色值
glow 系列参数：控制卡片、按钮发光明暗
动画内数字：数值调大，背景光流动速度变慢
方案二｜深色赛博风（深空底白字，氛围感拉满）
风格亮点
深空深色页面底色，半透深色玻璃卡片，全局文字纯白色，青紫色大范围模糊流动光晕，标准赛博朋克视觉。
简化冗余特效，动画做 GPU 加速，低配浏览器也不会卡顿。卡片悬浮轻微上浮并外发光，下载按钮纯白底色 + 黑色文字，在深色界面中格外醒目，区分普通按钮。
底层静态网格搭配缓慢漂移大光晕，不会遮挡页面图标、操作按钮，解决大部分美化背景覆盖控件的通病。
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<style>
:root {
--ui-blur: 18px;
--ui-radius: 20px;
--main-cyan: #00e5ff;
--main-purple: #9d2fff;
--main-coral: #ff3d88;
--soft-glow: 0 0 10px rgba(0,229,255,0.2), 0 0 22px rgba(157,47,255,0.12);
--strong-glow: 0 0 16px rgba(0,229,255,0.35), 0 0 40px rgba(157,47,255,0.2);
--text-white: #ffffff;
--text-sub: #c0d4f0;
--page-bg: #040614;
--panel-dark: rgba(12, 16, 36, 0.82);
--panel-light: rgba(22, 26, 48, 0.62);
--border-thin: rgba(0, 229, 255, 0.16);
--border-bright: rgba(0, 229, 255, 0.32);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, p, span, div, a, h1, h2, h3, h4, h5, h6, input, button, textarea, pre, code, label, li, td, th {
font-family: 'LXGW WenKai Mono Screen', 'Maple Mono CN', sans-serif !important;
color: var(--text-white) !important;
}
body {
font-weight: 400;
background-color: var(--page-bg) !important;
background-image: none !important;
margin: 0;
min-height: 100vh;
overflow-x: hidden;
cursor: auto;
}
h1, h2, h3, h4, h5, h6, .title {
font-weight: 600;
letter-spacing: 0.6px;
}
b, strong {
font-weight: 700;
}
.footer {
display: none !important;
}
/* 底层网格背景 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
background-size: 32px 32px;
}
/* 全局流动渐变光晕【GPU加速，刷新不静止】 */
body::after {
content: "";
position: fixed;
top: -30%;
left: -20%;
width: 140%;
height: 140%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 60% 40%, rgba(157,47,255,0.3), transparent 45%),
radial-gradient(circle at 30% 70%, rgba(0,229,255,0.22), transparent 50%);
filter: blur(90px);
transform: translateZ(0);
animation: slow-flow 16s linear infinite;
animation-play-state: running;
}
@keyframes slow-flow {
0% { transform: translate(0,0) rotate(0deg) translateZ(0); }
50% { transform: translate(120px,80px) rotate(180deg) translateZ(0); }
100% { transform: translate(0,0) rotate(360deg) translateZ(0); }
}
.body {
position: relative;
z-index: 1;
padding-top: 12px;
}
/* 头部导航容器 */
.header {
position: relative !important;
backdrop-filter: blur(var(--ui-blur));
-webkit-backdrop-filter: blur(var(--ui-blur));
background: var(--panel-dark) !important;
border: 1px solid var(--border-thin);
border-radius: var(--ui-radius);
padding: 16px 22px;
box-shadow: var(--soft-glow);
overflow: unset;
}
.header::before, .header h1::before, .header h1::after {
display: none !important;
}
.header .title, .header h1, .header h2 {
color: var(--text-white) !important;
text-shadow: 0 0 8px rgba(0,229,255,0.25);
letter-spacing: 1.2px;
}
.header a {
border: 1px solid transparent;
color: var(--text-sub) !important;
padding: 9px 16px;
margin: 0 6px;
text-decoration: none;
background: rgba(255,255,255,0.03);
border-radius: 999px;
transition: 0.22s ease;
font-size: 14px;
}
.header a:hover {
color: var(--text-white) !important;
border-color: var(--main-cyan);
background: rgba(0,229,255,0.09);
box-shadow: 0 0 14px rgba(0,229,255,0.38);
}
/* 侧边导航栏 */
.body > .nav {
position: relative;
backdrop-filter: blur(var(--ui-blur));
-webkit-backdrop-filter: blur(var(--ui-blur));
border-radius: var(--ui-radius);
background: var(--panel-light) !important;
border: 1px solid var(--border-thin);
box-shadow: var(--soft-glow);
padding: 14px;
}
.body > .nav::after {
display: none;
}
.body > .nav a {
border: 1px solid transparent;
padding: 11px 14px;
border-radius: 14px;
transition: 0.22s ease;
color: var(--text-sub) !important;
font-size: 14px;
display: block;
margin: 4px 0;
}
.body > .nav a:hover {
color: var(--text-white) !important;
border-color: var(--main-purple);
background: rgba(157,47,255,0.09);
box-shadow: 0 0 14px rgba(157,47,255,0.36);
}
/* 文件卡片容器 */
.obj-box,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css,
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css,
.hope-c-PJLV-iSMXDf-css {
backdrop-filter: blur(var(--ui-blur));
-webkit-backdrop-filter: blur(var(--ui-blur));
border-radius: var(--ui-radius);
border: 1px solid var(--border-thin);
background: var(--panel-light) !important;
box-shadow: var(--soft-glow);
transition: all 0.28s ease;
}
.obj-box:hover,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css:hover,
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css:hover,
.hope-c-PJLV-iSMXDf-css:hover {
border-color: var(--border-bright);
box-shadow: var(--strong-glow);
transform: translateY(-2px);
}
/* 圆形头像组件 */
.hope-c-PJLV-ijgzmFG-css {
backdrop-filter: blur(var(--ui-blur));
border-radius: 50%;
border: 1px solid var(--border-bright);
background: var(--panel-dark) !important;
box-shadow: 0 0 16px rgba(0,229,255,0.28);
}
/* 输入框样式 */
.hope-c-PJLV-iiBaxsN-css,
.hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-c-PJLV-ikEIIxw-css {
backdrop-filter: blur(var(--ui-blur)) !important;
-webkit-backdrop-filter: blur(var(--ui-blur)) !important;
border: 1px solid var(--border-thin);
background: rgba(255,255,255,0.03) !important;
border-radius: 14px;
}
/* 通用按钮 */
button, .hope-c-button {
border: 1px solid var(--border-bright) !important;
background: transparent !important;
border-radius: 999px;
transition: 0.22s ease;
font-size: 14px;
position: relative;
overflow: hidden;
}
button::before, .hope-c-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,229,255,0.18), transparent);
transition: 0.4s;
}
button:hover::before, .hope-c-button:hover::before {
left: 100%;
}
button:hover, .hope-c-button:hover {
box-shadow: 0 0 16px rgba(0,229,255,0.4);
background: rgba(0,229,255,0.06) !important;
}
pre {
border: 1px solid var(--border-thin);
border-radius: var(--ui-radius);
background: rgba(0,0,0,0.22) !important;
}
/* ====================================== */
/* 下载按钮最高权重强制样式，多层覆盖 */
/* ====================================== */
/* 1. 修改按钮背景为纯白色 */
button:contains("下载"),
a:contains("下载") {
background: #ffffff !important;
border: 1px solid #cccccc !important;
}
/* 2. 强制按钮内部所有文字、span、i全部黑色，多层权重 */
button:contains("下载") *,
a:contains("下载") *,
button:contains("下载") span,
a:contains("下载") span,
button:contains("下载") i,
a:contains("下载") i,
button:contains("下载") b,
a:contains("下载") b {
color: #000000 !important;
}
/* hover状态保持白底黑字 */
button:contains("下载"):hover,
a:contains("下载"):hover {
background: #f0f0f0 !important;
}
button:contains("下载"):hover *,
a:contains("下载"):hover * {
color: #000000 !important;
}
/* 浅色主题覆盖 */
.hope-ui-light .body > .nav,
.hope-ui-light .obj-box,
.hope-ui-light .hope-c-PJLV-ikSuVsl-css,
.hope-ui-light .hope-c-PJLV-iSMXDf-css,
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
background-color: rgba(18, 24, 46, 0.68) !important;
}
.hope-ui-light pre {
background-color: rgba(0,0,0,0.28) !important;
}
.hope-ui-light .hope-c-PJLV-iiBaxsN-css,
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-ui-light .hope-c-PJLV-ikEIIxw-css {
background-color: rgba(255,255,255,0.06) !important;
}
/* 深色主题覆盖 */
.hope-ui-dark .body > .nav,
.hope-ui-dark .obj-box,
.hope-ui-dark .hope-c-PJLV-iiuDLME-css,
.hope-ui-dark .hope-c-PJLV-iSMXDf-css,
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
background-color: var(--panel-light) !important;
}
.hope-ui-dark pre {
background-color: transparent !important;
}
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css,
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled,
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css {
background-color: rgba(255,255,255,0.03) !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 清除旧标题多余动画属性
const titles = document.querySelectorAll(".header h1,.header h2,.header .title");
titles.forEach(el => el.removeAttribute("data-cyber-text"));
});
</script>
可自行微调地方
同样在代码:root变量修改参数：
page-bg：页面整体底色，可更换深浅
panel-dark/panel-light：卡片玻璃透明度
border-thin/border-bright：霓虹边框粗细、亮度
slow-flow 动画时长：控制背景光晕移动快慢
常见踩坑解决办法
粘贴样式完全没变化
检查是否点击保存，必须 Ctrl+F5 强制刷新，普通刷新不会清除旧缓存
动态背景完全看不见
完整复制全部代码，不要截断 @keyframes 动画片段，缺失动画会直接失效
下载按钮文字依旧发白看不清
整套代码内置多层！important 权重覆盖原有样式，完整粘贴即可修复，不要删减按钮相关 css
页面图标、按钮被背景盖住
两套代码底层背景层级做了最低限制，只要完整粘贴不会出现遮挡问题
切换面板深浅主题美化失效
代码内置适配 light/dark 类名，切换后刷新页面即可恢复效果
最后小提示
两套风格按需选择，日常办公、长期浏览推荐浅色白金款；追求炫酷、夜间使用推荐深色赛博款。
后续想更换霓虹配色、调节发光强弱，直接修改代码顶部变量，不用大面积改动样式，操作简单。