TyrEamon

论我家的猫不会变成猫娘这档事明明一点也不科学！我家猫会后空翻(ฅ´ω`ฅ) ------------------------------------------------ Curated, as you see | : )

文章数

7

总字数

0.7w

访问量

0

访客数

0

1436 字

7 分钟

Alist/OpenList 美化教程：自定义头部快速上手（背景/毛玻璃/切换按钮）

一篇实用向 OpenList 美化教程：通过自定义头部注入 CSS/JS，实现背景图、毛玻璃面板和日夜切换按钮，重点讲怎么用。

2026-02-23

0 次

0 人

切换按钮）#

这篇就写一个简单实用版：用 Alist/OpenList 后台的 “自定义头部（Customize head）”，做背景图、毛玻璃和切换按钮。

重点放在怎么使用，优化过程只简单带过。

最终效果（这篇能做什么）#

白天/夜间模式不同背景图
列表/卡片毛玻璃效果
左下角手动切换按钮
一些细节样式（导航、代码块、底部渐变）

效果图占位-白天模式效果图占位-夜间模式

使用前准备#

你需要准备：

一份主题片段文件（openlist-Theme.html）
背景图链接（推荐 4 张）

推荐准备 4 张图，分别对应：

白天横屏
白天竖屏
夜间横屏
夜间竖屏

没有 4 张也没关系，先用 2 张（白天/夜间各一张）也能用。

使用方法（重点）#

打开 OpenList 后台
进入 设置 -> 全局 -> 自定义头部（Customize head）
打开 openlist-Theme.html
把里面的背景图 url("...") 换成你自己的图片直链
将整份内容复制到 自定义头部
保存并刷新页面

需要替换的地方（背景图）#

在 <style> 里主要改这 4 处：

.hope-ui-light 的横屏背景
.hope-ui-light 里的竖屏背景（@media (max-aspect-ratio:1)）
.hope-ui-dark 的横屏背景
.hope-ui-dark 里的竖屏背景（@media (max-aspect-ratio:1)）

简单说就是把原来的：

1
background-image: url("你的图片链接");

替换成自己的图床/网盘直链。

只想换背景，不想要按钮？#

可以。

你只保留 <style>...</style> 部分，把按钮相关的 <script>...</script> 去掉就行。这样更稳，也更适合只做静态美化。

完整代码（可直接复制）#

下面这份就是可以直接粘贴到自定义头部的版本（记得先把 4 个背景图链接替换成你自己的）。

GitHub 仓库（可直接取最新版本）：

https://github.com/TyrEamon/openlist-Theme

背景url修改示例（确认格式没问题）：

1
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
2
<style>
3
.hope-ui-light { /* 白天背景(电脑端&手机端) */ }     /* 日：url.1=横屏 url.2=竖屏 */
4
.hope-ui-dark  { /* 夜间背景(电脑端&手机端) */ }     /* 夜：url.1=横屏 url.2=竖屏 */
5
</style>
6
<script>
7
// 日夜切换按钮逻辑（已做移动端误触修复）
8
</script>

点击展开完整代码（可直接复制）

1
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
2
<style> .notify-render .hope-close-button {
3
    display:none
4
}
5
.hope-ui-light {
6
    background-image:url("https://pan.0106010.xyz/file/openlist-Theme/1771838991109_130584045_p0.webp") !important;
7
    @media (max-aspect-ratio:1) {
8
        background-image:url("https://pan.0106010.xyz/file/openlist-Theme/1771838999793_file_6179.webp") !important;
9
    }
10
    background-repeat:no-repeat;
11
    background-size:cover;
12
    background-attachment:fixed;
13
    background-position-x:center
14
}
15
.hope-ui-dark {
16
     background-image:url("https://pan.0106010.xyz/file/openlist-Theme/1771839006594_openlist1.webp") !important;
17
    @media (max-aspect-ratio:1) {
18
        background-image:url("https://pan.0106010.xyz/file/openlist-Theme/1771838992434_1673371139204.webp") !important;
19
    }
20
    background-repeat:no-repeat;
21
    background-size:cover;
22
    background-attachment:fixed;
23
    background-position-x:center
24
}
25
.hope-ui-light .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
26
    backdrop-filter: blur(1px);
27
    background-color:rgba(255,255,255,0.7) !important
28
}
29
.hope-ui-dark .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
30
    backdrop-filter: blur(1px);
31
    background-color:rgb(0 0 0 / 50%) !important
32
}
33
.hope-ui-light .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
34
    backdrop-filter: blur(1px);
35
    background-color:rgba(255,255,255,0.5) !important
36
}
37
.hope-ui-dark .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
38
    backdrop-filter: blur(1px);
39
    background-color:rgb(0 0 0 / 50%) !important
40
}
41
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
42
    backdrop-filter: blur(1px);
43
    background-color:rgba(255,255,255,0.5) !important
44
}
45
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
46
    backdrop-filter: blur(1px);
47
    background-color:rgb(0 0 0 / 50%) !important
48
}
49
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
50
    backdrop-filter: blur(1px);
51
    background-color:rgba(255,255,255,0.5) !important
52
}
53
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
54
    backdrop-filter: blur(1px);
55
    background-color:rgb(0 0 0 / 50%) !important
56
}
57
.hope-ui-light pre {
58
    background-color:rgba(255,255,255,0.1) !important
59
}
60
.hope-ui-dark pre {
61
    background-color:rgba(255,255,255,0) !important
62
}
63
.hope-ui-light .hope-c-PJLV-ieGWMbI-css {
64
    backdrop-filter: blur(1px);
65
    background:rgba(255,255,255,0.5) !important
66
}
67
.hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
68
    backdrop-filter: blur(1px);
69
    background-color:rgb(0 0 0 / 50%) !important
70
}
71
.hope-ui-light .hope-c-PJLV-ihVEsOa-css {
72
    backdrop-filter: blur(1px);
73
    background:rgba(255,255,255,0.5) !important
74
}
75
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
76
    backdrop-filter: blur(1px);
77
    background-color:rgb(0 0 0 / 50%) !important
78
}
79
#root > .header {
80
    background:linear-gradient(180deg,rgba(255,255,255,0.3),rgba(255,255,255,0))
81
}
82
.footerd {
83
    width: 100vw;
84
    height: 5vh;
85
    position: fixed;
86
    bottom: 0;
87
    left: 0;
88
    background:linear-gradient(0deg,rgba(255,255,255,0.3),rgba(255,255,255,0))
89
}
90
.hope-ui-light .body > .nav {
91
    background-color:rgba(255,255,255,0.7);
92
    border-radius:var(--hope-radii-xl)
93
}
94
.hope-ui-dark .body > .nav {
95
    background-color:rgb(0 0 0 / 50%);
96
    border-radius:var(--hope-radii-xl)
97
}
98
.body > .nav::after {
99
    display:none
100
}
101
dibu {
102
    border-top:0px;
103
    position:absolute;
104
    bottom:0;
105
    width:100%;
106
    margin:0px;
107
    padding:0px
108
}
109
.App {
110
    min-height:85vh
111
}
112
.table {
113
    margin:auto
114
}
115
#canvas-basic {
116
    position:fixed;
117
    display:block;
118
    width:100%;
119
    height:100%;
120
    top:0;
121
    right:0;
122
    bottom:0;
123
    left:0;
124
    z-index:-999
125
}
126
.hope-image {
127
    filter:drop-shadow(2px 4px 8px rgb(255,255,255))
128
}
129
button#hope-menu-daynight-switch-trigger {
130
    position: fixed;
131
    bottom: 7.5vh;
132
    left: 2.5vw;
133
    z-index: 114;
134
    size: var(--hope-sizes-8);
135
}
136

137
/* fallback panel colors when OpenList hash classes change */
138
.hope-ui-light .obj-box {
139
    background-color: rgba(255,255,255,0.65) !important;
140
}
141
.hope-ui-dark .obj-box {
142
    background-color: rgb(0 0 0 / 50%) !important;
143
}
144
</style>
145
<script>
146
    document.write(`<div class="footerd"></div>`);
147
</script>
148
<!-- 日夜主题切换按钮 | Day/Night Switch Button -->
149
<script>
150
    function unlockScroll() {
151
        var docEl = document.documentElement;
152
        var body = document.body;
153
        if (docEl) {
154
            docEl.style.overflow = "";
155
            docEl.style.overflowY = "";
156
            docEl.style.position = "";
157
            docEl.style.width = "";
158
        }
159
        if (body) {
160
            body.style.overflow = "";
161
            body.style.overflowY = "";
162
            body.style.position = "";
163
            body.style.width = "";
164
            body.style.paddingRight = "";
165
            body.style.touchAction = "";
166
        }
167
    }
168

169
    function cleanupThemeSwitchUi() {
170
        if (document.querySelectorAll) {
171
            var leftovers = document.querySelectorAll(".hope-drawer__overlay, .hope-drawer__content-container, .hope-modal__overlay");
172
            for (var i = 0; i < leftovers.length; i++) {
173
                leftovers[i].style.display = "none";
174
                leftovers[i].style.pointerEvents = "none";
175
            }
176
        }
177

178
        unlockScroll();
179
        setTimeout(unlockScroll, 120);
180
        setTimeout(unlockScroll, 320);
181
    }
182

183
    function getThemeTargets() {
184
        if (!document.querySelectorAll) return [];
185
        return document.querySelectorAll(".hope-ui-light, .hope-ui-dark");
186
    }
187

188
    function daynightswitch(e) {
189
        if (e) {
190
            if (e.preventDefault) e.preventDefault();
191
            if (e.stopPropagation) e.stopPropagation();
192
            if (e.stopImmediatePropagation) e.stopImmediatePropagation();
193
        }
194

195
        var targets = getThemeTargets();
196
        if (!targets.length) return;
197

198
        var toDark = false;
199
        for (var i = 0; i < targets.length; i++) {
200
            if (targets[i].classList.contains("hope-ui-light")) {
201
                toDark = true;
202
                break;
203
            }
204
        }
205

206
        for (var j = 0; j < targets.length; j++) {
207
            targets[j].classList.remove("hope-ui-light", "hope-ui-dark");
208
            targets[j].classList.add(toDark ? "hope-ui-dark" : "hope-ui-light");
209
        }
210

211
        cleanupThemeSwitchUi();
212
    }
213

214
    if (!document.getElementById("hope-menu-daynight-switch-trigger")) {
215
        document.write(`<button
216
    class="hope-c-bvjbhC hope-c-PJLV hope-c-PJLV-ieTGfmR-css hope-icon-button hope-button hope-c-ivMHWx hope-c-ivMHWx-kcPQpq-variant-subtle hope-c-ivMHWx-cEknLI-size-lg hope-c-ivMHWx-dvmlqS-cv hope-c-ivMHWx-hZistB-cv hope-c-PJLV hope-c-PJLV-iikaotv-css"
217
    type="button" role="button" id="hope-menu-daynight-switch-trigger" aria-label="switch layout"><svg t="1733225100292"
218
        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4397"
219
        xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
220
        <path
221
            d="M512 0c282.7776 0 512 229.2224 512 512s-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0z m0 51.2a460.8 460.8 0 0 0-13.568 921.3952L512 972.8v-256a204.8 204.8 0 1 0 0-409.6V51.2z m0 256v409.6a204.8 204.8 0 1 1 0-409.6z"
222
            fill="currentColor" p-id="4398"></path>
223
    </svg></button>`);
224
    }
225

226
    var dayNightBtn = document.getElementById("hope-menu-daynight-switch-trigger");
227
    if (dayNightBtn && !dayNightBtn.dataset.bound) {
228
        dayNightBtn.dataset.bound = "1";
229
        dayNightBtn.addEventListener("click", daynightswitch, true);
230
    }
231

232
</script>