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嫌文件管理器界面太素想换个配色却不知从哪下手这篇文章按动手顺序讲先装上内置主题再改几个 CSS 变量最后做一整套自定义皮肤。 先跑起来copyparty 自带 10 套主题用--theme加一个 0 到 9 的数字即可指定启动时的默认外观# 第 0 套经典深色默认值 copyparty --theme0 # 第 6 套hacker 风 copyparty --theme6编号对应的名称是0 经典深色、1 经典浅色、2 monokai、3 扁平浅色、4 vice、5 hotdog、6 hacker、7 高对比、8 phi95 深色、9 phi95。如果连自定义 CSS 一起上仓库里现成的蓝屏主题用法是文件先放进 webroot 下的.themes目录copyparty --themes10 --theme9 --css-browser/.themes/bsod.css--themes10表示设置面板的主题下拉框保留 10 个选项--css-browser告诉浏览器在文件列表页额外加载这份样式表。 换装的底层逻辑内置主题的全部秘密页面加载时html元素会被打上一个两字母类名第一个字母选色板a 到 x第二个字母 y 是浅色、z 是深色CSS 里所有变量定义都挂在这个类名下。对照表如下参数或机制控制效果--theme0–9服务端默认主题9 对应类名ey0 对应az--themesN设置面板主题下拉框显示的前 N 项多出的项标为 custom--css-browserURL文件浏览器页面额外注入的 CSS 路径URL 路径不是磁盘路径URL 里加?themeN打开页面时强制切到第 N 套主题localStorage 的cpp_thm浏览器记住你上次选的主题会覆盖--theme默认值html.代码类下的变量真正决定配色的 CSS 变量最常改的变量取自仓库蓝屏主题的写法变量管什么--fg/--fg-max正文文字色 / 高亮文字色--fg-weak次要文字、弱化元素--bg主背景色--bg-d1--bg-d2--bg-d3分层背景深浅递进--bg-u2--bg-u5各 UI 区块背景--a/--a-hil链接色 / 链接悬停色--btn-bg/--btn-fg按钮底色 / 按钮文字--tree-bg侧边目录树背景--scroll滚动条颜色关键规则一句话自定义 CSS 的选择器必须写成html.主题代码且代码要和--theme对得上否则样式表加载了也不会命中。 常见改法照抄即可怎么只换配色3 个变量就能把整个界面挪到新色底。假设--theme0类名az写一份 CSS 放进.themes目录/* 深蓝黑底配合 --theme0 和 --css-browser/.themes/mine.css */ html.az { --bg: #141a21; /* 主背景 */ --fg: #d5dbe3; /* 正文文字 */ --fg-max: #fff; /* 高亮文字 */ }效果按钮、目录树、滚动条等所有跟--bg、--fg走的部分一并跟着变不用逐个组件改。怎么给文件加角标仓库自带图标插件 contrib/plugins/browser-icons.css原理就是在网格视图的文件链接上画伪元素。自己加一条也只要几行/* 网格视图里给 mp4 文件加播放角标可并入你的主题 CSS */ #ggrida[href$.mp4i]:before { content: ▶; color: #fff; background: rgba(0,0,0,.6); }效果缩略图右下角出现播放三角一眼认出视频文件。怎么做一整套主题参考仓库的蓝屏主题 contrib/themes/bsod.css约 60 行变量覆盖把--bg系全部压成蓝屏蓝再挂一张背景图/* 配合 --theme9类名 ey整页变成蓝屏风 */ html.ey { --bg: #2067b2; --fg: #fff; --fg-weak: #5fcbec; } html.ey { background: url(bsod.png) top 5em right 4.5em no-repeat fixed var(--bg); }把bsod.css和bsod.png拷进 webroot 的.themes文件夹用前面那行带--css-browser的命令启动即可。⚠️ 翻车点速查现象成因解法CSS 已加载但页面没变化选择器写的类名和当前主题不匹配比如--theme0却写了html.ey按编号重算类名偶数编号是z结尾、奇数是y首字母按 a 起排改了--theme浏览器还是老样子该浏览器的 localStorage 存了cpp_thm优先于服务端默认值在设置面板重新选一次主题或链接后加?themeN强制--css-browser生效不了、样式 404它要的是 URL 路径不是磁盘绝对路径且文件必须能被 webroot 访问文件放进 webroot 下如.themes/参数写/.themes/xxx.css变量写在:root下被盖回原样内置主题规则挂在html.代码上优先级更高自定义变量同样写在html.代码里 延伸阅读内置样式与全部主题变量定义copyparty/web/ui.css蓝屏主题完整示例含背景图contrib/themes/项目文档docs/想提交自己的主题看CONTRIBUTING.md主题机制说白了就是「类名定色板 CSS 变量填颜色」理解这一点之后改配色是 3 个变量换图标是 4 行伪元素整套皮肤也就是照着 bsod 抄一遍的事。【免费下载链接】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 步：内置配色加自定义 CSS 全讲清
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嫌文件管理器界面太素想换个配色却不知从哪下手这篇文章按动手顺序讲先装上内置主题再改几个 CSS 变量最后做一整套自定义皮肤。 先跑起来copyparty 自带 10 套主题用--theme加一个 0 到 9 的数字即可指定启动时的默认外观# 第 0 套经典深色默认值 copyparty --theme0 # 第 6 套hacker 风 copyparty --theme6编号对应的名称是0 经典深色、1 经典浅色、2 monokai、3 扁平浅色、4 vice、5 hotdog、6 hacker、7 高对比、8 phi95 深色、9 phi95。如果连自定义 CSS 一起上仓库里现成的蓝屏主题用法是文件先放进 webroot 下的.themes目录copyparty --themes10 --theme9 --css-browser/.themes/bsod.css--themes10表示设置面板的主题下拉框保留 10 个选项--css-browser告诉浏览器在文件列表页额外加载这份样式表。 换装的底层逻辑内置主题的全部秘密页面加载时html元素会被打上一个两字母类名第一个字母选色板a 到 x第二个字母 y 是浅色、z 是深色CSS 里所有变量定义都挂在这个类名下。对照表如下参数或机制控制效果--theme0–9服务端默认主题9 对应类名ey0 对应az--themesN设置面板主题下拉框显示的前 N 项多出的项标为 custom--css-browserURL文件浏览器页面额外注入的 CSS 路径URL 路径不是磁盘路径URL 里加?themeN打开页面时强制切到第 N 套主题localStorage 的cpp_thm浏览器记住你上次选的主题会覆盖--theme默认值html.代码类下的变量真正决定配色的 CSS 变量最常改的变量取自仓库蓝屏主题的写法变量管什么--fg/--fg-max正文文字色 / 高亮文字色--fg-weak次要文字、弱化元素--bg主背景色--bg-d1--bg-d2--bg-d3分层背景深浅递进--bg-u2--bg-u5各 UI 区块背景--a/--a-hil链接色 / 链接悬停色--btn-bg/--btn-fg按钮底色 / 按钮文字--tree-bg侧边目录树背景--scroll滚动条颜色关键规则一句话自定义 CSS 的选择器必须写成html.主题代码且代码要和--theme对得上否则样式表加载了也不会命中。 常见改法照抄即可怎么只换配色3 个变量就能把整个界面挪到新色底。假设--theme0类名az写一份 CSS 放进.themes目录/* 深蓝黑底配合 --theme0 和 --css-browser/.themes/mine.css */ html.az { --bg: #141a21; /* 主背景 */ --fg: #d5dbe3; /* 正文文字 */ --fg-max: #fff; /* 高亮文字 */ }效果按钮、目录树、滚动条等所有跟--bg、--fg走的部分一并跟着变不用逐个组件改。怎么给文件加角标仓库自带图标插件 contrib/plugins/browser-icons.css原理就是在网格视图的文件链接上画伪元素。自己加一条也只要几行/* 网格视图里给 mp4 文件加播放角标可并入你的主题 CSS */ #ggrida[href$.mp4i]:before { content: ▶; color: #fff; background: rgba(0,0,0,.6); }效果缩略图右下角出现播放三角一眼认出视频文件。怎么做一整套主题参考仓库的蓝屏主题 contrib/themes/bsod.css约 60 行变量覆盖把--bg系全部压成蓝屏蓝再挂一张背景图/* 配合 --theme9类名 ey整页变成蓝屏风 */ html.ey { --bg: #2067b2; --fg: #fff; --fg-weak: #5fcbec; } html.ey { background: url(bsod.png) top 5em right 4.5em no-repeat fixed var(--bg); }把bsod.css和bsod.png拷进 webroot 的.themes文件夹用前面那行带--css-browser的命令启动即可。⚠️ 翻车点速查现象成因解法CSS 已加载但页面没变化选择器写的类名和当前主题不匹配比如--theme0却写了html.ey按编号重算类名偶数编号是z结尾、奇数是y首字母按 a 起排改了--theme浏览器还是老样子该浏览器的 localStorage 存了cpp_thm优先于服务端默认值在设置面板重新选一次主题或链接后加?themeN强制--css-browser生效不了、样式 404它要的是 URL 路径不是磁盘绝对路径且文件必须能被 webroot 访问文件放进 webroot 下如.themes/参数写/.themes/xxx.css变量写在:root下被盖回原样内置主题规则挂在html.代码上优先级更高自定义变量同样写在html.代码里 延伸阅读内置样式与全部主题变量定义copyparty/web/ui.css蓝屏主题完整示例含背景图contrib/themes/项目文档docs/想提交自己的主题看CONTRIBUTING.md主题机制说白了就是「类名定色板 CSS 变量填颜色」理解这一点之后改配色是 3 个变量换图标是 4 行伪元素整套皮肤也就是照着 bsod 抄一遍的事。【免费下载链接】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），仅供参考