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、媒体索引塞进单文件的便携文件服务器而它的皮肤系统同样好上手。下面带你把界面换一张脸。读完你将做到切换 10 个内置主题看懂 CSS 变量机制写出自定义配色主题部署团队统一风格快速定位不生效的坑先弄懂机制copyparty 的界面颜色全部来自一组 CSS 变量样式表顶部的命名参数可在任意层级覆盖。每个内置主题本质上是html元素上的一个两字母类名如az、ey类里只重写那组变量的取值。--theme参数决定服务器下发的默认主题而页面设置面板里的theme下拉框选择会存进浏览器 localStorage优先级更高。想追加自己的样式文件用--css-browser把它注入文件浏览器页面。自定义主题的常用做法是在某个内置主题编号上做覆盖而不是新建编号。核心文件copyparty/web/ui.css变量定义、copyparty/web/browser.css各主题覆盖、contrib/themes/示例主题。最快跑通安装并启动pip install copyparty copyparty终端会打印一行访问地址按提示在浏览器打开看到文件列表即成功。换个默认主题试试copyparty --theme9 # 默认主题改为 9 号0-9 共 10 个内置主题预期效果页面变成浅灰底的 phi95 风格打开页面设置面板theme 下拉框可实时切换主题选择被记住无需重启。拆一个典型示例仓库自带一个完整定制样例蓝屏主题 contrib/themes/bsod.css。它没有画任何新元素只在html.ey对应 9 号主题下重写一组颜色变量html.ey { --bg: #2067b2; /* 底色换成蓝屏蓝 */ --fg: #fff; /* 正文用白字 */ --w2: #3d7bbc; /* 面板与按钮的次级蓝 */ --w3: #5fcbec; /* 高亮色 */ --btn-bg: var(--w2); /* 按钮跟随次级蓝 */ --f-sh1: 0.1; /* 弱化阴影界面更平 */ }这段在改什么一个选择器把 9 号主题的所有颜色换掉布局代码一行没碰。为什么这么写浏览器渲染只看变量取值覆盖变量等于换肤作用域锁在html.ey其他 9 个主题不受影响。再补一行背景图蓝屏味就出来了html.ey { background: url(bsod.png) top 5em right 4.5em no-repeat fixed var(--bg); }文件头部注释里就写了启动命令直接照抄copyparty --themes10 --theme9 --css-browser/.themes/bsod.css组合进阶写自己的配色方案目的只换品牌色不碰布局。做法用 F12 查看html的类名默认主题是az在 webroot 下写html.az { --fg: #e8e8e8; /* 正文更柔和 */ --bg-u2: #141414; /* 面板更深 */ --bg-u5: #2c2c2c; }启动时加上--css-browser/.themes/my.css。效果界面整体压暗按钮、悬停、选中态自动跟随变量变化。给文件卡片加图标目的视频、音频一眼可辨。做法仓库现成了图标插件 contrib/plugins/browser-icons.css复制进.themes后追加参数copyparty --css-browser/.themes/browser-icons.css效果视频文件卡片上出现播放符号音频是音符纯 CSS 伪元素实现不引入任何 JavaScript。用 URL 锁定主题目的任何人打开同一地址都是同一套样式。做法访问地址后拼?theme参数例如http://127.0.0.1:8000/?theme5页面脚本会读取该参数并强制切换主题效果即使浏览器本地存过别的选择URL 参数照样生效适合分享演示链接。落地与管理推荐把主题文件集中放在 webroot 下的隐藏目录webroot/ # 你启动 copyparty 的目录 └── .themes/ ├── bsod.css ├── bsod.png ├── browser-icons.css └── my.css # 你自己的主题常用参数对照参数作用示例--theme服务器默认主题编号0-9--theme9--themes启用的主题数量默认 10--themes10--css-browser注入文件浏览器页面的额外 CSS--css-browser/.themes/my.css调试技巧.themes在 webroot 内CSS 按静态文件直接读取改完按 F5 刷新即可看到不必重启服务。选择器写不写对用 F12 检查html元素上的类名即可验证。避坑与实践症状--css-browser传了样式却没变化。原因路径在 webroot 之外服务器只能看到启动目录里的文件。解法把文件放进 webroot 下的.themes用/.themes/xxx.css引用。症状变量写了只有一部分区域变色。原因变量名拼错比如写成--background而不是--bg。解法对照 copyparty/web/ui.css 顶部的变量清单核对。症状自己浏览器正常同事看到的还是默认样式。原因主题选择存在各自浏览器的 localStorage 里。解法URL 里带?themeN强制指定或统一--theme默认值。症状CSS 明明改了页面却像没变。原因浏览器缓存了旧样式。解法CtrlShiftR 强制刷新。两个现成场景团队统一风格把主背景、文字、强调色收敛进一个team.css部署到各台机器的.themes启动参数统一加--css-browser/.themes/team.css再配?theme防止被个人选择覆盖。新成员接入只需一条启动命令。高对比度场景内置 8 号主题就是高对比风格hi-con先直接用copyparty --theme8想更强时叠加一层自定义8 号对应类名ezhtml.ez { --fg: #fff; --bg-u2: #000; }写在最后copyparty 主题定制说到底就三步认变量、找类名、写覆盖。从换配色到调整布局任何说得出口的界面改动基本都能落进一个 CSS 文件。后续你可以关注官方主题目录的扩展说不定会出现更省事的可视化管理。写得意犹未尽的话把主题丢进.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），仅供参考