ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

copyparty 主题定制完整指南:简单几步,给文件服务器界面换上自己的皮肤

copyparty 主题定制完整指南:简单几步,给文件服务器界面换上自己的皮肤 copyparty 主题定制完整指南简单几步给文件服务器界面换上自己的皮肤【免费下载链接】copypartyPortable file server with accelerated resumable uploads, dedup, WebDAV, SFTP, FTP, TFTP, zeroconf, media indexer, thumbnails all in one file项目地址: https://gitcode.com/GitHub_Trending/co/copyparty每次点开 copyparty 的文件服务器界面看到的都是同一套灰黑配色——它很好用但没有你的味道。其实 copyparty 的主题定制门槛并不高内置 10 套配色一键切换再配合几个 CSS 变量就能调出专属界面。30 秒尝鲜一条命令切换 copyparty 内置主题先别研究原理直接看效果。copyparty 内置 10 套预设主题编号 0~90 是默认灰黑加一个--theme参数就能切换copyparty --theme3刷新浏览器界面色调整个变了。就这一步说明你已经掌握了 80% 的主题定制能力——剩下的只是换颜色。看懂主题机制CSS 变量 根元素类名copyparty 的界面样式定义在 copyparty/web/ui.css 里核心思路一句话把颜色抽成 CSS 变量主题切换就是给html根元素挂不同的类名整组变量随之换掉。比如--theme0时 html 元素会带上类似az的类名编号除以 2 定字母单双数定深浅底偶数 z 深色、奇数 y 浅色然后 css 里写html.az { --fg: ... }就能覆盖这一组变量。常用变量对照变量控制什么--fg/--fg-max正文色 / 高亮文字色--bg-u2主背景色--bg-u5输入框、卡片等次级背景--a/--a-hil链接色 / 链接高亮色--btn-bg按钮底色--scroll滚动条颜色所以换主题的本质就是找到这些变量按自己的喜好改一遍。从零打造自己的主题文件放哪、参数怎么写完整流程四步跟着做就行。1. 建文件。在你作为 webroot 的目录下建一个.themes文件夹注意开头的点放入自己的 css比如my-dark.css。2. 写变量。假设用编号 9 的主题位对应类名html.ey文件内容可以很短html.ey { --fg: #e8e8e8; --bg-u2: #101418; --bg-u5: #1f262e; --a: #4da6ff; }只改 4 个变量就能得到一个偏蓝的深色主题其余变量自动沿用默认值。3. 加启动参数。关键在这一步用--css-browser把你的 css 挂进页面copyparty --themes10 --theme9 \ --css-browser/.themes/my-dark.css4. 验证生效。浏览器打开界面如果配色变了就成了再看下页面源码head里应该多出一条指向/.themes/my-dark.css的样式引用。进阶玩法图标、品牌色与高对比模式变量改完配色后还有三个实用方向每个都有现成参考。按文件类型加图标。contrib/plugins/browser-icons.css 是个很好的模板它用#ggrida[href$.mp4i]:before这类选择器给视频缩略图中央盖一个半透明▶给音频文件加音符。照着加几条.pdf、.zip的规则文件列表一眼就能分清类型。css 放到 webroot 的子目录里同样用--css-browser引用即可。植入品牌色。团队服务器想统一视觉只覆盖三个变量就够--a主色、--a-hil高亮、--btn-bg按钮。想做得更整体可以翻一下 contrib/themes/bsod.css——那个蓝屏主题就是把 30 多个变量成组替换效果非常统一。无障碍高对比主题。给视力不好的同事可以这样加一层html.ey { --fg: #ffffff; --bg-u2: #000000; --bg-u5: #222222; font-size: 110%; }纯黑底、纯白字、稍大的字号夜间和弱光环境下可读性明显更好。踩坑清单主题不生效先看这四处路径没写对点。.themes是隐藏目录--css-browser里别漏掉开头的.文件也不在你服务的 webroot 下404 了页面会静默回落到默认样式。被浏览器缓存坑了。css 文件名没变、内容变了浏览器可能还在用旧的。CtrlF5 强刷一次再判断。以为和内置主题冲突了。其实自定义 css 是后加载的天然覆盖内置样式——类名对上编号对应az、ey这类类名、变量写全你的就一定赢。想回退。删掉--css-browser参数重启即可或者把--theme改回 0一键回到默认灰黑。小结copyparty 的主题定制就是选个编号换内置配色写几条 CSS 变量换自己的颜色十分钟就能上手。关键资源文档目录docs/主题示例蓝屏主题contrib/themes/界面插件图标等contrib/plugins/核心样式变量copyparty/web/ui.css贡献指南CONTRIBUTING.md【免费下载链接】copypartyPortable file server with accelerated resumable uploads, dedup, WebDAV, SFTP, FTP, TFTP, zeroconf, media indexer, thumbnails all in one file项目地址: https://gitcode.com/GitHub_Trending/co/copyparty创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表