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上周值機同事盯著瀏覽器里的文件窗口看了半天冒出一句這界面怎么三年一個樣 文件服務器常年開著長得確實該翻新。想動前端大工程沒必要。copyparty主題定制其實很輕啟動時加一個參數就能換內置風格寫幾行CSS還能換成你自己的配色。3分鐘看到效果一個參數換掉默認風格先跑通最短路徑一條命令# 啟動時指定主題編號0..9 共10套內置風格后面跟你要共享的目錄 copyparty --theme9 ~/media打開瀏覽器整個文件瀏覽界面的配色、文字、按鈕高亮都會跟著--theme的編號走。10套預設各有名字比如 0 是經典深色、6 是黑客綠、9 是高亮的 phi95 淺色——數字不同同一套程序就長出不同的臉。 如果嫌每次啟動都要敲參數也可以不重啟打開頁面里的設置面板找到主題下拉框選一個編號即可選擇會存在瀏覽器本地。它是怎么做到的給頁面換一張色卡打個比方整個界面像一面已經刷好底色的墻而 ui.css 里定義了一組色卡專業叫法是 CSS 自定義屬性CSS custom properties形如--fg文字顏色、--bg-u2背景色、--a鏈接色。頁面渲染時并不寫死任何顏色而是去讀這些色卡的值。所謂主題本質就是給html根元素掛上不同的類名比如az、ey不同類名下重新定義色卡里的變量整頁顏色瞬間全部換掉。所以換皮膚不用碰任何 JS改變量即可。由淺入深三檔copyparty界面怎么改由你說了算第一檔啟動參數切預設10套風格直接選這一檔不需要寫一行代碼。啟動參數--theme0到--theme9對應10套內置風格設置面板頁面設置里的主題下拉框不重啟即可切換臨時體驗在地址后加?theme5僅當前頁面生效三個入口殊途同歸都是改那個主題編號。第二檔改3個變量換個文件服務器配色預設不夠用改色卡就行。新建一個CSS文件只覆蓋你要動的變量其余繼承默認。假設你平時用--theme0對應類名az可以這樣寫/* 保存為 .themes/night.css稍后用 --css-browser 加載 */ html.az { --fg: #e8e8e8; /* 主文字色 */ --bg-u2: #14181f; /* 大面積背景色 */ --a: #4da6ff; /* 鏈接與高亮色 */ }注意選擇器里的az必須和你當前主題編號對應的類名一致偶數編號是深色z結尾奇數是淺色y結尾變量名打錯則靜默失效。第三檔寫一份自己的CSS綁定到主題槽位? 想要一個完整的自定義主題套路和第二檔一樣只是變量寫得多一些、還可以加背景圖。倉庫里就躺著一份現成范本 bsod.css它一口氣重定義了二三十個變量把界面刷成了Windows藍屏風格。關鍵是綁定槽位把你的樣式掛到某個主題編號上。若想新增編號用--themes把槽位總數擴到11再用--theme10指向它# --themes11 表示槽位總數擴到 0..10新樣式掛在 10 號槽 copyparty --themes11 --theme10 --css-browser/.themes/mine.css ~/media完整案例把倉庫自帶的藍屏主題裝上去下面以倉庫里的 BSOD 藍屏主題為例子從零走一遍以~/srv作為共享目錄為例。在 webroot 下建主題目錄.themes# 1. 建目錄把主題樣式和背景圖拷進去圖片必須與 css 同目錄 mkdir -p ~/srv/.themes cp contrib/themes/bsod.css contrib/themes/bsod.png ~/srv/.themes/啟動時綁定 9 號槽位并加載你的樣式文件# --theme9 指向槽位--css-browser 給出樣式文件的 URL 路徑 copyparty --themes10 --theme9 --css-browser/.themes/bsod.css ~/srv刷新瀏覽器藍底白字加右上角的哭臉就出現了整套界面風格就此定型。之后想換回默認去掉后三個參數即可樣式文件留在.themes里隨時可再掛上。常見坑速查換風格前先掃一眼這張表癥狀原因解法改了--theme沒變化之前曾在設置面板里手動切過主題瀏覽器本地存儲優先于啟動參數在設置面板里重新選一次或清掉該站點的 localStorage編號填 10 無效--theme合法范圍是 0..9先用 0..9想加新槽位要配--themes一起改自定義CSS完全沒生效--css-browser收的是 URL 路徑文件必須放在 webroot 下寫成/.themes/xxx.css確認目錄在共享根目錄內樣式里引用的背景圖不顯示url(bsod.png)這類路徑是相對 CSS 文件本身的圖片放進 CSS 同目錄別只拷樣式文件選擇器寫了html.az卻沒作用類名要和當前主題編號匹配0 號槽才是az核對編號偶數→z結尾奇數→y結尾寫在最后到這里你應該已經會三件事一個參數切預設、幾個變量改配色、一份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），僅供參考 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上周值機同事盯著瀏覽器里的文件窗口看了半天冒出一句這界面怎么三年一個樣 文件服務器常年開著長得確實該翻新。想動前端大工程沒必要。copyparty主題定制其實很輕啟動時加一個參數就能換內置風格寫幾行CSS還能換成你自己的配色。3分鐘看到效果一個參數換掉默認風格先跑通最短路徑一條命令# 啟動時指定主題編號0..9 共10套內置風格后面跟你要共享的目錄 copyparty --theme9 ~/media打開瀏覽器整個文件瀏覽界面的配色、文字、按鈕高亮都會跟著--theme的編號走。10套預設各有名字比如 0 是經典深色、6 是黑客綠、9 是高亮的 phi95 淺色——數字不同同一套程序就長出不同的臉。 如果嫌每次啟動都要敲參數也可以不重啟打開頁面里的設置面板找到主題下拉框選一個編號即可選擇會存在瀏覽器本地。它是怎么做到的給頁面換一張色卡打個比方整個界面像一面已經刷好底色的墻而 ui.css 里定義了一組色卡專業叫法是 CSS 自定義屬性CSS custom properties形如--fg文字顏色、--bg-u2背景色、--a鏈接色。頁面渲染時并不寫死任何顏色而是去讀這些色卡的值。所謂主題本質就是給html根元素掛上不同的類名比如az、ey不同類名下重新定義色卡里的變量整頁顏色瞬間全部換掉。所以換皮膚不用碰任何 JS改變量即可。由淺入深三檔copyparty界面怎么改由你說了算第一檔啟動參數切預設10套風格直接選這一檔不需要寫一行代碼。啟動參數--theme0到--theme9對應10套內置風格設置面板頁面設置里的主題下拉框不重啟即可切換臨時體驗在地址后加?theme5僅當前頁面生效三個入口殊途同歸都是改那個主題編號。第二檔改3個變量換個文件服務器配色預設不夠用改色卡就行。新建一個CSS文件只覆蓋你要動的變量其余繼承默認。假設你平時用--theme0對應類名az可以這樣寫/* 保存為 .themes/night.css稍后用 --css-browser 加載 */ html.az { --fg: #e8e8e8; /* 主文字色 */ --bg-u2: #14181f; /* 大面積背景色 */ --a: #4da6ff; /* 鏈接與高亮色 */ }注意選擇器里的az必須和你當前主題編號對應的類名一致偶數編號是深色z結尾奇數是淺色y結尾變量名打錯則靜默失效。第三檔寫一份自己的CSS綁定到主題槽位? 想要一個完整的自定義主題套路和第二檔一樣只是變量寫得多一些、還可以加背景圖。倉庫里就躺著一份現成范本 bsod.css它一口氣重定義了二三十個變量把界面刷成了Windows藍屏風格。關鍵是綁定槽位把你的樣式掛到某個主題編號上。若想新增編號用--themes把槽位總數擴到11再用--theme10指向它# --themes11 表示槽位總數擴到 0..10新樣式掛在 10 號槽 copyparty --themes11 --theme10 --css-browser/.themes/mine.css ~/media完整案例把倉庫自帶的藍屏主題裝上去下面以倉庫里的 BSOD 藍屏主題為例子從零走一遍以~/srv作為共享目錄為例。在 webroot 下建主題目錄.themes# 1. 建目錄把主題樣式和背景圖拷進去圖片必須與 css 同目錄 mkdir -p ~/srv/.themes cp contrib/themes/bsod.css contrib/themes/bsod.png ~/srv/.themes/啟動時綁定 9 號槽位并加載你的樣式文件# --theme9 指向槽位--css-browser 給出樣式文件的 URL 路徑 copyparty --themes10 --theme9 --css-browser/.themes/bsod.css ~/srv刷新瀏覽器藍底白字加右上角的哭臉就出現了整套界面風格就此定型。之后想換回默認去掉后三個參數即可樣式文件留在.themes里隨時可再掛上。常見坑速查換風格前先掃一眼這張表癥狀原因解法改了--theme沒變化之前曾在設置面板里手動切過主題瀏覽器本地存儲優先于啟動參數在設置面板里重新選一次或清掉該站點的 localStorage編號填 10 無效--theme合法范圍是 0..9先用 0..9想加新槽位要配--themes一起改自定義CSS完全沒生效--css-browser收的是 URL 路徑文件必須放在 webroot 下寫成/.themes/xxx.css確認目錄在共享根目錄內樣式里引用的背景圖不顯示url(bsod.png)這類路徑是相對 CSS 文件本身的圖片放進 CSS 同目錄別只拷樣式文件選擇器寫了html.az卻沒作用類名要和當前主題編號匹配0 號槽才是az核對編號偶數→z結尾奇數→y結尾寫在最后到這里你應該已經會三件事一個參數切預設、幾個變量改配色、一份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），僅供參考