自定义配置文件颜色
Custom Profile Colors
在 Twitter 上，用户可以选择一种自定义颜色，然后在整个个人资料中使用该颜色。如何使用 HTML、(S)CSS 和 Angular 5 实现类似的功能？
原样，我正在做的例子：
<h1 style="color: {{user.color}};">
{{ user.name }}
</h1>
这有效，但问题是：
- 使用大量
style 属性使 html 文件混乱
- 我希望能够针对不同的媒体查询使用不同的颜色
- 我想在整个个人资料中使用 用户颜色的不同色调
通常，我会使用 lighten() 和 darken() 函数通过 SCSS 来实现。但是，在运行时从数据库获取用户的颜色并使用 style 属性时，我显然不能这样做。
您将如何为您的用户实现自定义配置文件颜色？您是否也使用 style 属性，或者是否有替代方法（使用 Angular）。您将如何实现用户颜色的变化？
可以用CSS变量实现var()吗？
您可以让用户选择 HEX 颜色和 transform it to hsl. Than apply the style with the ngStyle directive。示例：
<some-element [ngStyle]="{'background-color': 'hsl(120, 100%, 50%)'}">...</some-element>
然后您可以调整 hsl 背景颜色的亮度（第三个参数）。
在 Twitter 上，用户可以选择一种自定义颜色，然后在整个个人资料中使用该颜色。如何使用 HTML、(S)CSS 和 Angular 5 实现类似的功能？
原样，我正在做的例子：
<h1 style="color: {{user.color}};">
{{ user.name }}
</h1>
这有效，但问题是：
- 使用大量
style属性使 html 文件混乱 - 我希望能够针对不同的媒体查询使用不同的颜色
- 我想在整个个人资料中使用 用户颜色的不同色调
通常，我会使用 lighten() 和 darken() 函数通过 SCSS 来实现。但是，在运行时从数据库获取用户的颜色并使用 style 属性时，我显然不能这样做。
您将如何为您的用户实现自定义配置文件颜色？您是否也使用 style 属性，或者是否有替代方法（使用 Angular）。您将如何实现用户颜色的变化？
可以用CSS变量实现var()吗？
您可以让用户选择 HEX 颜色和 transform it to hsl. Than apply the style with the ngStyle directive。示例：
<some-element [ngStyle]="{'background-color': 'hsl(120, 100%, 50%)'}">...</some-element>
然后您可以调整 hsl 背景颜色的亮度（第三个参数）。