OpenList Moe - 全局毛玻璃美学 · 日夜间适配
转载自Sajuna
? OpenList Moe
为OpenList全局注入半透明模糊效果，支持日夜切换，覆盖文件列表/预览/后台等全组件
一个适用于文件列表程序 OpenList 的美化
✨ 特性
? 兼容日/夜间模式 - 不同背景与配色
? 全元素毛玻璃效果 - 半透明元素结合背景模糊
? 多层次透明度调校 - 完美的视觉层次
? 预览
首页
桌面端
移动端
要不去预览站点看看？跟我来，点击右侧文字前往 宸玚的资料库
? 使用
自定义头部
<!-- 修改 href 和 font-family 以自定义字体，删除字体 <link> 和字体 CSS 则使用 OpenList 默认字体 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe@dist/css/OpenList-Moe.min.css" rel="stylesheet">
<style>
/** 修改 URL 以自定义背景，删除背景 CSS 则使用 OpenList Moe 默认背景 */
:root {
--moe-color-theme: 248 179 78; /** 主题色（必填） */
--moe-bg-image-desktop: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/light_desktop/早秋_2.webp"); /** 默认白天模式桌面端背景图 */
--moe-bg-image-mobile: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/light_mobile/沉浸感_3.webp"); /** 默认白天模式移动端背景图 */
}
.hope-ui-dark {
--moe-bg-image-desktop: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/dark_desktop/新春快乐_5.webp"); /** 默认夜间模式桌面端背景图 */
--moe-bg-image-mobile: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/dark_mobile/沉浸感_6.webp"); /** 默认夜间模式移动端背景图 */
}
/**
* 自定义字体
*
* - 全局字体
* - Markdown 区域字体
* - Aplayer 音乐播放器字体
* - ArtPlayer 视频播放器和 tooltip 提示字体
*/
body, .markdown-body, .aplayer, .art-video-player, [class*=hint--]:after {
font-family: 'Noto Serif SC' !important;
}
</style>不要忘了修改主题色哦
自定义内容
<script src="https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe@dist/js/OpenList-Moe.min.js"></script>
<!-- 如果你不需要添加备案号，请删除以下代码 -->
<div class="beian-container" style="text-align: center;" hidden>
<a class="hope-anchor hope-c-PJLV-idrWMwW-css" href="https://beian.miit.gov.cn" target="_blank" rel="noopener" style="font-size: 14px;">
豫 ICP 备 2025000000 号</a>
</div>
<script>
// 备案信息加载
(()=>{let _o;const _f=()=>{const e=document.querySelector('.footer'),t=document.querySelector('.beian-container');return e&&t&&(e.append(t),t.hidden=!1,_o?.disconnect(),_o=null,!0)};_f()||(_o=new MutationObserver(_f), _o.observe(document,{childList:1,subtree:1}))})();
</script>? 自定义配置
查看源码变量
如果你需要深度定制特定元素的样式，可以参考 main.scss 中的 全局变量定义 部分。
:root {
--moe-color-checkbox: #f8b34e; /* 白天模式复选框颜色 */
}
.hope-ui-dark {
--moe-color-checkbox: #f8b34e; /* 夜间模式复选框颜色 */
}❤️ 关于
如果你也喜欢这个项目，那不妨点个Star♪
ℹ️ 日志
? v1.1.2 Release
? Features
- list: 调整列表项目录大小普通文本样式 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/34 (8ffaa)
? Bug Fixes
- border: 修复上传结果边框悬停高亮 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/33 (0342f)
? Other Changes
- ci:
- 简化工具函数 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/32 (929c4)
- 添加手动发布操作工作流 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/35 (aa81c)
