如何动态更改 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... */