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 默认的文件浏览器想换个配色翻遍页面却找不到任何入口——其实它压根没藏起来copyparty 主题定制靠的就是启动参数加一个 CSS 文件全程不碰代码。下面从换主题的机制讲起覆盖内置主题切换、CSS 变量体系、从 0 到 1 造一个蓝屏风格界面以及图标插件的配合和部署检查清单。主题机制根类名 变量覆盖一句话讲清copyparty 的页面在生成时会把一个类名写到html根元素上这个类名来自--theme参数或浏览器里保存的上次选择。所有 CSS 文件再拿这个类名当选择器批量覆盖颜色变量。内置的 10 套主题就是这样来的不同类名配不同变量值并不存在单独的主题包。示意一下这条链路--fg→ 正文文字颜色--bg-u2→ 列表、面板的底色--a→ 链接和高亮色--font-main→ 字体族界面配色全部由变量驱动你在某个类名下把这些变量覆盖一遍copyparty 深色主题还是浅色主题就切换完成了。变量的完整定义见 ui.css。3 条命令跑通第一个主题先跑通再回头解释为什么有效。第一条只换内置主题编号 0 到 9copyparty --theme4 /path/to/your/files第二条加载你自己的样式表把写好的 CSS 放进 webroot 下的.themes文件夹用--css-browser指向它文件浏览器页面会连同默认样式一起引用copyparty --css-browser/.themes/bsod.css /path/to/your/files第三条是最完整的写法--themes10告诉设置面板里列多少套主题--theme9让浏览器默认落在你的自定义主题上--css-browser负责把样式真正注入页面copyparty --themes10 --theme9 --css-browser/.themes/bsod.css /path/to/your/files回头看机制--theme决定根元素拿到哪个类名--css-browser决定额外加载哪个样式表两者一个管选中谁一个管长什么样。变量字典定制前只需要认识这 11 个做 copyparty CSS 定制核心不是背一百个变量而是认出该动哪几个。基本集都定义在 ui.css 开头变量作用--font-main/--font-serif/--font-mono正文 / 衬线 / 等宽字体族--fg正文基础文字色--fg-max强调文字色标题和重要内容用它--fg-weak弱化文字色次级信息--bg页面背景主色--bg-u2/--bg-u5深浅不一的背景层列表、面板、输入框各取不同层--a/--a-hil链接色 / 悬停高亮色--btn-bg/--btn-fg按钮底色与文字色--txt-sh文本阴影浅色与深色主题的切换只是换了根类名变量机制完全一样不再重复。从 0 到 1 造一个蓝屏主题仓库里带了一份现成的 bsod.css 可以参考但这里按你自己的思路走一遍。选色。蓝屏风格其实就一个蓝底加白字需要定三个蓝底蓝铺满背景亮一点的蓝做按钮和面板再亮一档做高亮和滚动条。写变量覆盖。用html.ey当选择器——这个类名只要和内置的 10 套不撞就行html.ey { --fg: #fff; /* 白字 */ --fg-max: #fff; --bg: #2067b2; /* 蓝屏底蓝 */ --bg-u2: var(--bg); --bg-u5: #3d7bbc; /* 面板用亮蓝 */ --a: #fff; /* 链接也保持白 */ }想要蓝屏而不只是蓝色再给背景贴一张图并微调顶部操作栏的阴影和圆角html.ey { background: url(bsod.png) top 5em right 4.5em no-repeat fixed var(--bg); } html.ey #ops { text-shadow: 1px 1px 0 rgba(0,0,0,.5); border-radius: .3em; }放文件、启动验证。CSS 和背景图一起放进 webroot 下的.themes文件夹然后copyparty --themes10 --theme9 --css-browser/.themes/bsod.css /path/to/your/files浏览器打开看一眼哪块颜色不对就回到变量表补一条改完刷新即可。图标插件给文件类型加标识的独立一层仓库的 contrib/plugins/ 里有个 browser-icons.css 插件按扩展名给文件加图标。比如给视频文件在缩略图中央压一个半透明播放键#ggrida[href$.mp4i]:before { content: ▶; opacity: .8; background: rgba(0,0,0,.7); }图标插件管每类文件长什么样主题管整体什么颜色两者正交随便叠加互不干扰。部署检查清单4 步核对一遍目录webroot 下建.themes/你的 CSS 和它引用的图片都放里面CSS 里用相对路径引用同目录图片。参数--themes、--theme、--css-browser三个一起给只给--css-browser也能生效只是设置面板里看不到自定义编号。预览改完 CSS 直接刷新页面即可服务端每次给样式链接带时间戳参数不会被浏览器缓存卡住。回退把--theme改回 0或者在浏览器设置面板里把主题编号选回 0就恢复默认外观。两个进阶场景品牌色与高对比度公司 NAS 上的界面想带上司认出来的颜色覆盖一组变量就够html.brand { --fg: #333; --bg-u2: #f5f5f5; --bg: #fff; --a: #0066cc; /* 公司主色 */ --btn-bg: #0066cc; }给看不清默认灰底的用户高对比度主题的思路是纯黑底、纯白字、亮黄强调html.hc { --fg: #fff; --fg-max: #fff; --bg: #000; --bg-u2: #000; --a: #ff0; --btn-fg: #000; }这类主题落地前建议实测文字与背景对比度至少 4.5:1字号别小于 16px高对比不等于把字调小。从三条命令到一份变量覆盖copyparty 自定义界面这件事没有别的机关了——三个启动参数改完 CSS 刷新就能看到结果。仓库里 contrib/themes/ 放着现成主题可以抄更多机制细节在 docs/ 里。现在的问题只剩一个你的界面准备换成什么风格【免费下载链接】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），仅供参考