Custom Profile Colors

63
June 15, 2018, at 5:20 PM

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

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

READ ALSO
how to make row next to each other in css?

how to make row next to each other in css?

I am having trouble of putting my row next to each other in css all I want to do is to show my row next to each other horizontal rather than verticallyThanks for the help

104
Is using href=&ldquo;javascript:&rdquo; dangerous in Angular 2+?

Is using href=“javascript:” dangerous in Angular 2+?

From the Angular security guide, there's this:

108
How do I make every canvas object &ldquo;clickable&rdquo;?

How do I make every canvas object “clickable”?

I figured how to detect a mouseclick in canvasNow I need to solve these 2 things:

85
fullcalendar height not considering surrounding container

fullcalendar height not considering surrounding container

I have a vuejs project which I am integrating vue-fullcalendar into and I am running into an issue where the

129