因为本人 比较 非常喜欢毛玻璃效果，所以给 Alist 几乎所有的 UI 都加了毛玻璃

大部分是我自己写的的，注释齐全，你也可以自己修改

我相信你知道怎么用这玩意 把它复制进全局-->自定义头部里，然后点最下面的保存

效果预览：https://files.b84f2246.top/

为了保护各位和我自己的眼睛，文件编辑器就不加了，不是因为我不会改

由于部分元素的标签在日/夜间模式下相同，我使用以下js来防止冲突

1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function () {
    var darkMode = document.getElementsByClassName('hope-ui-dark').length;
    var link = document.createElement("link");
    if (darkMode === "0") {
        link.href = "https://assets.b84f2246.top/css/hope-ui-light.css";
    } else if (darkMode === "1") {
        link.href = "https://assets.b84f2246.top/css/hope-ui-dark.css";
    }
    link.rel = "stylesheet";
    link.type = "text/css";
    document.head.appendChild(link);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<style>
    /* 日间模式 */
    /*背景图*/
    .hope-ui-light {
        background-image: url("背景图 URL") !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /*搜索主体*/
    .hope-ui-light .hope-c-PJLV-iiBaxsN-css {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*搜索栏*/
    .hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*搜索按钮*/
    .hope-ui-light .hope-c-PJLV-ikEIIxw-css {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        padding: var(--hope-space-1) !important;
    }

    /*文档预览*/
    .hope-ui-light pre {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*右键菜单*/
    .solid-contextmenu.solid-contextmenu__theme--light {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*文件列表*/
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*路径栏*/
    .nav.hope-breadcrumb.hope-c-hrsMRY.hope-c-PJLV.hope-c-PJLV-idaeksS-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*隐藏搜索栏键盘图*/
    .hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {
        display: none !important;
    }

    /* 搜索框*/
    /*.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijMezfq-css{
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    /*视图切换按钮*/
    /* .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(255, 255, 255, 0.3) !important;
    } */

    /*视图切换菜单*/
    .hope-menu__content.hope-c-zbPwS.hope-c-PJLV.hope-c-PJLV-iSMXDf-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*本地设置*/
    .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*右侧工具栏*/
    .left-toolbar.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*左侧栏*/
    .hope-c-PJLV.hope-c-PJLV-ieGWMbI-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*顶栏*/
    .header.hope-center.hope-c-jKOUQW.hope-c-PJLV.hope-c-PJLV-ikaMhsQ-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*文件上传*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-bVSmjq-size-xs.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-jJyNvw-kvuHwT-size-md.hope-c-jJyNvw-fMWTjf-size-lg.hope-c-jJyNvw-FhbsI-size-xl.hope-c-jJyNvw-jNxcuY-size-2xl.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*元信息*/
    .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*新建文件，离线下载*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-jcDqLc-size-md.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*提示框*/
    .hope-modal__header.hope-c-iVFFms.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*重命名*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-bVSmjq-size-xs.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-jJyNvw-kvuHwT-size-md.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*本地设置*/
    .hope-drawer__content.hope-c-hOYTCS.hope-c-iPJpIL.hope-c-iPJpIL-bVSmjq-size-xs.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*播放列表（正在播放）*/
    .aplayer-list-light {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*音频播放/下载选择*/
    .hope-select__content.hope-c-XJURY.hope-c-PJLV.hope-c-PJLV-ijpihTg-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*文件夹选择*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-fuVnmB-size-xl.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*复选框*/
    .hope-checkbox__control.hope-c-mHASU.hope-c-iojPKw.hope-c-mHASU-byiOue-variant-filled.hope-c-mHASU-kFfbLQ-colorScheme-info.hope-c-mHASU-ixAowb-size-md.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*复选框工具栏*/
    .hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igOZEoG-css {
        background-color: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<style>
    /* 夜间模式 */
    /*背景图*/
    .hope-ui-dark {
        background-image: url("https://assets.b84f2246.top/img/bg/2.jpg") !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /*搜索主体*/
    .hope-ui-dark .hope-c-PJLV-iiBaxsN-css {
        background-color: rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*搜索栏*/
    .hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled {
        background-color: rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*搜索按钮*/
    .hope-ui-dark .hope-c-PJLV-ikEIIxw-css {
        background-color: rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        padding: var(--hope-space-1) !important;
    }

    /*文档预览*/
    .hope-ui-dark pre {
        background-color: rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*右键菜单*/
    .solid-contextmenu.solid-contextmenu__theme--dark {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*文件列表*/
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*路径栏*/
    .nav.hope-breadcrumb.hope-c-hrsMRY.hope-c-PJLV.hope-c-PJLV-idaeksS-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*隐藏搜索栏键盘图*/
    .hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {
        display: none !important;
    }

    /* 搜索框*/
    /*.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijMezfq-css{
        background-color: rgba(0, 0, 0, 0.3) !important;
    }

    /*视图切换按钮*/
    /* .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(0, 0, 0, 0.3) !important;
    } */

    /*视图切换菜单*/
    .hope-menu__content.hope-c-zbPwS.hope-c-PJLV.hope-c-PJLV-iSMXDf-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*本地设置*/
    .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*右侧工具栏*/
    .left-toolbar.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*左侧栏*/
    .hope-c-PJLV.hope-c-PJLV-ieGWMbI-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*顶栏*/
    .header.hope-center.hope-c-jKOUQW.hope-c-PJLV.hope-c-PJLV-ikaMhsQ-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*文件上传*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-bVSmjq-size-xs.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-jJyNvw-kvuHwT-size-md.hope-c-jJyNvw-fMWTjf-size-lg.hope-c-jJyNvw-FhbsI-size-xl.hope-c-jJyNvw-jNxcuY-size-2xl.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*元信息*/
    .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*新建文件，离线下载*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-jcDqLc-size-md.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*提示框*/
    .hope-modal__header.hope-c-iVFFms.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*重命名*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-bVSmjq-size-xs.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-jJyNvw-kvuHwT-size-md.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*本地设置*/
    .hope-drawer__content.hope-c-hOYTCS.hope-c-iPJpIL.hope-c-iPJpIL-bVSmjq-size-xs.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*播放列表（正在播放）*/
    .aplayer-list-light {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*音频播放/下载选择*/
    .hope-select__content.hope-c-XJURY.hope-c-PJLV.hope-c-PJLV-ijpihTg-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*文件夹选择*/
    .hope-modal__content.hope-c-hOYTCS.hope-c-jJyNvw.hope-c-jJyNvw-fuVnmB-size-xl.hope-c-jJyNvw-juNrEW-scrollBehavior-outside.hope-c-PJLV.hope-c-PJLV-ibvTkII-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*复选框*/
    .hope-checkbox__control.hope-c-mHASU.hope-c-iojPKw.hope-c-mHASU-byiOue-variant-filled.hope-c-mHASU-kFfbLQ-colorScheme-info.hope-c-mHASU-ixAowb-size-md.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /*复选框工具栏*/
    .hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-icYhHkW-css {
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }
</style>

可以用这个东西强制设置日/夜间模式，任选其一复制到刚才的位置

1
2
3
4
5
<!-- 强制日间模式-->
<script>window.onload=function(){localStorage.setItem("hope-ui-color-mode","light")}</script>

<!-- 强制夜间模式-->
<script>window.onload=function(){localStorage.setItem("hope-ui-color-mode","dark")}</script>

好丑啊