Change color instead of background color of text in etherpad

I am trying to find solution for "Authorship color" in etherpad. People who never used etherpad, please ignore this question as they will not understand.

So normally "Authorship Color" is the color provided as a background-color of the text and it can be given as parameter when initializing the pad. It helps recognizing who has written what in pad.

I want to have white background for all text and change the text-color instead of background color depending upon the user. So its like if I provided red color when initializing the pad, I want to have red writing in pad instead of red background and white writing in pad(as usual).

Please dont put this question on hold as I dont have any specific code to provide related to this problem. Ask in comment instead, i will clear whatever is not understandable.

Thanks,

First of all, Thanks to everyone for not blocking or making this question on Post as no piece of code was provided.

I was about to put bounty on this question when I decided to try myself one more time and well I have resolved the problem after going through a lot. Though, it helped me understand etherpad better.

I want to list two important links related to etherpad:

1. https://github.com/ether/etherpad-lite/wiki
2. About src - https://github.com/ether/etherpad-lite/wiki/Introduction-to-the-source

They can be very important if you are trying to understand etherpad or want to do some modification yourself.

So here is how you do it:

In src/static/js/ace2_inner.js , go to setAuthorStyle function and Replace:

        // author color
        authorStyle.backgroundColor = bgcolor;
        parentAuthorStyle.backgroundColor = bgcolor;

        // text contrast
        if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5)
        {
          authorStyle.color = '#ffffff';
          parentAuthorStyle.color = '#ffffff';
        }else{
          authorStyle.color = null;
          parentAuthorStyle.color = null;
        }

        // anchor text contrast
        if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55)
        {
          anchorStyle.color = colorutils.triple2css(colorutils.complementary(colorutils.css2triple(bgcolor)));
        }else{
          anchorStyle.color = null;
        }

With:

authorStyle.backgroundColor = '#ffffff';
parentAuthorStyle.backgroundColor = '#ffffff';

authorStyle.color = bgcolor;
parentAuthorStyle.color = bgcolor;

And comment Out:

if ((typeof info.fade) == "number")
{
  bgcolor = fadeColor(bgcolor, info.fade);
}

Ofcource dont forget to restart process by bin/run.sh for changes to take place.

People, who are interested to understand how it works can keep reading.

So etherpad receives parameters with which etherpad has been initialized in src/static/js/pad.js so if you have defined: 'userColor' when you have initialized the pad, it will go in globalUserColor in mentioned file.

Then this variable globalUserColor populates pad.myUserInfo.colorId in same file.

Now in collab_client.js , this colorId gets stored in cssColor in function tellAceAuthorInfo and editor.setAuthorInfo is being called by giving parameter bgcolor: cssColor.

Now this function setAuthorInfo exists in src/static/js/ace2_inner.js which calls to other native function(same file) setAuthorStyle where we have made changes.

What I did is that instead of changing background color with provided variable bgcolor which actually holds userColor :

authorStyle.backgroundColor = bgcolor;
parentAuthorStyle.backgroundColor = bgcolor;

I changed backgroundColor to white(#ffffff) and color of text to bgcolor :

authorStyle.backgroundColor = '#ffffff';
 parentAuthorStyle.backgroundColor = '#ffffff';

 authorStyle.color = bgcolor;
 parentAuthorStyle.color = bgcolor;

I also deleted:

         // text contrast
         if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5)
         {
           authorStyle.color = '#ffffff';
           parentAuthorStyle.color = '#ffffff';
         }else{
           authorStyle.color = null;
           parentAuthorStyle.color = null;
         }

        // anchor text contrast
         if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55)
         {
           anchorStyle.color = colorutils.triple2css(colorutils.complementary(colorutils.css2triple(bgcolor)));
         }else{
           anchorStyle.color = null;
         }

Because, these lines set the contrast of text color depending upon the background chosen color. But I have made background white and set text color to given userColor so I don't need the contrast functionality anymore.

Ultimately I also commented:

    if ((typeof info.fade) == "number")
    {
      bgcolor = fadeColor(bgcolor, info.fade);
    }

Because it makes the text fade when user is not online, at least for me it did.

So that's it. I hope it will help someone who wants same functionality as I did.