copyparty 换肤快速上手10 秒切换内置主题再自己写一套专属配色【免费下载链接】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、缩略图一应俱全而它的界面换肤成本极低整套 UI 由 CSS 变量驱动内置 10 档主题可以一条命令切换也可以只写几行 CSS 覆盖变量、或者放进一个完整主题文件做出完全属于自己的界面。本文按能变成什么样 → 怎么做到的顺序带你从零走到自定义主题上线顺带讲清楚 copyparty 主题文件到底放在哪里、用什么参数加载。一、先试 10 档内置主题一条命令改变整套界面 这一节零门槛不改任何文件重启服务换个参数界面就完全不同。copyparty 的内置主题用--theme NUM指定NUM 取值 0~9共 10 档。启动一下感受一下# 以第 5 档主题启动0 是默认档9 是 phi95 浅色 copyparty --theme5各档位实际是配色字母 明暗的组合这一点在 copyparty/svchub.py 里写得很直白字母取a到x明暗后缀取y浅或z深--theme0对应az--theme1对应ay依次类推。界面里那 10 个名字classic dark、pm-monokai、hacker、phi95……来自 copyparty/web/browser.js。除了启动参数浏览器右下角还有主题下拉框可以在线切换无需重启你的选择会存进 localStorage键名cpp_thm下次打开自动生效。URL 里带?theme7也能直接指定某档适合把某个主题钉在分享链接里。二、换肤的底层机制覆盖 CSS 变量即换肤理解这一节后面所有自定义都是顺推。copyparty 的基础色板只有几个变量定义在 copyparty/web/ui.css 的文件头部:root { --fg: #ccc; /* 默认文字颜色 */ --fg-max: #fff; /* 强调文字 */ --bg-u2: #2b2b2b; /* 次级背景 */ --bg-u5: #444; /* 更深的背景 */ }整个页面几乎只引用这些变量不写死颜色。于是换肤的逻辑变成给html根元素换一个类名再在这个类名下重定义变量。内置的浅色档就是这么来的——html.y把同一组变量翻成浅色系html.bz则是另一种深蓝底。浏览器切换主题时JS 就是往html上增删ay、bz这类类名见 copyparty/web/browser.html 与 copyparty/web/browser.js。 仓库里现成的例子是蓝屏主题 contrib/themes/ 下的bsod.css它没有碰任何布局只是把html.ey下的一串--fg、--bg、--btn-bg全改成 Windows 蓝屏蓝再给页面铺一张bsod.png背景整套界面就变成了蓝屏。这就是覆盖变量即换肤的最小证明。三、轻量改色3 行 CSS 做出自己的深色配色不想整套装扮只想换个配色这一节就够。核心动作只有一个用--css-browser参数挂一份你自己的 CSS覆写变量即可。下面这段 CSS 做的事很简单——给html挂上ay浅色档类名时强制换成一套偏冷的深色调/* 挂在 ay 主题下只改三个变量整站配色随之变化 */ html.ay { --fg: #d8dee9; --fg-max: #ffffff; --bg-u2: #1c2128; --bg-u5: #30363d; }启动命令把它接进去# 打开全部 10 档下拉选项默认用第 9 档并追加你的样式表 copyparty --themes10 --theme9 --css-browser/.themes/my.css这里有个容易忽略的细节--themes控制的是下拉框里显示几档默认只有 2 档。想让用户在界面上自由挑选 0~9 全部档位记得显式传--themes10而--theme只决定默认落在哪一档。四、自定义主题文件放哪里.themes 目录与完整工作流这一节回答copyparty 主题文件位置这个高频问题并给出从零到上线的完整步骤。copyparty 本身是单文件程序没有约定的 themes 目录仓库的惯例是把主题放进webroot你共享的那个根目录下的.themes隐藏文件夹bsod.css文件头注释也是这么写的。目录长这样webroot/ # 你共享的目录 └── .themes/ # 隐藏目录对访客不可见 ├── my.css # 你自己的主题 └── bsod.css # 也可以放仓库里的现成主题完整流程五步在 webroot 下建.themes目录放入你的my.css主题依赖的图片也放这里CSS 里用相对路径引用主题文件内部以html.某类名 { --变量: 值; }的形式组织--css-browser指向的 URL 用 webroot 相对路径即/.themes/my.css用上一节的命令启动确认效果需要换档时改--theme或在浏览器下拉框里切换无需再动文件想给别人用把.themes目录拷走、附上启动命令即可——这就是它可移植的全部含义。补充一个排查技巧界面显示异常时按 F12 打开开发者工具看html的 class 是否是你的主题类名、变量值是否生效基本能定位 90% 的问题。五、插件化点缀按文件类型加图标主题管全局气质插件管局部细节。仓库的 contrib/plugins/ 目录里有几个现成的小插件其中 contrib/plugins/browser-icons.css 给不同类型的文件缩略图叠加图标视频加播放键、音频加音符之类思路是选择器匹配链接后缀 :before伪元素/* 给视频类链接的缩略图中央盖一个播放图标 */ #ggrida:is( [href$.mkvi], [href$.mp4i], [href$.webmi], ):before { content: ▶; }它同样是纯 CSS、通过--css-browser加载可以和你的主题文件放在同一个.themes目录里管理多个样式表可拆成多个文件分别引用方便开关。其余插件如banner.js页头横幅、rave.js也在同一目录用法类似。关键参数速查表项目说明出处--theme NUM默认主题档位0~9NUM 为 0 到--themes减 1copyparty/main.py--themes NUM界面下拉框显示的主题档数设 10 可展开全部内置档同上--css-browser URL追加一份自定义 CSS 到浏览器页面主题文件就靠它加载同上?themeNUMURL 查询参数临时指定某档主题copyparty/web/browser.jshtml.y/html.z浅色 / 深色类名后缀 y 为浅、z 为深copyparty/web/ui.css--fg/--bg-u2/--bg-u5基础配色变量覆盖它们即完成换肤copyparty/web/ui.css.themes/主题文件建议放置处webroot 下的隐藏目录contrib/themes/bsod.css下一步清单 ✅用--theme从 0 拨到 9 各看一眼记住 2 个喜欢的档位建 webroot/.themes 目录写一份只改 3 个变量的 CSS通过--css-browser挂上打开浏览器主题下拉框在线切换确认选择被记住cpp_thm存在 localStorage把 contrib/themes/bsod.css 拷进.themes跑一遍体会整份变量覆盖的力度需要细节点缀时再上 contrib/plugins/browser-icons.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/copyparty创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考