自定义配置文件颜色

Question

在 Twitter 上，用户可以选择一种自定义颜色，然后在整个个人资料中使用该颜色。如何使用 HTML、(S)CSS 和 Angular 5 实现类似的功能？

照原样，我正在做的例子：

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

这可行，但问题是：

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

通常，我会使用 lighten() 和 darken() 函数通过 SCSS 来实现这一点。但是，在运行时从数据库中获取用户的颜色并使用style 属性时，我显然不能这样做。

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

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

Answer 1

您可以让用户选择 HEX 颜色并将 transform 设置为 hsl。比使用ngStyle directive 应用样式。示例：

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

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