How to automatically change text color base on background color in Angularjs?

Question

I'm using ng-style to mark something like the label of a team in teams list, and i want to make the name of team will be change base on its color which filled in background of cover area of the team's name. The problem that is if the brightness of background color is gonna be dark, the text color will make the team's name gonna be dim and user unable to read. So how can i do that?

HTML:

<tr ng-repeat="team in teams">
   <td>{{ team.id }}</td>
   <td><span ng-style="setColor(team.color)" style="color: #888;">{{ team.name }}</span></td>
</tr>

Controller:

app.controller('teamController', function($scope){
  $scope.teams = [
     {
       id: '1',
       name: 'Driver',
       color: '#b9774d'
     },
     {
       id: '2',
       name: 'Finance',
       color: '#FEFFB3'
     }
  ];

  $scope.setColor = function (color){
     return {background: color};
  }
});

There's an article talks about this case very throughly on [css-tricks](https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/), you should check it out. — LeoCantThinkofAName, Aug 02 '19 at 03:42
Thanks for your answer i'll read this post to dig css more deeper. =D — Steven Dang, Aug 02 '19 at 07:18

score 1 · Answer 1 · answered Aug 02 '19 at 04:04

Here is a function that creates another color based on an input color:

 $scope.setColor = function (color) {
    colorInt = parseInt(color.slice(1),16);
    //Create other color
    otherColor = colorInt ^ 0x1FFFFFF;
    console.log(colorInt.toString(16),otherColor.toString(16));
    return {
      background: color,
      color: '#'+otherColor.toString(16).slice(1)
    };
 }

The DEMO on PLNKR

score 0 · Answer 2 · answered Aug 02 '19 at 03:20

To use ng-repeat in table, you must have to apply ng-repeat in tbody tag of table.

Updated plunker link is Working Plunker

The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row). The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array. For each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.

I will change it later, but my main problem is the dynamic text color with the background color. — Steven Dang, Aug 02 '19 at 03:22

score 0 · Accepted Answer · answered Aug 02 '19 at 07:17

Finally, i found for my own solution. I have a function which will convert the hex string to rgb then i use some logic to handle the font color. Here is some code.

$scope.setColor = function (color) {
    var rbg = hex2rgb(color);
    var o = Math.round(((parseInt(rbg[0]) * 299) +
            (parseInt(rbg[1]) * 587) +
            (parseInt(rbg[2]) * 114)) / 1000);
    var force = (o > 200) ? '#888' : 'white';
    return {background: color, color: force};
};
function hex2rgb( colour ) {
    var r,g,b;
    if ( colour.charAt(0) === '#' ) {
        colour = colour.substr(1);
    }
    if ( colour.length === 3 ) {
        colour = colour.substr(0,1) + colour.substr(0,1) + colour.substr(1,2) + colour.substr(1,2) + colour.substr(2,3) + colour.substr(2,3);
    }
    r = colour.charAt(0) + '' + colour.charAt(1);
    g = colour.charAt(2) + '' + colour.charAt(3);
    b = colour.charAt(4) + '' + colour.charAt(5);
    r = parseInt( r,16 );
    g = parseInt( g,16 );
    b = parseInt( b ,16);
    return [r, g, b];
}

Reference source:

How to automatically change text color base on background color in Angularjs?

3 Answers3