copyparty 界面定制：6行CSS换个样子
copyparty 界面定制6行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 的界面定制路子其实很短它的主题系统说白了就是往 html 标签上挂个类名再换几个颜色变量。下面这条命令直接跑三秒看到整屏变藏青mkdir -p ~/webroot/.themes echo html.z { --bg-u2: #0d2137; --fg-max: #7fd4ff; } ~/webroot/.themes/brand.css copyparty ~/webroot --css-browser/.themes/brand.css上面三行依次是建隐藏目录、写两个变量、启动服务。⚡ 底层机制copyparty 主题变量速查默认UI样式表 里的核心变量就这五个界面其余颜色基本从它们派生CSS 变量控制什么深色默认值--fg正文前景色#ccc--fg-max强调前景标题、悬停#fff--bg-u2面板、弹窗背景#2b2b2b--bg-u5代码块、徽章底色#444--font-main正文字体sans-serif两个启动参数是这么联动的--theme从 0 到 9 选一套内置配色程序会把它翻成一个两位类名——第一位是色调、第二位是 y浅色/z深色——然后挂到html标签上--css-browser则是在页面尾部追加一份自定义 CSS用来覆盖上表的变量。所以换肤 换类名深度定制 挂一份自己的样式表两条路都不需要动代码。 界面定制三个实战场景给文件服务器换上品牌主色效果整站只剩公司主色和它的深浅变体。改法只需覆盖深色类下的三个变量html.z { --fg-max: #ffcc00; --bg-u2: #101820; --bg-u5: #1d2733; }上面这段把强调色、面板底色、代码块底色一次换掉。存成webroot/.themes/brand.css启动时加--css-browser/.themes/brand.css即生效。给视频音频文件网格加上类型图标效果网格视图里视频和音频一眼可辨不再是一堆长得一样的缩略图。给a元素加个::before标记就行最小版本#ggrida:is([href$.mp4i],[href$.mkvi],[href$.webmi]):before { content: ▶; background: rgba(0,0,0,.7); color: #fff; }上面只画了视频音频、图片同理再加一段:is()即可官方插件目录里有视频、音频、图标一锅端的现成文件拷进 webroot 直接指向它就能用。 夜间一键切换高对比模式效果纯黑底、纯白字深夜刷文件列表不刺眼。写法上这是能压缩到的极限了html.z { --fg: #fff; --fg-max: #fff; --bg-u2: #000; --bg-u5: #222; }上面四行就是高对比模式的最小集。存好后内置配色在浏览器设置面板的主题下拉框里点一下就切选择记在浏览器本地重启不变自定义这份则用--css-browser指向它。⚠️ 踩坑实录踩了这些才跑通的现象CSS 明明改了页面却跟没改一样。原因选择器类名和页面实际类名对不上——默认深色页是az你照抄示例写了html.ey一条规则都没命中。一行修复先在开发者工具里看html上的类名把选择器改成一致的再 CtrlF5 强制刷新绕过缓存。现象主题下拉框选项变少或者配色又弹回默认。原因--themes是装了多少套主题--theme才是选哪一套两个参数写反了。一行修复--themes保持默认 10用--theme9来选。现象配色正常背景图整个不见了。原因url()的相对路径是相对 CSS 文件所在位置解析的只拷了 CSS 没拷图片。一行修复把图片和 CSS 放进同一个.themes目录再启动。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/copyparty创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考