3步上手copyparty文件服务器主题定制：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 是一个把断点续传、WebDAV、SFTP、媒体索引全塞进单文件的便携式文件服务器，功能很能打，但默认界面确实素：深灰底、白字，换台机器还是一样。好消息是它自带一套主题系统——10 个内置主题可以在设置面板里一键切换，你甚至能用几行 CSS 变量把它改成自己喜欢的样子。这篇指南带你从最快的一步开始：先换主题看到效果，再拆一个官方示例搞懂原理，最后自己动手写一个。
快速上手：一条命令换个界面
copyparty 启动参数里有两个主题开关（定义在 copyparty/main.py）：--theme指定默认主题编号（0~9），--themes表示装了多少个主题。内置主题按名字排，0 是经典深色，6 是 hacker 风，试试这条命令：
copyparty --theme=6启动后打开页面，界面已经从经典深灰变成 hacker 风格。更省事的是：不用重启，直接点浏览器右上角 ⚙️ 设置里的 "theme" 下拉框，选中的编号会存进浏览器 localStorage（键名cpp_thm），下次打开自动沿用。
BSOD 蓝屏主题：它到底改了什么
想搞懂机制，最快的办法是拆官方示例。contrib/themes/ 里躺着一个经典的"蓝屏死机"主题，核心文件 contrib/themes/bsod.css 开头就写着部署方法：把bsod.*复制到 webroot 下的.themes文件夹，然后用--themes=10 --theme=9 --css-browser=/.themes/bsod.css启动。
用倒推法看它做了什么：
--theme=9对应内置主题表里第 9 号（ey，phi95），copyparty 会把类名ey挂到页面的<html>根元素上——这是 copyparty/web/browser.js 里settheme干的事；- BSOD 的 CSS 就靠选择器
html.ey挂钩，把--bg、--fg、--bg-u2等变量整组覆盖成蓝色系； - 所有组件（顶栏、侧树、上传按钮、排序高亮）本来就读这些变量，于是全界面"哗"地变蓝，连滚动条颜色
--scroll和阴影参数--f-sh1都换了； - 最后补一条背景图
url('bsod.png')，蓝屏上的"小人"就出来了。
所以机制一句话：主题编号 → html 上的类名 → 你的 CSS 用html.类名覆盖变量 → 全局生效。你不需要懂每个选择器，只要会换变量名。
自己写主题：记住三组变量就够了
所有基础变量定义在 copyparty/web/ui.css 的:root块里，按用途归成三组：
| 分组 | 变量 | 作用 |
|---|---|---|
| 颜色 | --fg--fg-max--bg-u2--bg-u5 | 前景文字、高亮文字、两级背景底色 |
| 字体 | --font-main--font-serif--font-mono | 正文、衬线、等宽（代码）字体 |
| 组件 | --a（链接色）--btn-bg--row-alt | 链接、按钮、隔行底色，BSOD 里也有覆盖 |
浅色/深色的差异本身就是"覆盖"实现的：html.y（结尾带y的是浅色变体）重新给了--fg和--bg-u2，html.bz只改了一个--bg-u2就把经典深色调成了偏紫的 monokai 底。你可以照着这个套路写自己的版本——选一个你喜欢的主题类名作为挂钩（比如同样用 9 号ey），只写要改的部分：
html.ey { --fg: #e0e0e0; /* 正文灰一点，夜里不刺眼 */ --fg-max: #ffffff; --bg-u2: #1a1a1a; /* 面板底色压到近黑 */ --bg-u5: #333333; }四行就是一个可用的夜间模式。字体想动就加--font-main: 'Noto Sans SC', sans-serif;；嫌链接太亮就补一个--a: #8ab4f8;。改一个变量只影响用它的那一类元素，试错成本很低。
文件放哪里，启动参数怎么带
📁 三步部署，照抄即可：
- 在 webroot 目录下建一个
.themes文件夹（名字里的点不能少），把你的custom.css放进去——webroot 就是你启动 copyparty 时传入的共享根目录； - 如果 CSS 里引用了图片（如 BSOD 的
bsod.png），图片必须和 CSS 同目录，因为url('bsod.png')是相对 CSS 文件解析的； - 启动时把编号和路径一起带上：
copyparty --themes=10 --theme=9 --css-browser=/.themes/custom.css--css-browser的作用是"在文件浏览器页面里额外加载一份 CSS"（metavar就叫L，即 URL），参数文档里原话是URL to additional CSS to include in the filebrowser html。开发阶段建议开着这个参数反复刷新页面调样式，每存一次盘、F5 一次就能看到结果，不需要重启服务——样式是静态资源，改完即生效。
进阶：图标插件与场景化搭配
配色只是第一层，copyparty 的插件目录 contrib/plugins/ 里还有现成的界面扩展。比如 contrib/plugins/browser-icons.css 专门给网格视图的文件加图标：它用#ggrid>a[href$=".mp4"i]:before这类选择器按扩展名匹配，给视频贴一个半透明圆底的 ▶，给音频贴个音符。思路和主题完全一致——找对挂载点（这里是#ggrid网格容器），再写:before伪元素，可以照着自己扩：按.pdf、.zip、.log加不同符号都行。
两个实用场景的变量组合思路（点到为止）：
- 企业品牌色：锁定
--a、--btn-bg、--row-alt三个"品牌触点"，再配--font-main用公司字体，整套界面就带上 VI 了； - 高对比无障碍：把
--fg拉到#fff、背景压到纯黑、--a用亮黄，对比度直接拉满，老花眼也看得清。
常见问题：改完不生效怎么办？
Q1：CSS 改了半天，页面一点没变？先确认两件事：选择器里的类名是否和实际主题一致（主题 9 对应html.ey，不是html.eyz或其他）；以及--css-browser是否真的带上了。然后强刷一次（Ctrl+F5）排除浏览器缓存。
Q2：主题里的图片 404？url()是相对 CSS 文件位置解析的，bsod.png必须和bsod.css同在.themes目录里；同时.themes必须位于 webroot 内部，否则服务器根本不会往外发这个文件。
Q3：重启服务后主题"丢了"？--theme只是服务端给的默认值；界面里的选择存在浏览器 localStorage（cpp_thm）。换台设备、清了浏览器数据，就会回到--theme指定的编号——这是正常行为，不是 bug。
Q4：--theme能填 10 以上吗？不能。编号范围是 0~9（源码里上限由THEMES = 10决定），--themes才是"共装了几个"的计数。填越界值会回落到默认主题。
Q5：加了图标插件，列表视图里没图标？browser-icons.css的选择器挂在#ggrid网格视图上，切到列表模式自然看不到。想要列表效果，得自己加针对列表结构的规则。
更多启动参数和配置写法，直接翻 docs/ 里的example.conf系列示例，照着抄最快。
主题系统说到底就是"类名 + CSS 变量"这两块积木，你现在已经会换、会拆、会写了。写出来的主题如果够有个性，不妨放进contrib/themes/风格的目录结构里，按 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），仅供参考
