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 的文件浏览器你看到的是灰黑色的默认界面。你想把配色换成品牌色或者换成某种特定风格但--theme的帮助只显示(0..9)看不出数字之间差在哪更不知道自己的样式从哪注入。本文用 3 个启动参数加 1 个 CSS 文件跑通 copyparty 主题定制范围只覆盖 CSS 层的视觉改动不涉及--js-browser的行为扩展。理解主题机制根类加 CSS 变量copyparty 的主题机制是一层 CSS 变量覆盖启动时--theme的数字被换算成两个字符的类名写到html元素上样式表为每个类名定义一组--fg前景色、--bg背景色、--a强调色等变量界面全部颜色都从这些变量取值。你可以把主题理解成一套皮肤包整套皮肤的观感由这个类名下的变量决定。它决定了只要写清某一类名下的变量覆盖就能改遍文件浏览器的配色、字体和间距。数字与类名的换算是确定性的第一个字符取a到x按数字除以 2的顺序第二个字符偶数取z、奇数取y。内置的 10 个主题名定义在 copyparty/web/browser.js完整换算逻辑在 copyparty/svchub.py数字类名内置主题名0azclassic dark1ayclassic light2bzpm-monokai3byflat light4czvice5cyhotdog stand6dzhacker7dyhi-con8ezphi95 dark9eyphi95变量默认值集中在 copyparty/web/ui.css。三个相关参数的默认值参数默认值作用--theme0默认主题的数字编号0..9--themes10界面内主题选择器显示的选项数--css-browser空附加到文件浏览器页面的 CSS 的 URL挂载自定义主题三步实践复制主题文件到 .themes--css-browser收的是 URL样式文件必须放在被服务的目录webroot里才能被访问。仓库自带一个完整的自定义主题示例蓝屏风格以它为蓝本。在 webroot 目录下执行第一条路径换成你仓库 clone 目录的实际路径mkdir -p .themes cp copyparty/contrib/themes/bsod.css .themes/ cp copyparty/contrib/themes/bsod.png .themes/执行后 webroot 下多出.themes目录文件在浏览器里可通过/.themes/bsod.css访问。覆盖 CSS 变量写自定义配色主题文件的本质是针对某个类名覆盖一组变量。仓库示例针对html.ey对应--theme9你可以只改 4 个变量做出自己的深色配色保存为.themes/brand.csshtml.ey { --fg: #e0e0e0; /* 前景文字 */ --bg: #102a43; /* 主背景 */ --bg-u2: #16324f;/* 次要背景提示框等 */ --a: #4da6ff; /* 链接与按钮强调色 */ }保存后其余界面元素边框、按钮、表格条纹沿用该主题的原有取值一份几行的 CSS 就能让整套界面统一换色。用三个参数启动服务回到 webroot 启动服务第一个参数是当前目录表示它就是 webrootcopyparty . --themes10 --theme9 --css-browser/.themes/brand.css跑起来是这样的浏览器打开文件列表页面以主题 9phi95 light为基底颜色按上面的覆盖值渲染--themes10让界面内的主题选择器保持默认 10 项。排错提示样式没生效时先用浏览器直接打开/.themes/brand.css404 说明文件没放进被服务的目录内容正常但配色没变多半是 CSS 里的类名和--theme数字对不上对照上表核对9 对应ey8 对应ez。处理主题覆盖与多页面应用界面已选主题优先于命令行这里有个容易踩的坑页面首次加载后你在界面选择器里选过的主题会存进浏览器的 localStorage键名cpp_thm之后的访问里它优先于服务端的--theme。改了启动参数但页面还是旧样子时手动在界面选择器里切换一次或用浏览器开发者工具清掉该站点的本地数据也可以临时在 URL 后加?theme9强制切一次。让所有页面共用同一份样式--css-browser只注入文件浏览器的 HTML分享页、登录页等其他页面不会加载它。想让所有页面统一改用--html-head把link追加到全部 HTML 页面的headcopyparty . --theme9 \ --html-headlink relstylesheet href/.themes/brand.css另外浏览器窗口外围的主题色Android Chrome 顶栏、Safari 标签色可以用--tcolor4da6ff单独改值是 3 位或 6 位十六进制建议与--a保持一致。从参数到样式只差一个类名本文解决的核心问题是copyparty 主题定制 --theme数字选定根元素类名 一组 CSS 变量你的配色方案就是针对该类别写变量覆盖再用--css-browser挂载。如果你的主题对别人也有用可以按.themes的约定把 CSS 放进 contrib/themes/ 提交参与方式见 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），仅供参考
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 的文件浏览器你看到的是灰黑色的默认界面。你想把配色换成品牌色或者换成某种特定风格但--theme的帮助只显示(0..9)看不出数字之间差在哪更不知道自己的样式从哪注入。本文用 3 个启动参数加 1 个 CSS 文件跑通 copyparty 主题定制范围只覆盖 CSS 层的视觉改动不涉及--js-browser的行为扩展。理解主题机制根类加 CSS 变量copyparty 的主题机制是一层 CSS 变量覆盖启动时--theme的数字被换算成两个字符的类名写到html元素上样式表为每个类名定义一组--fg前景色、--bg背景色、--a强调色等变量界面全部颜色都从这些变量取值。你可以把主题理解成一套皮肤包整套皮肤的观感由这个类名下的变量决定。它决定了只要写清某一类名下的变量覆盖就能改遍文件浏览器的配色、字体和间距。数字与类名的换算是确定性的第一个字符取a到x按数字除以 2的顺序第二个字符偶数取z、奇数取y。内置的 10 个主题名定义在 copyparty/web/browser.js完整换算逻辑在 copyparty/svchub.py数字类名内置主题名0azclassic dark1ayclassic light2bzpm-monokai3byflat light4czvice5cyhotdog stand6dzhacker7dyhi-con8ezphi95 dark9eyphi95变量默认值集中在 copyparty/web/ui.css。三个相关参数的默认值参数默认值作用--theme0默认主题的数字编号0..9--themes10界面内主题选择器显示的选项数--css-browser空附加到文件浏览器页面的 CSS 的 URL挂载自定义主题三步实践复制主题文件到 .themes--css-browser收的是 URL样式文件必须放在被服务的目录webroot里才能被访问。仓库自带一个完整的自定义主题示例蓝屏风格以它为蓝本。在 webroot 目录下执行第一条路径换成你仓库 clone 目录的实际路径mkdir -p .themes cp copyparty/contrib/themes/bsod.css .themes/ cp copyparty/contrib/themes/bsod.png .themes/执行后 webroot 下多出.themes目录文件在浏览器里可通过/.themes/bsod.css访问。覆盖 CSS 变量写自定义配色主题文件的本质是针对某个类名覆盖一组变量。仓库示例针对html.ey对应--theme9你可以只改 4 个变量做出自己的深色配色保存为.themes/brand.csshtml.ey { --fg: #e0e0e0; /* 前景文字 */ --bg: #102a43; /* 主背景 */ --bg-u2: #16324f;/* 次要背景提示框等 */ --a: #4da6ff; /* 链接与按钮强调色 */ }保存后其余界面元素边框、按钮、表格条纹沿用该主题的原有取值一份几行的 CSS 就能让整套界面统一换色。用三个参数启动服务回到 webroot 启动服务第一个参数是当前目录表示它就是 webrootcopyparty . --themes10 --theme9 --css-browser/.themes/brand.css跑起来是这样的浏览器打开文件列表页面以主题 9phi95 light为基底颜色按上面的覆盖值渲染--themes10让界面内的主题选择器保持默认 10 项。排错提示样式没生效时先用浏览器直接打开/.themes/brand.css404 说明文件没放进被服务的目录内容正常但配色没变多半是 CSS 里的类名和--theme数字对不上对照上表核对9 对应ey8 对应ez。处理主题覆盖与多页面应用界面已选主题优先于命令行这里有个容易踩的坑页面首次加载后你在界面选择器里选过的主题会存进浏览器的 localStorage键名cpp_thm之后的访问里它优先于服务端的--theme。改了启动参数但页面还是旧样子时手动在界面选择器里切换一次或用浏览器开发者工具清掉该站点的本地数据也可以临时在 URL 后加?theme9强制切一次。让所有页面共用同一份样式--css-browser只注入文件浏览器的 HTML分享页、登录页等其他页面不会加载它。想让所有页面统一改用--html-head把link追加到全部 HTML 页面的headcopyparty . --theme9 \ --html-headlink relstylesheet href/.themes/brand.css另外浏览器窗口外围的主题色Android Chrome 顶栏、Safari 标签色可以用--tcolor4da6ff单独改值是 3 位或 6 位十六进制建议与--a保持一致。从参数到样式只差一个类名本文解决的核心问题是copyparty 主题定制 --theme数字选定根元素类名 一组 CSS 变量你的配色方案就是针对该类别写变量覆盖再用--css-browser挂载。如果你的主题对别人也有用可以按.themes的约定把 CSS 放进 contrib/themes/ 提交参与方式见 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），仅供参考
实战与最佳实践)
