Custom Profile Colors

Question

On Twitter, users can choose a custom color that is then used throughout their profile. How can I implement a similar functionality using HTML, (S)CSS and Angular 5?

As is, I am doing for example:

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

This works, however the problems are:

Clutters the html files with lots of style attributes
I would like to be able to use the color differently for different media queries
I would like to use different shades of the user's color throughout their profile

Normally, I would achieve this with SCSS using the lighten() and darken() functions. However, I obviously cannot do that when getting the user's color at runtime from the database and using the style attribute.

How would you go about achieving custom profile colors for your users? Would you also use the style attribute, or is there an alternative (using Angular). How would you achieve variations of the user's color?

Can this be achieved with CSS Variables var()?

One possible solution is to create color profiles that hard code these tints and shades into an array for easy access throughout your templates. — eqwert, Jun 14 '18 at 17:37

score 1 · Accepted Answer · answered Jun 14 '18 at 17:49

1

You could get the users picked HEX color and transform it to hsl. Than apply the style with the ngStyle directive. Example:

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

You can then tweak the lightness of the hsl background color (the third parameter).

answered Jun 14 '18 at 17:49

Gregor Ojstersek

1,369
7
12

1

Thank you, this is a great idea! I've used the conversion code found in https://stackoverflow.com/questions/3732046/how-do-you-get-the-hue-of-a-xxxxxx-colour – Ben Jun 18 '18 at 19:07

Custom Profile Colors

1 Answers1