ESP32 新手入门：40 元 1 小时，让 Arduino 开发板连上 WiFi 还能被浏览器访问
2026/9/11 4:51:52
copyparty 换肤快速上手：10 秒切换内置主题，再自己写一套专属配色
【免费下载链接】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、缩略图一应俱全），而它的界面换肤成本极低：整套 UI 由 CSS 变量驱动，内置 10 档主题可以一条命令切换，也可以只写几行 CSS 覆盖变量、或者放进一个完整主题文件，做出完全属于自己的界面。本文按"能变成什么样 → 怎么做到"的顺序，带你从零走到自定义主题上线，顺带讲清楚 copyparty 主题文件到底放在哪里、用什么参数加载。
一、先试 10 档内置主题：一条命令改变整套界面 🎨
这一节零门槛：不改任何文件，重启服务换个参数，界面就完全不同。
copyparty 的内置主题用--theme NUM指定，NUM 取值 0~9，共 10 档。启动一下感受一下：
# 以第 5 档主题启动（0 是默认档，9 是 phi95 浅色） copyparty --theme=5各档位实际是"配色字母 + 明暗"的组合，这一点在 copyparty/svchub.py 里写得很直白：字母取a到x，明暗后缀取y（浅）或z（深），--theme=0对应az，--theme=1对应ay，依次类推。界面里那 10 个名字（classic dark、pm-monokai、hacker、phi95……）来自 copyparty/web/browser.js。
除了启动参数，浏览器右下角还有主题下拉框，可以在线切换，无需重启；你的选择会存进 localStorage（键名cpp_thm），下次打开自动生效。URL 里带?theme=7也能直接指定某档，适合把某个主题"钉"在分享链接里。
二、换肤的底层机制：覆盖 CSS 变量即换肤
理解这一节，后面所有自定义都是顺推。copyparty 的基础色板只有几个变量，定义在 copyparty/web/ui.css 的文件头部：
:root { --fg: #ccc; /* 默认文字颜色 */ --fg-max: #fff; /* 强调文字 */ --bg-u2: #2b2b2b; /* 次级背景 */ --bg-u5: #444; /* 更深的背景 */ }整个页面几乎只引用这些变量，不写死颜色。于是换肤的逻辑变成：给html根元素换一个类名，再在这个类名下重定义变量。内置的浅色档就是这么来的——html.y把同一组变量翻成浅色系，html.bz则是另一种深蓝底。浏览器切换主题时，JS 就是往<html>上增删ay、bz这类类名（见 copyparty/web/browser.html 与 copyparty/web/browser.js）。
🔍 仓库里现成的例子是蓝屏主题 contrib/themes/ 下的bsod.css：它没有碰任何布局，只是把html.ey下的一串--fg、--bg、--btn-bg全改成 Windows 蓝屏蓝，再给页面铺一张bsod.png背景，整套界面就变成了"蓝屏"。这就是"覆盖变量即换肤"的最小证明。
三、轻量改色：3 行 CSS 做出自己的深色配色
不想整套装扮？只想换个配色，这一节就够。核心动作只有一个：用--css-browser参数挂一份你自己的 CSS，覆写变量即可。
下面这段 CSS 做的事很简单——给html挂上ay（浅色档）类名时，强制换成一套偏冷的深色调：
/* 挂在 ay 主题下，只改三个变量，整站配色随之变化 */ html.ay { --fg: #d8dee9; --fg-max: #ffffff; --bg-u2: #1c2128; --bg-u5: #30363d; }启动命令把它接进去：
# 打开全部 10 档下拉选项，默认用第 9 档，并追加你的样式表 copyparty --themes=10 --theme=9 --css-browser=/.themes/my.css这里有个容易忽略的细节：--themes控制的是下拉框里"显示几档"，默认只有 2 档。想让用户在界面上自由挑选 0~9 全部档位，记得显式传--themes=10；而--theme只决定默认落在哪一档。
四、自定义主题文件放哪里：.themes 目录与完整工作流
这一节回答"copyparty 主题文件位置"这个高频问题，并给出从零到上线的完整步骤。
copyparty 本身是单文件程序，没有约定的 themes 目录，仓库的惯例是把主题放进webroot（你共享的那个根目录）下的.themes隐藏文件夹，bsod.css文件头注释也是这么写的。目录长这样：
webroot/ # 你共享的目录 └── .themes/ # 隐藏目录，对访客不可见 ├── my.css # 你自己的主题 └── bsod.css # 也可以放仓库里的现成主题完整流程五步：
- 在 webroot 下建
.themes目录，放入你的my.css（主题依赖的图片也放这里，CSS 里用相对路径引用）； - 主题文件内部以
html.某类名 { --变量: 值; }的形式组织；--css-browser指向的 URL 用 webroot 相对路径，即/.themes/my.css； - 用上一节的命令启动，确认效果；
- 需要换档时改
--theme，或在浏览器下拉框里切换，无需再动文件； - 想给别人用，把
.themes目录拷走、附上启动命令即可——这就是它"可移植"的全部含义。
补充一个排查技巧：界面显示异常时，按 F12 打开开发者工具，看<html>的 class 是否是你的主题类名、变量值是否生效，基本能定位 90% 的问题。
五、插件化点缀：按文件类型加图标
主题管"全局气质"，插件管"局部细节"。仓库的 contrib/plugins/ 目录里有几个现成的小插件，其中 contrib/plugins/browser-icons.css 给不同类型的文件缩略图叠加图标（视频加播放键、音频加音符之类），思路是选择器匹配链接后缀 +:before伪元素：
/* 给视频类链接的缩略图中央盖一个播放图标 */ #ggrid>a:is( [href$=".mkv"i], [href$=".mp4"i], [href$=".webm"i], ):before { content: '▶'; }它同样是纯 CSS、通过--css-browser加载，可以和你的主题文件放在同一个.themes目录里管理（多个样式表可拆成多个文件分别引用，方便开关）。其余插件如banner.js（页头横幅）、rave.js也在同一目录，用法类似。
关键参数速查表
| 项目 | 说明 | 出处 |
|---|---|---|
--theme NUM | 默认主题档位，0~9（NUM 为 0 到--themes减 1） | copyparty/main.py |
--themes NUM | 界面下拉框显示的主题档数，设 10 可展开全部内置档 | 同上 |
--css-browser URL | 追加一份自定义 CSS 到浏览器页面，主题文件就靠它加载 | 同上 |
?theme=NUM | URL 查询参数，临时指定某档主题 | copyparty/web/browser.js |
html.y/html.z | 浅色 / 深色类名，后缀 y 为浅、z 为深 | copyparty/web/ui.css |
--fg/--bg-u2/--bg-u5 | 基础配色变量，覆盖它们即完成换肤 | copyparty/web/ui.css |
.themes/ | 主题文件建议放置处（webroot 下的隐藏目录） | contrib/themes/bsod.css |
下一步清单 ✅
- 用
--theme从 0 拨到 9 各看一眼，记住 2 个喜欢的档位； - 建 webroot/.themes 目录，写一份只改 3 个变量的 CSS，通过
--css-browser挂上； - 打开浏览器主题下拉框在线切换，确认选择被记住（
cpp_thm存在 localStorage）； - 把 contrib/themes/bsod.css 拷进
.themes跑一遍，体会"整份变量覆盖"的力度； - 需要细节点缀时，再上 contrib/plugins/browser-icons.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），仅供参考