copyparty主题定制3行命令和几行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上周值机同事盯着浏览器里的文件窗口看了半天冒出一句这界面怎么三年一个样 文件服务器常年开着长得确实该翻新。想动前端大工程没必要。copyparty主题定制其实很轻启动时加一个参数就能换内置风格写几行CSS还能换成你自己的配色。3分钟看到效果一个参数换掉默认风格先跑通最短路径一条命令# 启动时指定主题编号0..9 共10套内置风格后面跟你要共享的目录 copyparty --theme9 ~/media打开浏览器整个文件浏览界面的配色、文字、按钮高亮都会跟着--theme的编号走。10套预设各有名字比如 0 是经典深色、6 是黑客绿、9 是高亮的 phi95 浅色——数字不同同一套程序就长出不同的脸。 如果嫌每次启动都要敲参数也可以不重启打开页面里的设置面板找到主题下拉框选一个编号即可选择会存在浏览器本地。它是怎么做到的给页面换一张色卡打个比方整个界面像一面已经刷好底色的墙而 ui.css 里定义了一组色卡专业叫法是 CSS 自定义属性CSS custom properties形如--fg文字颜色、--bg-u2背景色、--a链接色。页面渲染时并不写死任何颜色而是去读这些色卡的值。所谓主题本质就是给html根元素挂上不同的类名比如az、ey不同类名下重新定义色卡里的变量整页颜色瞬间全部换掉。所以换皮肤不用碰任何 JS改变量即可。由浅入深三档copyparty界面怎么改由你说了算第一档启动参数切预设10套风格直接选这一档不需要写一行代码。启动参数--theme0到--theme9对应10套内置风格设置面板页面设置里的主题下拉框不重启即可切换临时体验在地址后加?theme5仅当前页面生效三个入口殊途同归都是改那个主题编号。第二档改3个变量换个文件服务器配色预设不够用改色卡就行。新建一个CSS文件只覆盖你要动的变量其余继承默认。假设你平时用--theme0对应类名az可以这样写/* 保存为 .themes/night.css稍后用 --css-browser 加载 */ html.az { --fg: #e8e8e8; /* 主文字色 */ --bg-u2: #14181f; /* 大面积背景色 */ --a: #4da6ff; /* 链接与高亮色 */ }注意选择器里的az必须和你当前主题编号对应的类名一致偶数编号是深色z结尾奇数是浅色y结尾变量名打错则静默失效。第三档写一份自己的CSS绑定到主题槽位️ 想要一个完整的自定义主题套路和第二档一样只是变量写得多一些、还可以加背景图。仓库里就躺着一份现成范本 bsod.css它一口气重定义了二三十个变量把界面刷成了Windows蓝屏风格。关键是绑定槽位把你的样式挂到某个主题编号上。若想新增编号用--themes把槽位总数扩到11再用--theme10指向它# --themes11 表示槽位总数扩到 0..10新样式挂在 10 号槽 copyparty --themes11 --theme10 --css-browser/.themes/mine.css ~/media完整案例把仓库自带的蓝屏主题装上去下面以仓库里的 BSOD 蓝屏主题为例子从零走一遍以~/srv作为共享目录为例。在 webroot 下建主题目录.themes# 1. 建目录把主题样式和背景图拷进去图片必须与 css 同目录 mkdir -p ~/srv/.themes cp contrib/themes/bsod.css contrib/themes/bsod.png ~/srv/.themes/启动时绑定 9 号槽位并加载你的样式文件# --theme9 指向槽位--css-browser 给出样式文件的 URL 路径 copyparty --themes10 --theme9 --css-browser/.themes/bsod.css ~/srv刷新浏览器蓝底白字加右上角的哭脸就出现了整套界面风格就此定型。之后想换回默认去掉后三个参数即可样式文件留在.themes里随时可再挂上。常见坑速查换风格前先扫一眼这张表症状原因解法改了--theme没变化之前曾在设置面板里手动切过主题浏览器本地存储优先于启动参数在设置面板里重新选一次或清掉该站点的 localStorage编号填 10 无效--theme合法范围是 0..9先用 0..9想加新槽位要配--themes一起改自定义CSS完全没生效--css-browser收的是 URL 路径文件必须放在 webroot 下写成/.themes/xxx.css确认目录在共享根目录内样式里引用的背景图不显示url(bsod.png)这类路径是相对 CSS 文件本身的图片放进 CSS 同目录别只拷样式文件选择器写了html.az却没作用类名要和当前主题编号匹配0 号槽才是az核对编号偶数→z结尾奇数→y结尾写在最后到这里你应该已经会三件事一个参数切预设、几个变量改配色、一份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），仅供参考
