资讯动态

copyparty 主题定制:一个参数换肤,CSS 变量改配色的快速上手指南

发布时间:2026/9/11 3:56:40 来源:尧图企业网站定制
copyparty 主题定制一个参数换肤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/copypartycopyparty 是一个单文件的便携文件服务器除了 WebDAV、SFTP、断点续传上传这些硬功能它的 Web 界面其实比想象中好打扮。很多人以为要改界面就得动代码实际上最直接的入口只有一个启动命令里的--tcolor参数。传一个三位或六位的十六进制颜色值整个界面的强调色就会跟着你的品牌色走连 Safari 和安卓浏览器的标签提示色都会同步。一个参数换肤--tcolor 的隐藏用法如果你现在只想让界面看起来像自己的一行命令就够copyparty --tcolor 0066cc界面里的选中态、高亮、按钮都会围绕这个颜色重排。它甚至能影响书签和浏览器标签的配色适合团队共享服务器第一次去默认化。内置主题一键切换--theme 与 --themes 两个参数的配合除了强调色copyparty 自带一套编号 0 到 9 的内置主题通过--theme选择copyparty --theme 5这里有个容易踩的坑如果你想用自定义主题得先用--themes10把主题槽位扩展到 10 个才能选到第 9 号槽位来挂自己的 CSS。内置主题在浏览器里的实现方式是给html根元素换类名比如浅色模式对应y类你写自定义样式时照着这个思路走就行。CSS 变量配色速查只改 5 个值也能大不同copyparty 界面美化的核心是 copyparty/web/ui.css 里定义的一组 CSS 变量。你不需要读懂整个文件记住这几个就够用了html.y { --fg: #222; /* 正文文字 */ --fg-max: #000; /* 强调文字 */ --bg-u2: #f7f7f7; --bg-u5: #ccc; }想做一个夜间友好的配色照葫芦画瓢把前景调亮、背景压暗、给--fg-weak之类次级变量换个柔和色即可。所有变量都挂在 html 类选择器下改一处、全局生效。给文件加类型图标browser-icons 插件的玩法配色之外文件网格默认只有缩略图。项目里附带了一个图标插件contrib/plugins/browser-icons.css 的思路很简洁按扩展名匹配网格里的链接在角上叠加一个小符号。#ggrida:is([href$.mp3i], [href$.oggi]):before { content: ; }视频、图片、文档同理写几个选择器整个目录列表就有了媒体库的观感。这类样式和主题 CSS 走的是同一个入口可以叠在一起用。企业品牌风格强调色 品牌图案的组合拳把前几步拼起来就是一个可用的企业品牌主题--tcolor定主色自定义 CSS 覆盖背景与文字变量再往背景里挂一张品牌图。参考 contrib/themes/bsod.css 就能看清完整套路——它把整组变量改成 Windows 蓝屏的蓝色系最后用一行background: url(bsod.png) ...把图案贴到页面右上角。部署方式是copyparty --themes10 --theme9 --css-browser/.themes/bsod.css前提是 CSS以及图片放在 webroot 下的.themes文件夹里--css-browser指向该相对路径。把你的主题分享给社区主题文件就是纯 CSS没有编译、没有构建步骤。把验证过的样式连同示例截图放到contrib/themes/目录结构里配合仓库贡献指南提交即可。写主题时建议遵守两条纪律只覆盖变量、不重写布局变量名对照 ui.css 里的现成清单别自造新名。你现在最想改 copyparty 界面的哪一处配色、图标还是整体品牌感如果你已经动手写了第一版主题 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),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价