OpenList can feel a lot calmer without changing how it works. This setup aims for something light, easy on the eyes, and a little literary: the base is Bing's daily wallpaper, and the interface sits on top in frosted glass. It is meant to stay comfortable in both light and dark mode and suits people who prefer a simple look. The configuration has been tested with the latest OpenList release as of March 2026; Chrome, Edge, and Safari all render it well.
Start in the admin settings
Go to Admin → Settings → Global and find two fields:
- Custom head: accepts
link,script, andstyletags. - Custom content (bottom of body): accepts HTML structure plus optional extra scripts.
Most of the work happens in Custom head, where all styles and external resources go.
Paste the following resources at the beginning of Custom head. The order is not strict, but this arrangement is sensible:
<!-- ES6 Polyfill (legacy browser support) -->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!-- LXGW WenKai (highly recommended free Chinese font; a big readability upgrade) -->
<link rel="stylesheet" href="https://hanzi.itedev.com/fonts/986/result.css" />
<!-- Font Awesome 6 Free (icon library; small icons may be useful later) -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/css/all.min.css" />
<!-- Optional: music player -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.css" />
<script src="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.js"></script>
<script src="https://npm.elemecdn.com/[email protected]/js/Meting.min.js"></script>
The CDNs above mostly point to China-friendly mirrors, so they often load faster than official sources. If one ever goes down, replace it with a jsDelivr or unpkg mirror.
The core style block
This is the main part of the look. Replace the existing <style> section in Custom head with the block below. Several things have been tightened compared with a basic version: the Bing wallpaper is fetched through a redirect service so it always follows the latest image; dark mode gets a stronger dark overlay for better text contrast; the frosted-glass parameters are unified to avoid repetition; and common elements such as notification boxes and code blocks are covered.
<style>
/* ===== OpenList plum blossom theme - frosted glass + Bing daily wallpaper ===== */
/* Global font */
*,
body {
font-family: 'LXGW WenKai', system-ui, -apple-system, sans-serif !important;
margin: 0;
}
/* Optional: minimalist gradient background canvas (delete if you don't like it) */
#canvas-basic {
position: fixed;
inset: 0;
z-index: -999;
pointer-events: none;
}
/* Bing daily image (recommended: redirect service that always gets the latest) */
.hope-ui-light {
background: url('https://bing.biturl.top/?resolution=1920x1080&format=image') center/cover fixed no-repeat !important;
transition: background-image 0.8s ease;
}
.hope-ui-dark {
background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url('https://bing.biturl.top/?resolution=1920x1080&format=image') center/cover fixed no-repeat !important;
background-blend-mode: overlay;
color: rgba(255,255,255,0.92) !important;
}
/* Unified frosted-glass containers (the core effect) */
.hope-ui-light .hope-c-PJLV-ikSuVsl-css,
.hope-ui-light .hope-c-PJLV-ijgzmFG-css, /* README */
.hope-ui-light .body > .nav,
.hope-ui-light .hope-c-PJLV-ihVEsOa-css, /* Navigation */
.hope-ui-light pre,
.hope-ui-light .newValine,
.hope-ui-light .hope-c-ivMHWx-hZistB-cv /* Buttons etc. */ {
background: rgba(255,255,255,0.55) !important;
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border-radius: var(--hope-radii-lg);
box-shadow: 0 6px 32px rgba(0,0,0,0.12);
border: 1px solid rgba(255,255,255,0.18);
}
.hope-ui-dark .hope-c-PJLV-iiuDLME-css,
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css,
.hope-ui-dark .body > .nav,
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css,
.hope-ui-dark pre,
.hope-ui-dark .newValine {
background: rgba(30,30,40,0.48) !important;
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border-radius: var(--hope-radii-lg);
box-shadow: 0 6px 32px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(245,245,255,0.94) !important;
}
/* Darker code blocks are friendlier at night */
.hope-ui-dark pre {
background: rgba(20,20,30,0.6) !important;
}
/* Fully transparent top navigation */
#root > .header {
background: transparent !important;
backdrop-filter: blur(12px);
}
/* Minor bottom copyright tweak (optional hide) */
dibu {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 1.2rem 0;
font-size: 0.92rem;
opacity: 0.8;
}
/* Comment area (Valine / Waline, etc.) */
.newValine {
margin: 1.5rem auto;
width: min(96%, 960px);
padding: 1.5rem;
border-radius: var(--hope-radii-xl);
backdrop-filter: blur(10px);
}
/* Small adjustment when APlayer music player is enabled */
.aplayer {
bottom: 0 !important;
border-radius: 12px 12px 0 0;
overflow: hidden;
}
</style>
If something needs adjusting
The wallpaper does not update. Switch to https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN and pull the image URL with JavaScript. That is more reliable, though it takes a bit more code. A random landscape API is another option.
You want an opening animation or logo. Add a small HTML + JavaScript block to Custom content and fade it in. The pattern is common: an overlay element, a CSS transition, and a timeout or load event to remove it.
You want a custom cursor, snow, or sakura petals. These effects are performance killers, especially on phones. If you really want them, use a lightweight cursor-effects library rather than a large particle script.
You want a background image behind the Valine comment box. Add background-image to .vedit. A simple image or a subtle pattern works best.
The goal is not to pile on effects. Keep the glass panels readable, let the daily image change the mood, and override only the pieces that get in the way. If an odd compatibility bug appears, it is usually a matter of adding one more selector to the style block and tuning the backdrop.