ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

copyparty 主题定制完整指南:3 步换掉默认界面

2026/9/11 11:02:59 拓冰建站 浏览量
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 的内置文件浏览器自带一套完整的主题定制能力10 套内置主题、CSS 变量改色、外挂自定义样式表一条命令行参数就能切换改完刷新页面立刻生效。上手之前你需要知道的一件事copyparty 的界面配色几乎全部由 CSS 变量驱动页面上成千上万处颜色最终都指向--fg、--bg-d1这类变量。所谓换主题本质就是给html元素换一个类名再用一组变量覆盖把整站配色换掉——改 CSS 变量 换皮肤。默认样式定义在copyparty/web/ui.css和copyparty/web/browser.css社区现成主题放在contrib/themes/目录。你完全不需要动这些文件只需要在自己的 webroot 里放文件、在启动参数里指路。三步换掉默认界面第 1 步用 --theme 切内置主题不想写一行 CSS内置 10 套主题直接按编号选偶数是深色、奇数是浅色变体启动时带上参数即可。copyparty --theme6打开页面你会看到 hacker 主题的绿字代码风。把 6 换成别的编号试试0 经典暗色、2 pm-monokai、4 vice、8 phi95 暗色。页面右上角菜单里也有主题下拉框随时切换不用重启服务。第 2 步用 --css-browser 外挂自定义 CSS想换背景图、调圆角、加品牌色把样式表丢进 webroot 下的.themes文件夹启动时告诉 copyparty 去加载它copyparty --css-browser/.themes/bsod.css重启后页面会额外引入这份 CSS效果直接叠加在默认主题上。仓库自带的contrib/themes/bsod.css就是现成例子——复制到你的.themes目录立刻体验蓝屏风格。第 3 步写一个最小自定义主题覆盖配色变量前两步用的都是别人调好的配方现在轮到你调自己的。新建/.themes/my.css只写一个类选择器加几个变量html.ey { --fg: #e0e0e0; --fg-max: #fff; --bg-d1: #101018; --bg-u2: #1c1c26; --bg-u5: #2a2a38; }然后这样启动刷新页面整站就按你的配色渲染了copyparty --theme9 --css-browser/.themes/my.css--theme9负责让页面挂上html.ey这个类第 8/9 号主题对应的空槽你的 CSS 负责往这个类里填变量——contrib/themes/bsod.css里html.ey的写法可以直接抄。copyparty 换肤速查改色只盯这 6 个变量别被满屏变量吓到改配色时你 90% 的时间只用得到下面这几个全部可在copyparty/web/ui.css开头找到原始值变量作用示例值--fg正文文字颜色#e0e0e0--fg-max高亮、强调文字#fff--fg-weak弱化文字时间、文件大小#999--bg-d1页面主背景#101018--bg-u2面板、弹窗背景#1c1c26--bg-u5悬停高亮底色#2a2a38改色思路很简单先定--bg-d1和--bg-d2定基调再让--fg保证对比度最后用--bg-u2、--bg-u5调层次感。踩过的坑加了--css-browser但样式纹丝不动→ 文件不在 webroot 里URL 根本解析不到。解法CSS 放进你启动 copyparty 的 webroot 目录如.themes/参数里用绝对路径/.themes/my.css。改了--theme数字页面却没变→ 浏览器 localStorage 里存着上次选过的主题键名cpp_thm它的优先级高于启动参数。解法在页面右上角菜单里手动重选一次主题或用无痕窗口验证启动参数是否生效。下拉框里看不到自己的主题→--themes管的是已安装主题的数量默认 10不是当前用哪个选主题只认--theme。解法把--themes调大如 20让自定义空槽进入下拉框再用--theme选中它。接下来去哪玩内置主题玩腻了去docs/目录翻配置说明去contrib/themes/抄现成主题的结构或者看一眼contrib/plugins/browser-icons.css——那是用插件给文件加类型图标的玩法和 CSS 变量是同一套思路。调出满意的效果后欢迎把你的主题按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),仅供参考