copyparty 主题定制完整指南：3 步换掉默认界面-开发者社区

copyparty 主题定制完整指南：3 步换掉默认界面

【免费下载链接】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 的内置文件浏览器自带一套完整的主题定制能力：10 套内置主题、CSS 变量改色、外挂自定义样式表，一条命令行参数就能切换，改完刷新页面立刻生效。

上手之前你需要知道的一件事

copyparty 的界面配色几乎全部由 CSS 变量驱动：页面上成千上万处颜色，最终都指向--fg、--bg-d1这类变量。所谓换主题，本质就是给<html>元素换一个类名，再用一组变量覆盖把整站配色换掉——改 CSS 变量 = 换皮肤。默认样式定义在copyparty/web/ui.css和copyparty/web/browser.css，社区现成主题放在contrib/themes/目录。你完全不需要动这些文件，只需要在自己的 webroot 里放文件、在启动参数里指路。

三步换掉默认界面

第 1 步：用 --theme 切内置主题

不想写一行 CSS？内置 10 套主题直接按编号选：偶数是深色、奇数是浅色变体，启动时带上参数即可。

copyparty --theme=6

打开页面你会看到 hacker 主题的绿字代码风。把 6 换成别的编号试试：0 经典暗色、2 pm-monokai、4 vice、8 phi95 暗色。页面右上角菜单里也有主题下拉框，随时切换，不用重启服务。

第 2 步：用 --css-browser 外挂自定义 CSS

想换背景图、调圆角、加品牌色？把样式表丢进 webroot 下的.themes文件夹，启动时告诉 copyparty 去加载它：

copyparty --css-browser=/.themes/bsod.css

重启后页面会额外引入这份 CSS，效果直接叠加在默认主题上。仓库自带的contrib/themes/bsod.css就是现成例子——复制到你的.themes目录，立刻体验"蓝屏"风格。

第 3 步：写一个最小自定义主题，覆盖配色变量

前两步用的都是别人调好的配方，现在轮到你调自己的。新建/.themes/my.css，只写一个类选择器加几个变量：

html.ey { --fg: #e0e0e0; --fg-max: #fff; --bg-d1: #101018; --bg-u2: #1c1c26; --bg-u5: #2a2a38; }

然后这样启动，刷新页面整站就按你的配色渲染了：

copyparty --theme=9 --css-browser=/.themes/my.css

--theme=9负责让页面挂上html.ey这个类（第 8/9 号主题对应的空槽），你的 CSS 负责往这个类里填变量——contrib/themes/bsod.css里html.ey的写法可以直接抄。

copyparty 换肤速查：改色只盯这 6 个变量

别被满屏变量吓到，改配色时你 90% 的时间只用得到下面这几个（全部可在copyparty/web/ui.css开头找到原始值）：

变量	作用	示例值
`--fg`	正文文字颜色	`#e0e0e0`
`--fg-max`	高亮、强调文字	`#fff`
`--fg-weak`	弱化文字（时间、文件大小）	`#999`
`--bg-d1`	页面主背景	`#101018`
`--bg-u2`	面板、弹窗背景	`#1c1c26`
`--bg-u5`	悬停高亮底色	`#2a2a38`

改色思路很简单：先定--bg-d1和--bg-d2定基调，再让--fg保证对比度，最后用--bg-u2、--bg-u5调层次感。

踩过的坑

加了--css-browser但样式纹丝不动→ 文件不在 webroot 里，URL 根本解析不到。解法：CSS 放进你启动 copyparty 的 webroot 目录（如.themes/），参数里用绝对路径/.themes/my.css。
改了--theme数字，页面却没变→ 浏览器 localStorage 里存着上次选过的主题（键名cpp_thm），它的优先级高于启动参数。解法：在页面右上角菜单里手动重选一次主题，或用无痕窗口验证启动参数是否生效。
下拉框里看不到自己的主题→--themes管的是"已安装主题的数量"（默认 10），不是"当前用哪个"，选主题只认--theme。解法：把--themes调大（如 20）让自定义空槽进入下拉框，再用--theme选中它。

接下来去哪玩

内置主题玩腻了，去docs/目录翻配置说明，去contrib/themes/抄现成主题的结构，或者看一眼contrib/plugins/browser-icons.css——那是用插件给文件加类型图标的玩法，和 CSS 变量是同一套思路。调出满意的效果后，欢迎把你的主题按CONTRIBUTING.md的流程丢进社区，让别人的文件服务器也长点不一样的脸。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考