copyparty 主题定制完整指南5 步做出专属文件服务器界面【免费下载链接】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、媒体索引全部装进单文件的便携式文件服务器。主题定制是它界面个性化的核心能力不改源码、不重新打包只靠--theme和--css-browser两个启动参数加一份 CSS 文件就能整体换掉界面配色、按钮风格和特效。整个过程分三类操作切换内置主题、覆盖 CSS 变量、交付自定义主题文件。场景默认界面撑不住交付你把 copyparty 架在 NAS 上给团队做共享盘功能都够用但演示给客户时界面还是那套标准深灰。想换皮又不想 fork 代码。这正是主题系统的设计目的内置 UI 的所有外观都从 CSS 变量读取换一套变量取值就是换一整套皮肤甚至可以在某个内置主题之上叠加你自己的规则。最快上手3 步看到第一个主题 第 1 步指定内置主题。copyparty 自带 10 个内置主题编号 0–9classic 深浅色、pm-monokai、flat、vice、hotdog stand、hacker、hi-con、phi95 深浅色。# 默认界面设为 hacker copyparty --theme6 /srv/share重启后打开页面皮肤即已切换。第 2 步让每个用户自选。浏览器界面里有主题下拉框选择结果写入浏览器本地存储键名cpp_thm下次访问自动生效服务端零配置。第 3 步给分享链接钉死主题。发给客户的链接末尾加?theme3对方打开必然是 flat light 版https://files.example.com/?theme3URL 参数优先级高于用户本地存储的选择适合官方演示必须固定配色的场合。变量地图改哪个变量动哪里颜色由 CSS 变量驱动基础值定义在 copyparty/web/ui.css 顶部各主题的覆盖写在 copyparty/web/browser.css。按作用分组记比按行号记好用得多颜色类--fg/--fg-max正文与强调文字--bg-u2/--bg-u5主面板与深底背景决定整页底色--bg/--bg-d1~--bg-d3文件浏览区的多层背景--a、--row-alt、--tab-alt链接高亮、表格隔行、活动标签的强调色字体类--font-main、--font-serif、--font-mono正文、衬线、等宽三套字体控件类--btn-bg、--btn-fg、--btn-1-bg等普通按钮与反色按钮的配色特效与布局类--f-sh1~--f-sh3、--txt-sh阴影强度、文字阴影--tree-bg、--g-b1、--scroll目录树背景、网格边框、滚动条写主题前只需记一条规则html元素上的类名决定哪组变量生效。同一套配色有深浅两个变体深色以z结尾、浅色以y结尾例如html.bz、html.by。拿不准当前生效值时F12 → Computed 面板可直接看到每个变量的最终取值。实战案例从零做一个可复用的品牌主题 需求给客户一套深色底、橙色强调的界面。1. 在 webroot 下建目录放样式文件。约定俗成用隐藏目录.themes新建brand.csshtml.bz { --bg-u2: #14161f; --bg-u5: #1f2330; --fg: #dfe3ee; --fg-max: #ffffff; --a: #ff8c42; --row-alt: #232838; --btn-bg: #ff8c42; --btn-fg: #14161f; }选择器html.bz把规则绑定到主题 2 的深色版pm-monokai其余变量随需而改。2. 要加背景图就放同目录用相对路径引用html.bz { background: url(brand-bg.png) bottom right no-repeat fixed var(--bg-u2); }相对路径按 css 文件所在目录解析——官方示例 contrib/themes/bsod.css 就是这样引用bsod.png的可以对照着读。3. 启动时把参数指过去copyparty --theme2 \ --css-browser/.themes/brand.css /srv/share--theme必须与选择器类名对应的编号一致这是最常见的错位点。4. 验证。打开页面按 F12Elements 面板确认html类名含bzNetwork 面板能看到brand.css请求且带?_时间戳参数内置的防缓存机制。颜色变了就算完成整个主题就是这一份 css拷走即可在别的部署复用。进阶技巧图标与布局微调文件类型图标。仓库自带示例 contrib/plugins/browser-icons.css按href扩展名给网格单元加图标#ggrida[href$.mp4i]:before { content: ▶; }用法同样是--css-browser指向它。注意该参数只接受一个 URL若还要叠加自己的品牌样式把两份规则合并成一个文件或在文件里用import引入。布局微调。和图标一样写普通选择器即可。BSOD 主题就用一条规则挪动了操作栏html.ey #ops { margin: 1.7em 1.5em 0 1.5em; border-radius: .3em; }需要 JS 行为时法律声明横幅、快捷键等用--js-browser指向 js 文件可用示例清单见 contrib/plugins/README.md。常见坑与排错 --theme没生效八成是浏览器本地存储里存着旧选择cpp_thm会覆盖服务端默认值。清掉该站点数据或改用带?themeN的链接分发。css 文件 404--css-browser要的是 webroot 内的 URL 路径不是文件系统路径。写/.themes/brand.css对写/home/x/brand.css错。路径对了颜色没变选择器类名和实际类不匹配。F12 看html上真实类名是什么再写规则别凭记忆。改了 css 像没变服务端对每个 css 请求都追加时间戳浏览器本身不会用旧缓存如果你前面还挂了反代或 CDN检查那一层的缓存时长是否过长。--themes和--theme搞混前者是主题下拉框里出现多少个选项默认 10后者是默认选中第几个。想多留一个自定义槽位可把--themes调大。交付前对照这份清单--theme编号与 css 选择器的类名匹配.themes位于 webroot 内--css-browser路径用浏览器直接访问返回 200背景图与 css 同目录使用相对路径用无痕窗口验证过一次排除旧cpp_thm干扰对外链接已固定?themeNF12 确认目标变量在真实类名下生效做完之后欢迎把你的主题丢进 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 主题定制完整指南：5 步做出专属文件服务器界面
copyparty 主题定制完整指南5 步做出专属文件服务器界面【免费下载链接】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、媒体索引全部装进单文件的便携式文件服务器。主题定制是它界面个性化的核心能力不改源码、不重新打包只靠--theme和--css-browser两个启动参数加一份 CSS 文件就能整体换掉界面配色、按钮风格和特效。整个过程分三类操作切换内置主题、覆盖 CSS 变量、交付自定义主题文件。场景默认界面撑不住交付你把 copyparty 架在 NAS 上给团队做共享盘功能都够用但演示给客户时界面还是那套标准深灰。想换皮又不想 fork 代码。这正是主题系统的设计目的内置 UI 的所有外观都从 CSS 变量读取换一套变量取值就是换一整套皮肤甚至可以在某个内置主题之上叠加你自己的规则。最快上手3 步看到第一个主题 第 1 步指定内置主题。copyparty 自带 10 个内置主题编号 0–9classic 深浅色、pm-monokai、flat、vice、hotdog stand、hacker、hi-con、phi95 深浅色。# 默认界面设为 hacker copyparty --theme6 /srv/share重启后打开页面皮肤即已切换。第 2 步让每个用户自选。浏览器界面里有主题下拉框选择结果写入浏览器本地存储键名cpp_thm下次访问自动生效服务端零配置。第 3 步给分享链接钉死主题。发给客户的链接末尾加?theme3对方打开必然是 flat light 版https://files.example.com/?theme3URL 参数优先级高于用户本地存储的选择适合官方演示必须固定配色的场合。变量地图改哪个变量动哪里颜色由 CSS 变量驱动基础值定义在 copyparty/web/ui.css 顶部各主题的覆盖写在 copyparty/web/browser.css。按作用分组记比按行号记好用得多颜色类--fg/--fg-max正文与强调文字--bg-u2/--bg-u5主面板与深底背景决定整页底色--bg/--bg-d1~--bg-d3文件浏览区的多层背景--a、--row-alt、--tab-alt链接高亮、表格隔行、活动标签的强调色字体类--font-main、--font-serif、--font-mono正文、衬线、等宽三套字体控件类--btn-bg、--btn-fg、--btn-1-bg等普通按钮与反色按钮的配色特效与布局类--f-sh1~--f-sh3、--txt-sh阴影强度、文字阴影--tree-bg、--g-b1、--scroll目录树背景、网格边框、滚动条写主题前只需记一条规则html元素上的类名决定哪组变量生效。同一套配色有深浅两个变体深色以z结尾、浅色以y结尾例如html.bz、html.by。拿不准当前生效值时F12 → Computed 面板可直接看到每个变量的最终取值。实战案例从零做一个可复用的品牌主题 需求给客户一套深色底、橙色强调的界面。1. 在 webroot 下建目录放样式文件。约定俗成用隐藏目录.themes新建brand.csshtml.bz { --bg-u2: #14161f; --bg-u5: #1f2330; --fg: #dfe3ee; --fg-max: #ffffff; --a: #ff8c42; --row-alt: #232838; --btn-bg: #ff8c42; --btn-fg: #14161f; }选择器html.bz把规则绑定到主题 2 的深色版pm-monokai其余变量随需而改。2. 要加背景图就放同目录用相对路径引用html.bz { background: url(brand-bg.png) bottom right no-repeat fixed var(--bg-u2); }相对路径按 css 文件所在目录解析——官方示例 contrib/themes/bsod.css 就是这样引用bsod.png的可以对照着读。3. 启动时把参数指过去copyparty --theme2 \ --css-browser/.themes/brand.css /srv/share--theme必须与选择器类名对应的编号一致这是最常见的错位点。4. 验证。打开页面按 F12Elements 面板确认html类名含bzNetwork 面板能看到brand.css请求且带?_时间戳参数内置的防缓存机制。颜色变了就算完成整个主题就是这一份 css拷走即可在别的部署复用。进阶技巧图标与布局微调文件类型图标。仓库自带示例 contrib/plugins/browser-icons.css按href扩展名给网格单元加图标#ggrida[href$.mp4i]:before { content: ▶; }用法同样是--css-browser指向它。注意该参数只接受一个 URL若还要叠加自己的品牌样式把两份规则合并成一个文件或在文件里用import引入。布局微调。和图标一样写普通选择器即可。BSOD 主题就用一条规则挪动了操作栏html.ey #ops { margin: 1.7em 1.5em 0 1.5em; border-radius: .3em; }需要 JS 行为时法律声明横幅、快捷键等用--js-browser指向 js 文件可用示例清单见 contrib/plugins/README.md。常见坑与排错 --theme没生效八成是浏览器本地存储里存着旧选择cpp_thm会覆盖服务端默认值。清掉该站点数据或改用带?themeN的链接分发。css 文件 404--css-browser要的是 webroot 内的 URL 路径不是文件系统路径。写/.themes/brand.css对写/home/x/brand.css错。路径对了颜色没变选择器类名和实际类不匹配。F12 看html上真实类名是什么再写规则别凭记忆。改了 css 像没变服务端对每个 css 请求都追加时间戳浏览器本身不会用旧缓存如果你前面还挂了反代或 CDN检查那一层的缓存时长是否过长。--themes和--theme搞混前者是主题下拉框里出现多少个选项默认 10后者是默认选中第几个。想多留一个自定义槽位可把--themes调大。交付前对照这份清单--theme编号与 css 选择器的类名匹配.themes位于 webroot 内--css-browser路径用浏览器直接访问返回 200背景图与 css 同目录使用相对路径用无痕窗口验证过一次排除旧cpp_thm干扰对外链接已固定?themeNF12 确认目标变量在真实类名下生效做完之后欢迎把你的主题丢进 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），仅供参考