如何動態更改ASP.NET MVC Core2中的CSS變量？

Question

我希望用戶能夠指定他喜歡的顏色。 然后，整個頁面應更改為此特定的配色方案。

我的CSS以此為基礎：

:root {
    --maincolor: black;
}

按下按鈕或類似的東西動態地在CSS內更改此變量的最佳方法是什么？

PS：我希望只設置一次該值，然后再進行設置

編輯：對我的解決方案：

<script>
    var color = "@Html.ViewData["Color"]";
    document.body.style.setProperty('--maincolor', color);
</script>

足以改變--maincolor我想要的。 要設置顏色，請將其放入控制器中：

ViewData["Color"] = "red"

Answer 1

我認為，最好的選擇是將用戶關聯到CSS類，而不是顏色。 然后，更改每個用戶的類別變得微不足道。

例如，您可以從數據庫或其他持久性方法中存儲和檢索此CSS類。 然后，在檢索時，您可以像這樣簡單地通過Razor將類添加到元素中：

<div class="@UserColorClassName">
    <p>
        Any text you like here for User: @UserName
    </p>
</div>

此方法也有其他變體。 例如，您可以創建一個“ UserCSSClasses”數據庫表，該表將容納不同用戶的類名和屬性。

或者，您可以只存儲CSS十六進制顏色並將其與用戶關聯。

此實現的示例如下：

<div style="color: @(!string.IsNullOrEmpty(UserHexColor) ? UserHexColor : "")">
    <p>
        Any text you like here for User: @UserName
    </p>
</div>

編輯：聽起來您需要對每個用戶進行很多更改，而不僅僅是一種顏色。 為此，我建議以下解決方案：

1. 如上所述，將用戶/類關聯存儲在數據庫或其他持久性方法中。
2. 不要將類應用於視圖內部的元素，而應將其應用於body元素或包含元素的元素。

這樣，您可以使用CSS覆蓋更改任意多個類：

body.User001 h1 {
    color: red;
}

body.User001 p {
    color: #c1c1c1;
}

body.User001 p span.caption {
    color: red;
}

body.User002 h1 {
    color: blue;
}

/* etc... */