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（单文件 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 后面挂?theme=8，页面立刻切换，这个选择同样会写进 localStorage，下次访问接着生效。临时尝鲜一个主题，这个最方便。

当然，官方这十种口味总有不够用的时候。想自己定颜色之前，先花三十秒搞清楚机制。

主题机制：html 两字符类名 + 几个变量

看懂了机制，后面的定制工作就只剩下一个动作：

• 切主题时，copyparty 改的是 html 元素上的类名：一个主题字母（a–x）加一个明暗字母（y亮、z暗），比如bz就是 pm-monokai 暗色
• 样式表用这个类名做前缀去覆盖变量。看 copyparty/web/ui.css 前 16 行：:root定义基础变量--fg、--fg-max、--bg-u2、--bg-u5，html.y/html.bz各只改其中几个
• 整页 UI 由几十个变量驱动，改变量 = 改界面。变量全表不用背，直接翻源码注释

所以写自定义主题 = 写一个html.Xz { ... }选择器，覆盖你在意的几个变量，就这么简单。下面动手。

实操案例：四步做出复古荧光绿主题

CRT 荧光绿配黑底，怎么都看不腻。✅ 全程不用重启服务。

1. 写最小 CSS。新建phosphor.css，内容只有 6 行：

/* phosphor.css */ html.fz { --fg: #7dffa8; /* 正文：荧光绿 */ --fg-max: #c8ffd9; /* 高亮：再亮一档 */ --bg-u2: #05130a; /* 面板底：近黑绿 */ --bg-u5: #0b2415; /* 次级底：深绿 */ }

注意选择器里的fz：f是 10 号槽位的主题字母，z表示暗色；它的亮色版是 11 号槽位的fy。

2. 把文件放到服务器能访问的地方。copyparty 会把挂载目录里的静态文件直接吐出去，所以 CSS 只要 URL 可达。在 webroot 里建个.themes点目录（惯例，非必须）：

mkdir -p /srv/data/.themes # 把 phosphor.css 拷进去

挂载的是/srv/data:/的话，对应 URL 就是/.themes/phosphor.css。

3. 启动时加两个参数：

copyparty /srv/data:/ --css-browser=/.themes/phosphor.css --themes 12

--css-browser让页面额外加载你的样式表；--themes 12把下拉框从 0–9 扩到 0–11，你的自定义主题从此有合法槽位。

4. 预览并锁定。地址栏挂上?theme=10打开，当场看到效果；觉得对味了，去设置下拉框选中 10 号位，完事。想微调就改完文件按 Ctrl+F5 硬刷新，反馈是即时的。

跑起来之后如果颜色没生效，八成是掉进下面两个坑。

⚠️ 改了变量不生效？先查两个高频坑

1. 选择器写错。界面只认 html 元素上会出现的那个两字符类名（fz/fy这类）。写成:root { ... }或html.custom { ... }一律不生效，因为那个类名根本不会出现。
2. 浏览器缓存。改完看不出变化，多半是缓存。调参期间 Ctrl+F5 硬刷就行；调完之后给 CSS URL 加?cache=600，让浏览器缓存 600 秒，省流量。

还有个坑是参数配不平：加了自定义 CSS 却忘了--themes 12，下拉框里没有 10 号槽位，面板就切不过去，只能靠?theme=10兜底。

颜色只是第一层。想让文件列表更像「内容」而不是「列表」，还有现成插件。

加一层插件：按文件类型上图标

仓库里带了现成的图标插件：contrib/plugins/browser-icons.css。它给视频缩略图中央叠一个播放三角，音频前面挂音符符号，整个文件 70 来行。用法：把它拷进 webroot，--css-browser指过去即可。这个参数只吃一个 URL，如果你有自己调的主题，就把两个文件拼成一个再引用。想搞 JS 层面的改动（换 loading 符号、重写工具栏）则走--js-browser，它是独立通道，和 CSS 参数可以同时挂。

接下来还能玩什么：三个方向

• 主题贡献给社区：仓库 contrib/themes/ 里有现成例子可参考结构，你的 CSS 调得顺手的话，按仓库贡献流程提一个，别人的文件服务器也能用上同款配色
• 写个 JS 插件：--js-browser可以注入任意 JS，contrib/plugins/ 目录的 README 里有一串现成案例，从上传钩子到界面改版都有
• 多设备统一主题：主题记忆存在各浏览器 localStorage 里，手机和电脑天然不同步。懒人方案是把启动/收藏 URL 里固定带上?theme=N

调出顺眼的主题后，欢迎在评论区贴 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