三步换掉默认皮肤copyparty 文件服务器主题定制手把手指南【免费下载链接】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、FTP、TFTP 全部内置开箱即用的代价是界面比较朴素。这篇 copyparty 主题定制教程覆盖三件事切换内置配色、用几行 CSS 改自定义配色、给文件加类型图标不需要写前端代码。三分钟上手仓库自带一份现成的蓝屏主题用来验证整套流程最快。建一个 webroot 子目录.themes把仓库里的 bsod.css 和 bsod.png 拷进去webroot/ └── .themes/ ├── bsod.css └── bsod.png执行这条单行命令启动服务copyparty --themes10 --theme9 --css-browser/.themes/bsod.css打开浏览器预期看到整个文件浏览器变成 Windows 蓝屏配色右上角出现蓝屏配图顶栏、行底色、按钮全部换色。按需定制只改配色自定义 CSS 变量目标不动布局只把整套配色换成自己习惯的深色。做法在.themes下新建一个 CSS 文件按当前主题对应的根节点类名覆盖关键变量--theme9时类名是ey浅色主题0没有前缀写:root即可。CSS 只展示关键变量html.ey { --fg: #d8d8d8; --fg-max: #ffffff; --bg: #1b1b1f; --bg-u2: #1b1b1f; --bg-u5: #3a3a40; --w2: #5a8fd6; }然后按上一节的方式把--css-browser指向这个文件重启。效果文字、底色、高亮行、按钮跟随变量整体换色布局、间距、字体完全不变。所有可用变量名在 ui.css 里按--开头逐个查找即可。加文件类型图标目标在网格视图里一眼分辨视频、音频、文档不用放大缩略图。做法browser-icons.css 已经按扩展名写好规则直接拷贝到.themes引用要自己加规则核心模式是选中带指定扩展名的链接 :before注入符号视频文件的关键写法#ggrida[href$.mp4i]:before { content: ▶; background: rgba(0, 0, 0, .7); }效果网格视图里.mp4、.mkv等视频缩略图中间出现半透明播放角标音频文件前显示音符符号。企业品牌色目标给团队内部的文件服务器套上公司主色替代默认灰。做法按只改配色一节建一个 CSS 文件把--w2主强调色设成品牌色--bg设成品牌色加深后的版本--fg保持白色保证对比度共 45 个变量就够。效果顶栏、选中态、按钮统一呈现场牌色因为整套 UI 都从这几个变量派生不需要逐页调样式后续 copyparty 升级界面也不会大面积跑版。原理一句话copyparty 根据--theme的数字在html根节点挂上对应类名0 号无类名9 号是ey界面里所有颜色都从 ui.css 的 CSS 变量派生。所以换主题就是三步启动参数决定根类名CSS 变量决定配色--css-browser指定额外样式表的 URL。常见坑Q--theme和--themes到底什么区别--theme09单数是启动时的默认主题编号--themes复数是告诉前端主题选择器里要放出多少个主题。只改编号不加大数界面可能看不到变化bsod 示例里两个都要带。Q自定义 CSS 不生效怎么排查按顺序查三点路径是否拼成/.themes/xxx.css--css-browser是 URL 不是服务器文件路径选择器类名是否和当前--theme编号对应编号不对就整份被浏览器跳过改完有没有重启服务。前两点占绝大多数情况。结语挑一个上面的场景今天就跑一遍跑通后再改自己的变量更多参数和主题细节见 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），仅供参考 三步换掉默认皮肤：copyparty 文件服务器主题定制手把手指南
三步换掉默认皮肤copyparty 文件服务器主题定制手把手指南【免费下载链接】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、FTP、TFTP 全部内置开箱即用的代价是界面比较朴素。这篇 copyparty 主题定制教程覆盖三件事切换内置配色、用几行 CSS 改自定义配色、给文件加类型图标不需要写前端代码。三分钟上手仓库自带一份现成的蓝屏主题用来验证整套流程最快。建一个 webroot 子目录.themes把仓库里的 bsod.css 和 bsod.png 拷进去webroot/ └── .themes/ ├── bsod.css └── bsod.png执行这条单行命令启动服务copyparty --themes10 --theme9 --css-browser/.themes/bsod.css打开浏览器预期看到整个文件浏览器变成 Windows 蓝屏配色右上角出现蓝屏配图顶栏、行底色、按钮全部换色。按需定制只改配色自定义 CSS 变量目标不动布局只把整套配色换成自己习惯的深色。做法在.themes下新建一个 CSS 文件按当前主题对应的根节点类名覆盖关键变量--theme9时类名是ey浅色主题0没有前缀写:root即可。CSS 只展示关键变量html.ey { --fg: #d8d8d8; --fg-max: #ffffff; --bg: #1b1b1f; --bg-u2: #1b1b1f; --bg-u5: #3a3a40; --w2: #5a8fd6; }然后按上一节的方式把--css-browser指向这个文件重启。效果文字、底色、高亮行、按钮跟随变量整体换色布局、间距、字体完全不变。所有可用变量名在 ui.css 里按--开头逐个查找即可。加文件类型图标目标在网格视图里一眼分辨视频、音频、文档不用放大缩略图。做法browser-icons.css 已经按扩展名写好规则直接拷贝到.themes引用要自己加规则核心模式是选中带指定扩展名的链接 :before注入符号视频文件的关键写法#ggrida[href$.mp4i]:before { content: ▶; background: rgba(0, 0, 0, .7); }效果网格视图里.mp4、.mkv等视频缩略图中间出现半透明播放角标音频文件前显示音符符号。企业品牌色目标给团队内部的文件服务器套上公司主色替代默认灰。做法按只改配色一节建一个 CSS 文件把--w2主强调色设成品牌色--bg设成品牌色加深后的版本--fg保持白色保证对比度共 45 个变量就够。效果顶栏、选中态、按钮统一呈现场牌色因为整套 UI 都从这几个变量派生不需要逐页调样式后续 copyparty 升级界面也不会大面积跑版。原理一句话copyparty 根据--theme的数字在html根节点挂上对应类名0 号无类名9 号是ey界面里所有颜色都从 ui.css 的 CSS 变量派生。所以换主题就是三步启动参数决定根类名CSS 变量决定配色--css-browser指定额外样式表的 URL。常见坑Q--theme和--themes到底什么区别--theme09单数是启动时的默认主题编号--themes复数是告诉前端主题选择器里要放出多少个主题。只改编号不加大数界面可能看不到变化bsod 示例里两个都要带。Q自定义 CSS 不生效怎么排查按顺序查三点路径是否拼成/.themes/xxx.css--css-browser是 URL 不是服务器文件路径选择器类名是否和当前--theme编号对应编号不对就整份被浏览器跳过改完有没有重启服务。前两点占绝大多数情况。结语挑一个上面的场景今天就跑一遍跑通后再改自己的变量更多参数和主题细节见 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），仅供参考