copyparty 界面定制：6行CSS换个样子-迪斯科星球

copyparty 界面定制：6行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

给朋友搭了个文件站，他第一句吐槽："这界面怎么跟我十年前用的一模一样？"先说结论：copyparty 的界面定制路子其实很短，它的主题系统说白了就是往 html 标签上挂个类名，再换几个颜色变量。下面这条命令直接跑，三秒看到整屏变藏青：

mkdir -p ~/webroot/.themes echo 'html.z { --bg-u2: #0d2137; --fg-max: #7fd4ff; }' > ~/webroot/.themes/brand.css copyparty ~/webroot --css-browser=/.themes/brand.css

上面三行依次是：建隐藏目录、写两个变量、启动服务。

⚡ 底层机制：copyparty 主题变量速查

默认UI样式表里的核心变量就这五个，界面其余颜色基本从它们派生：

CSS 变量	控制什么	深色默认值
`--fg`	正文前景色	`#ccc`
`--fg-max`	强调前景（标题、悬停）	`#fff`
`--bg-u2`	面板、弹窗背景	`#2b2b2b`
`--bg-u5`	代码块、徽章底色	`#444`
`--font-main`	正文字体	sans-serif

两个启动参数是这么联动的：--theme从 0 到 9 选一套内置配色，程序会把它翻成一个两位类名——第一位是色调、第二位是 y（浅色）/z（深色）——然后挂到<html>标签上；--css-browser则是在页面尾部追加一份自定义 CSS，用来覆盖上表的变量。所以"换肤"= 换类名，"深度定制"= 挂一份自己的样式表，两条路都不需要动代码。

🎨 界面定制三个实战场景

给文件服务器换上品牌主色

效果：整站只剩公司主色和它的深浅变体。改法只需覆盖深色类下的三个变量：

html.z { --fg-max: #ffcc00; --bg-u2: #101820; --bg-u5: #1d2733; }

上面这段把强调色、面板底色、代码块底色一次换掉。存成webroot/.themes/brand.css，启动时加--css-browser=/.themes/brand.css即生效。

给视频音频文件网格加上类型图标

效果：网格视图里视频和音频一眼可辨，不再是一堆长得一样的缩略图。给a元素加个::before标记就行，最小版本：

#ggrid>a:is([href$=".mp4"i],[href$=".mkv"i],[href$=".webm"i]):before { content: '▶'; background: rgba(0,0,0,.7); color: #fff; }

上面只画了视频，音频（🎵）、图片同理再加一段:is()即可；官方插件目录里有视频、音频、图标一锅端的现成文件，拷进 webroot 直接指向它就能用。

🌙 夜间一键切换高对比模式

效果：纯黑底、纯白字，深夜刷文件列表不刺眼。写法上这是能压缩到的极限了：

html.z { --fg: #fff; --fg-max: #fff; --bg-u2: #000; --bg-u5: #222; }

上面四行就是高对比模式的最小集。存好后，内置配色在浏览器设置面板的主题下拉框里点一下就切（选择记在浏览器本地，重启不变）；自定义这份则用--css-browser指向它。

⚠️ 踩坑实录：踩了这些才跑通的

现象：CSS 明明改了，页面却跟没改一样。原因：选择器类名和页面实际类名对不上——默认深色页是az，你照抄示例写了html.ey，一条规则都没命中。一行修复：先在开发者工具里看<html>上的类名，把选择器改成一致的，再 Ctrl+F5 强制刷新绕过缓存。
现象：主题下拉框选项变少，或者配色又弹回默认。原因：--themes是"装了多少套主题"，--theme才是"选哪一套"，两个参数写反了。一行修复：--themes保持默认 10，用--theme=9来选。
现象：配色正常，背景图整个不见了。原因：url()的相对路径是相对 CSS 文件所在位置解析的，只拷了 CSS 没拷图片。一行修复：把图片和 CSS 放进同一个.themes目录再启动。

copyparty 主题定制说白了就是改变量 + 挂类名，剩下的交给浏览器。想做点花样的，去社区主题示例抄作业。

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

企业官网建设流程全解析