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/copypartycopyparty单文件 Python 文件服务器默认的灰黑界面没问题就是看久了有点寡淡。这篇拿「复古荧光绿」当例子把主题定制的全流程走一遍内置主题切换、CSS 变量覆盖、自定义主题文件部署外加边改边看的实时预览。内置主题 0–9选个数就能换内置一共 10 个主题名字清单直接写在源码 copyparty/web/browser.js 里记数字就行| 编号 | 名字 | 编号 | 名字 | | -- | -- | -- | -- | | 0 | classic dark | 5 | hotdog stand | | 1 | classic light | 6 | hacker | | 2 | pm-monokai | 7 | hi-con | | 3 | flat light | 8 | phi95 dark | | 4 | vice | 9 | phi95 |启动时让 hacker 当默认copyparty /srv/data:/ --theme 6注意优先级--theme只是兜底默认值。浏览器有自己的记忆只要你在界面里点选过主题localStorage 里存的值会压过启动参数。不动命令行怎么切设置面板的主题下拉框选一次就会被记住还有个不显眼但好用的——URL 后面挂?theme8页面立刻切换这个选择同样会写进 localStorage下次访问接着生效。临时尝鲜一个主题这个最方便。当然官方这十种口味总有不够用的时候。想自己定颜色之前先花三十秒搞清楚机制。主题机制html 两字符类名 几个变量看懂了机制后面的定制工作就只剩下一个动作切主题时copyparty 改的是 html 元素上的类名一个主题字母a–x加一个明暗字母y亮、z暗比如bz就是 pm-monokai 暗色样式表用这个类名做前缀去覆盖变量。看 copyparty/web/ui.css 前 16 行:root定义基础变量--fg、--fg-max、--bg-u2、--bg-u5html.y/html.bz各只改其中几个整页 UI 由几十个变量驱动改变量 改界面。变量全表不用背直接翻源码注释所以写自定义主题 写一个html.Xz { ... }选择器覆盖你在意的几个变量就这么简单。下面动手。实操案例四步做出复古荧光绿主题CRT 荧光绿配黑底怎么都看不腻。✅ 全程不用重启服务。写最小 CSS。新建phosphor.css内容只有 6 行/* phosphor.css */ html.fz { --fg: #7dffa8; /* 正文荧光绿 */ --fg-max: #c8ffd9; /* 高亮再亮一档 */ --bg-u2: #05130a; /* 面板底近黑绿 */ --bg-u5: #0b2415; /* 次级底深绿 */ }注意选择器里的fzf是 10 号槽位的主题字母z表示暗色它的亮色版是 11 号槽位的fy。把文件放到服务器能访问的地方。copyparty 会把挂载目录里的静态文件直接吐出去所以 CSS 只要 URL 可达。在 webroot 里建个.themes点目录惯例非必须mkdir -p /srv/data/.themes # 把 phosphor.css 拷进去挂载的是/srv/data:/的话对应 URL 就是/.themes/phosphor.css。启动时加两个参数copyparty /srv/data:/ --css-browser/.themes/phosphor.css --themes 12--css-browser让页面额外加载你的样式表--themes 12把下拉框从 0–9 扩到 0–11你的自定义主题从此有合法槽位。预览并锁定。地址栏挂上?theme10打开当场看到效果觉得对味了去设置下拉框选中 10 号位完事。想微调就改完文件按 CtrlF5 硬刷新反馈是即时的。跑起来之后如果颜色没生效八成是掉进下面两个坑。⚠️ 改了变量不生效先查两个高频坑选择器写错。界面只认 html 元素上会出现的那个两字符类名fz/fy这类。写成:root { ... }或html.custom { ... }一律不生效因为那个类名根本不会出现。浏览器缓存。改完看不出变化多半是缓存。调参期间 CtrlF5 硬刷就行调完之后给 CSS URL 加?cache600让浏览器缓存 600 秒省流量。还有个坑是参数配不平加了自定义 CSS 却忘了--themes 12下拉框里没有 10 号槽位面板就切不过去只能靠?theme10兜底。颜色只是第一层。想让文件列表更像「内容」而不是「列表」还有现成插件。加一层插件按文件类型上图标仓库里带了现成的图标插件contrib/plugins/browser-icons.css。它给视频缩略图中央叠一个播放三角音频前面挂音符符号整个文件 70 来行。用法把它拷进 webroot--css-browser指过去即可。这个参数只吃一个 URL如果你有自己调的主题就把两个文件拼成一个再引用。想搞 JS 层面的改动换 loading 符号、重写工具栏则走--js-browser它是独立通道和 CSS 参数可以同时挂。接下来还能玩什么三个方向主题贡献给社区仓库 contrib/themes/ 里有现成例子可参考结构你的 CSS 调得顺手的话按仓库贡献流程提一个别人的文件服务器也能用上同款配色写个 JS 插件--js-browser可以注入任意 JScontrib/plugins/ 目录的 README 里有一串现成案例从上传钩子到界面改版都有多设备统一主题主题记忆存在各浏览器 localStorage 里手机和电脑天然不同步。懒人方案是把启动/收藏 URL 里固定带上?themeN调出顺眼的主题后欢迎在评论区贴 CSS——我挺想看大家把它染成什么颜色。【免费下载链接】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），仅供参考