用戶可配置的CSS顏色

Question

我作爲軟件開發人員工作了兩個多月。我受僱於一家管理大公司手機計劃的公司。我主要工作在兩個一起工作的Web應用程序，用戶可以登錄和訂購新設備，升級設備，掛起設備等的「前端」。以及主管可以登錄並更改前端各個方面（即用戶，手機捆綁）的「後端」。

我已經給了後端用戶配置前端主要UI元素的顏色的能力，以便用戶的門戶可以與公司的顏色匹配。

我一直在玩弄樣式表，以查明各種元素的顏色設置在哪裏，但我不確定如何在每個用戶的基礎上對樣式表進行更改。任何想法或建議表示讚賞。

Answer 1

有幾種不同的方法可以做到這一點。

---

也許最簡單的方法是使用Javascript。當用戶選擇一個配色方案時，您將其記錄併發送給客戶端Javascript（可能通過AJAX請求），然後Javascript自動通過內聯style="..."標籤直接應用樣式，或者直接應用類樣式直接綁定到樣式表 - 所有可能的顏色方案都已加載，這是此解決方案稍微有點落後的地方。

要麼你內聯所有的自定義樣式，這是不好的做法，或者你的樣式表是方式比它應該更大。從它的聲音來看，它們不僅僅是想要「主題」，這些相對容易，他們想要從顏色選擇器中挑選顏色來主題化。

---

您還可以使用SASS動態生成樣式表。有SASS可變片（這是動態生成的一部分）是這樣的：

$color_table_header: [...]; 
$color_table_footer: [...]; 

$color_header_basic: [...]; 

... 

，並填寫動態那些顏色，通過某種其他任何作品的輕量級的Node.js服務器。這將需要更多的存儲空間（因爲您必須爲每個想要自定義顏色的用戶生成一個樣式表）。話雖如此，您爲自定義用戶主題生成的樣式表只需覆蓋現有的主要樣式表，而不是爲每個主題生成完整頁樣式表。

然後，它很簡單：檢查用戶是否有自定義樣式，並通過修改頁面視圖來提供該樣式表以及普通樣式表。