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/copypartycopyparty 是一个把断点续传、WebDAV、SFTP、媒体索引全塞进单文件的便携式文件服务器功能很能打但默认界面确实素深灰底、白字换台机器还是一样。好消息是它自带一套主题系统——10 个内置主题可以在设置面板里一键切换你甚至能用几行 CSS 变量把它改成自己喜欢的样子。这篇指南带你从最快的一步开始先换主题看到效果再拆一个官方示例搞懂原理最后自己动手写一个。快速上手一条命令换个界面copyparty 启动参数里有两个主题开关定义在 copyparty/main.py--theme指定默认主题编号0~9--themes表示装了多少个主题。内置主题按名字排0 是经典深色6 是 hacker 风试试这条命令copyparty --theme6启动后打开页面界面已经从经典深灰变成 hacker 风格。更省事的是不用重启直接点浏览器右上角 ⚙️ 设置里的 theme 下拉框选中的编号会存进浏览器 localStorage键名cpp_thm下次打开自动沿用。BSOD 蓝屏主题它到底改了什么想搞懂机制最快的办法是拆官方示例。contrib/themes/ 里躺着一个经典的蓝屏死机主题核心文件 contrib/themes/bsod.css 开头就写着部署方法把bsod.*复制到 webroot 下的.themes文件夹然后用--themes10 --theme9 --css-browser/.themes/bsod.css启动。用倒推法看它做了什么--theme9对应内置主题表里第 9 号eyphi95copyparty 会把类名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-u2html.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 --themes10 --theme9 --css-browser/.themes/custom.css--css-browser的作用是在文件浏览器页面里额外加载一份 CSSmetavar就叫L即 URL参数文档里原话是URL to additional CSS to include in the filebrowser html。开发阶段建议开着这个参数反复刷新页面调样式每存一次盘、F5 一次就能看到结果不需要重启服务——样式是静态资源改完即生效。进阶图标插件与场景化搭配配色只是第一层copyparty 的插件目录 contrib/plugins/ 里还有现成的界面扩展。比如 contrib/plugins/browser-icons.css 专门给网格视图的文件加图标它用#ggrida[href$.mp4i]:before这类选择器按扩展名匹配给视频贴一个半透明圆底的 ▶给音频贴个音符。思路和主题完全一致——找对挂载点这里是#ggrid网格容器再写:before伪元素可以照着自己扩按.pdf、.zip、.log加不同符号都行。两个实用场景的变量组合思路点到为止企业品牌色锁定--a、--btn-bg、--row-alt三个品牌触点再配--font-main用公司字体整套界面就带上 VI 了高对比无障碍把--fg拉到#fff、背景压到纯黑、--a用亮黄对比度直接拉满老花眼也看得清。常见问题改完不生效怎么办Q1CSS 改了半天页面一点没变先确认两件事选择器里的类名是否和实际主题一致主题 9 对应html.ey不是html.eyz或其他以及--css-browser是否真的带上了。然后强刷一次CtrlF5排除浏览器缓存。Q2主题里的图片 404url()是相对 CSS 文件位置解析的bsod.png必须和bsod.css同在.themes目录里同时.themes必须位于 webroot 内部否则服务器根本不会往外发这个文件。Q3重启服务后主题丢了--theme只是服务端给的默认值界面里的选择存在浏览器 localStoragecpp_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），仅供参考
