自定义轮廓颜色

Question

在Twitter上，用户可以选择随后在其个人资料中使用的自定义颜色。如何使用HTML，（S）CSS和Angular 5实现类似的功能？

原样，我正在做的例子：

<h1 style="color: {{user.color}};">
    {{ user.name }}
</h1>

这有效，但问题是：

• 将包含大量style属性
的html文件混乱
• 我希望能够针对不同的媒体查询使用不同的颜色
• 我想在个人资料中使用不同色调的用户颜色

通常情况下，我会使用lighten()和darken()函数通过SCSS实现此目的。但是，在运行时从数据库获取用户颜色并使用style属性时，我显然无法做到这一点。

您将如何为用户实现自定义配置文件颜色？你也会使用style属性，还是有替代方法（使用Angular）。您将如何实现用户颜色的变化？

这可以通过CSS变量var()实现吗？

Answer 1

您可以让用户选择HEX颜色，将transform添加到hsl。比应用ngStyle directive的样式。例如：

<some-element [ngStyle]="{'background-color': 'hsl(120, 100%, 50%)'}">...</some-element>

然后您可以调整hsl背景颜色（第三个参数）的亮度。