自定义配置文件颜色

在Twitter上,用户可以选择一种自定义的颜色,然后在他们的个人资料中使用。如何使用HTML,(S)CSS和Angular5实现类似的功能?

例如,我正在做:

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

这是可行的,但问题是:

• 将HTML文件与大量 style 属性
• 我想在不同的媒体查询中使用不同的颜色
• 我想用 不同的色调 用户的整个配置文件中的颜色

通常,我会使用 lighten() 和 darken() 功能。但是,在运行时从数据库获取用户的颜色并使用 风格 属性。

如何为用户实现自定义配置文件颜色?您是否也会使用样式属性,或者是否有其他选项(使用角度)。如何实现用户颜色的变化?

这可以用css变量实现吗 var() 是吗?