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每次點開 copyparty 的文件服務器界面看到的都是同一套灰黑配色——它很好用但沒有你的味道。其實 copyparty 的主題定制門檻并不高內置 10 套配色一鍵切換再配合幾個 CSS 變量就能調出專屬界面。30 秒嘗鮮一條命令切換 copyparty 內置主題先別研究原理直接看效果。copyparty 內置 10 套預設主題編號 0~90 是默認灰黑加一個--theme參數就能切換copyparty --theme3刷新瀏覽器界面色調整個變了。就這一步說明你已經掌握了 80% 的主題定制能力——剩下的只是換顏色。看懂主題機制CSS 變量 根元素類名copyparty 的界面樣式定義在 copyparty/web/ui.css 里核心思路一句話把顏色抽成 CSS 變量主題切換就是給html根元素掛不同的類名整組變量隨之換掉。比如--theme0時 html 元素會帶上類似az的類名編號除以 2 定字母單雙數定深淺底偶數 z 深色、奇數 y 淺色然后 css 里寫html.az { --fg: ... }就能覆蓋這一組變量。常用變量對照變量控制什么--fg/--fg-max正文色 / 高亮文字色--bg-u2主背景色--bg-u5輸入框、卡片等次級背景--a/--a-hil鏈接色 / 鏈接高亮色--btn-bg按鈕底色--scroll滾動條顏色所以換主題的本質就是找到這些變量按自己的喜好改一遍。從零打造自己的主題文件放哪、參數怎么寫完整流程四步跟著做就行。1. 建文件。在你作為 webroot 的目錄下建一個.themes文件夾注意開頭的點放入自己的 css比如my-dark.css。2. 寫變量。假設用編號 9 的主題位對應類名html.ey文件內容可以很短html.ey { --fg: #e8e8e8; --bg-u2: #101418; --bg-u5: #1f262e; --a: #4da6ff; }只改 4 個變量就能得到一個偏藍的深色主題其余變量自動沿用默認值。3. 加啟動參數。關鍵在這一步用--css-browser把你的 css 掛進頁面copyparty --themes10 --theme9 \ --css-browser/.themes/my-dark.css4. 驗證生效。瀏覽器打開界面如果配色變了就成了再看下頁面源碼head里應該多出一條指向/.themes/my-dark.css的樣式引用。進階玩法圖標、品牌色與高對比模式變量改完配色后還有三個實用方向每個都有現成參考。按文件類型加圖標。contrib/plugins/browser-icons.css 是個很好的模板它用#ggrida[href$.mp4i]:before這類選擇器給視頻縮略圖中央蓋一個半透明?給音頻文件加音符。照著加幾條.pdf、.zip的規則文件列表一眼就能分清類型。css 放到 webroot 的子目錄里同樣用--css-browser引用即可。植入品牌色。團隊服務器想統一視覺只覆蓋三個變量就夠--a主色、--a-hil高亮、--btn-bg按鈕。想做得更整體可以翻一下 contrib/themes/bsod.css——那個藍屏主題就是把 30 多個變量成組替換效果非常統一。無障礙高對比主題。給視力不好的同事可以這樣加一層html.ey { --fg: #ffffff; --bg-u2: #000000; --bg-u5: #222222; font-size: 110%; }純黑底、純白字、稍大的字號夜間和弱光環境下可讀性明顯更好。踩坑清單主題不生效先看這四處路徑沒寫對點。.themes是隱藏目錄--css-browser里別漏掉開頭的.文件也不在你服務的 webroot 下404 了頁面會靜默回落到默認樣式。被瀏覽器緩存坑了。css 文件名沒變、內容變了瀏覽器可能還在用舊的。CtrlF5 強刷一次再判斷。以為和內置主題沖突了。其實自定義 css 是后加載的天然覆蓋內置樣式——類名對上編號對應az、ey這類類名、變量寫全你的就一定贏。想回退。刪掉--css-browser參數重啟即可或者把--theme改回 0一鍵回到默認灰黑。小結copyparty 的主題定制就是選個編號換內置配色寫幾條 CSS 變量換自己的顏色十分鐘就能上手。關鍵資源文檔目錄docs/主題示例藍屏主題contrib/themes/界面插件圖標等contrib/plugins/核心樣式變量copyparty/web/ui.css貢獻指南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 主題定制完整指南：簡單幾步，給文件服務器界面換上自己的皮膚
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每次點開 copyparty 的文件服務器界面看到的都是同一套灰黑配色——它很好用但沒有你的味道。其實 copyparty 的主題定制門檻并不高內置 10 套配色一鍵切換再配合幾個 CSS 變量就能調出專屬界面。30 秒嘗鮮一條命令切換 copyparty 內置主題先別研究原理直接看效果。copyparty 內置 10 套預設主題編號 0~90 是默認灰黑加一個--theme參數就能切換copyparty --theme3刷新瀏覽器界面色調整個變了。就這一步說明你已經掌握了 80% 的主題定制能力——剩下的只是換顏色。看懂主題機制CSS 變量 根元素類名copyparty 的界面樣式定義在 copyparty/web/ui.css 里核心思路一句話把顏色抽成 CSS 變量主題切換就是給html根元素掛不同的類名整組變量隨之換掉。比如--theme0時 html 元素會帶上類似az的類名編號除以 2 定字母單雙數定深淺底偶數 z 深色、奇數 y 淺色然后 css 里寫html.az { --fg: ... }就能覆蓋這一組變量。常用變量對照變量控制什么--fg/--fg-max正文色 / 高亮文字色--bg-u2主背景色--bg-u5輸入框、卡片等次級背景--a/--a-hil鏈接色 / 鏈接高亮色--btn-bg按鈕底色--scroll滾動條顏色所以換主題的本質就是找到這些變量按自己的喜好改一遍。從零打造自己的主題文件放哪、參數怎么寫完整流程四步跟著做就行。1. 建文件。在你作為 webroot 的目錄下建一個.themes文件夾注意開頭的點放入自己的 css比如my-dark.css。2. 寫變量。假設用編號 9 的主題位對應類名html.ey文件內容可以很短html.ey { --fg: #e8e8e8; --bg-u2: #101418; --bg-u5: #1f262e; --a: #4da6ff; }只改 4 個變量就能得到一個偏藍的深色主題其余變量自動沿用默認值。3. 加啟動參數。關鍵在這一步用--css-browser把你的 css 掛進頁面copyparty --themes10 --theme9 \ --css-browser/.themes/my-dark.css4. 驗證生效。瀏覽器打開界面如果配色變了就成了再看下頁面源碼head里應該多出一條指向/.themes/my-dark.css的樣式引用。進階玩法圖標、品牌色與高對比模式變量改完配色后還有三個實用方向每個都有現成參考。按文件類型加圖標。contrib/plugins/browser-icons.css 是個很好的模板它用#ggrida[href$.mp4i]:before這類選擇器給視頻縮略圖中央蓋一個半透明?給音頻文件加音符。照著加幾條.pdf、.zip的規則文件列表一眼就能分清類型。css 放到 webroot 的子目錄里同樣用--css-browser引用即可。植入品牌色。團隊服務器想統一視覺只覆蓋三個變量就夠--a主色、--a-hil高亮、--btn-bg按鈕。想做得更整體可以翻一下 contrib/themes/bsod.css——那個藍屏主題就是把 30 多個變量成組替換效果非常統一。無障礙高對比主題。給視力不好的同事可以這樣加一層html.ey { --fg: #ffffff; --bg-u2: #000000; --bg-u5: #222222; font-size: 110%; }純黑底、純白字、稍大的字號夜間和弱光環境下可讀性明顯更好。踩坑清單主題不生效先看這四處路徑沒寫對點。.themes是隱藏目錄--css-browser里別漏掉開頭的.文件也不在你服務的 webroot 下404 了頁面會靜默回落到默認樣式。被瀏覽器緩存坑了。css 文件名沒變、內容變了瀏覽器可能還在用舊的。CtrlF5 強刷一次再判斷。以為和內置主題沖突了。其實自定義 css 是后加載的天然覆蓋內置樣式——類名對上編號對應az、ey這類類名、變量寫全你的就一定贏。想回退。刪掉--css-browser參數重啟即可或者把--theme改回 0一鍵回到默認灰黑。小結copyparty 的主題定制就是選個編號換內置配色寫幾條 CSS 變量換自己的顏色十分鐘就能上手。關鍵資源文檔目錄docs/主題示例藍屏主題contrib/themes/界面插件圖標等contrib/plugins/核心樣式變量copyparty/web/ui.css貢獻指南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），僅供參考