自定义配置文件颜色

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颜色并将其转换为hsl。然后使用 ngStyle 指令应用样式。例：

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

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