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 是一个把快速断点续传、去重、WebDAV、SFTP、FTP 和媒体索引打包进单文件的便携文件服务器，它的网页端界面默认是暗色极简风。但界面只是"皮"，真正的玩法在于：它整套 UI 都建立在 CSS 变量之上，你改几个变量就能换掉整个站点的配色，甚至做出一个"Windows 蓝屏"风格的界面。

读完这篇文章，你将能够：

看懂 copyparty 主题编号与 HTML 类名之间的对应关系
用一条命令切换内置主题，并理解浏览器端如何记住你的选择
通过--css-browser参数挂上自己的 CSS 文件，定制整套配色
完整复现仓库自带的 BSOD 蓝屏主题
用官方示例插件为文件列表加图标、加企业横幅

主题机制：一个字母决定整套配色

你有没有想过，一个文件服务器是怎么做到"换肤"的？答案比想象中简单：copyparty 不靠独立的主题文件目录，而是把主题选择结果写进网页<html>标签的 class 上，再用 CSS 变量（CSS 里可复用的颜色"占位符"）统一消费这些类名。

具体规则是：

内置 10 个主题，编号 0~9，成对出现——偶数是暗色、奇数是亮色。名字依次为：0 classic dark、1 classic light、2 pm-monokai、3 flat light、4 vice、5 hotdog stand、6 hacker、7 hi-con、8 phi95 dark、9 phi95
每对主题对应一个字母：第 1 对（0/1）是html.a，第 2 对（2/3）是html.b，以此类推；第 5 对（8/9）就是html.e
亮色追加y、暗色追加z，所以"第 5 对的亮色"写 CSS 时就是html.ey

变量本身定义在 copyparty/web/ui.css 开头：:root里是全局底色（--fg前景、--bg-u2面板背景等），html.y和html.bz这样的选择器再按主题覆盖几个关键值。整个换肤流程就是"选主题 → 改 class → 变量生效"三步。

另外，浏览器端会把你的选择存进本地存储（键名cpp_thm），在网页设置面板的下拉框里也能随时切换，切完不用重启服务。

1 分钟上手：切换内置主题

想先看看效果，一条命令就够了。--theme指定默认主题编号（0~9），下面把界面切到 retro 味很浓的 vice 主题：

copyparty /data --theme 4

启动后访问服务地址，你会发现按钮、面板、滚动条全换了一副面孔——这就是整套 CSS 变量被html.d（vice 对应的类名）重定义的结果。

如果你装的主题数不止 10 个，可以用--themes参数告诉 copyparty 实际数量，设置面板的下拉框就会多出对应选项。想换回默认外观，去掉--theme参数重启即可。

完整案例：搭一个 BSOD 蓝屏主题

内置主题玩腻了，来点刺激的。仓库在 contrib/themes/bsod.css 里附带了一个经典"蓝屏死机"主题：整站铺成 Windows 故障蓝，右上角配一张哭脸系统图。下面完整复现一遍。

第一步：把主题文件放进 webroot。在你要共享的目录（webroot）下建一个.themes文件夹，把bsod.css和同目录的bsod.png拷进去，结构如下：

mkdir -p /data/.themes cp bsod.css bsod.png /data/.themes/

这样主题文件就能通过服务地址直接访问了。

第二步：理解 CSS 写了什么。BSOD 主题的核心就一件事——在html.ey选择器下批量覆盖变量，把面板、按钮、链接全部"染"成蓝屏蓝：

html.ey { --w2: #3d7bbc; --w3: #5fcbec; --fg: #fff; --fg-max: #fff; --bg: #2067b2; --bg-d2: var(--w2); --bg-u2: var(--bg); --bg-u5: var(--w2); }

注意它引用的是主题 9（第 5 对亮色，类名e+y），所以启动参数必须配套。

第三步：启动时挂载 CSS。用--css-browser指定额外样式表，同时把默认主题定为 9：

copyparty /data --themes=10 --theme=9 \ --css-browser /data/.themes/bsod.css

启动后整个文件浏览器会呈现一片故障蓝，右上角挂着蓝屏配图——效果就是你看到的那种"服务器出事了"的视觉冲击。以后写自己的主题，照这个套路套：确定目标主题的类名，在里面覆盖变量即可。

换个思路：自写迷你主题

不想要整站特效，只想微调配色？在 webroot 里写个mytheme.css，内容可以只有几行：

html.ay { --fg: #e8e8e8; --bg-u2: #141414; --bg-u5: #333; }

再用--css-browser /mytheme.css挂上即可。html.ay对应主题 0（经典暗色）的亮色版；如果你只想改暗色版，就把选择器写成html.az。保存后刷新页面立刻见效，方便你一边改一边看。

进阶玩法：插件扩展与字体替换

改完颜色只是开始，copyparty 的--css-browser和--js-browser两个参数本质上是"在文件浏览器页面里追加加载你自己的静态资源"，这意味着官方插件目录里的示例都可以直接拿来用。

玩法一：文件类型图标。官方示例 contrib/plugins/browser-icons.css 给视频、音频等文件在列表里打上小图标。把文件放进 webroot 后：

copyparty /data --css-browser /browser-icons.css

刷新后，视频文件前会出现播放符号，音乐文件配上音符，一眼分辨文件类型。

玩法二：企业横幅。同一个插件目录还有banner.js，配合--js-browser加载后会在页面顶部显示法务警告横幅，适合内网共享给外部人时用。更多示例说明见 contrib/plugins/README.md。

玩法三：换字体。主题不止是颜色，字体也能整体替换。仓库在 docs/rice/README.md 里整理了字体"rice"（折腾美化）方案，配合 CSS 变量--font-main、--font-mono就能把整套 UI 的字体换掉，甚至附带 RTL 排版补丁。

动手搭出你的专属界面

现在你手里已经有了完整工具链：内置 10 主题直接切换、--css-browser挂自定义变量、插件目录现成素材。建议先从改三四个 CSS 变量开始，逐步加背景图和布局规则。

把作品放到自己项目的contrib/themes/目录里分享出去，说不定下一个被官方收录的主题就是你的——下一篇文章我们聊聊 copyparty 的 WebDAV 与 SFTP 配置，敬请期待。

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

copyparty 主题定制速成指南：3 步上手