Search code examples
htmlcssangularsasscss-variables

Custom Profile Colors

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()?

Solution

  • 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).