Change your BetterTTV highlight color!

[Emily]

While NightDev works on adding the possibility to change your highlight color, here’s a simple solution to do it yourself.

1. Download and install the Stylus extension to your browser: Chromium-based browser, or Firefox.

2. Click on the Stylus icon in your extensions and click on Manage.

3. Under Actions click on Write new style.

4. Paste the following code:

   .chat-line__message.bttv-highlighted, .vod-message.bttv-highlighted {
     background-color: rgb(rrr, ggg, bbb, .3) !important;
   }
   
   #bttv-pinned-highlight {
     background-color: rgb(rrr, ggg, bbb, .5);
     color: #fff;
   }
   
   #bttv-pinned-highlight .close {
     fill: #fff;
   }
   

5. On Google, search for the hex code of the color you want your highlights to be and get the RGB values.

6. Replace the rrr /ggg /bbb by the respective values.

7. At the bottom of the code select Applies to URLs starting with and put in https://www.twitch.tv/

8. Give it a name and click Save, done!

Optional:

• Feel free to change the last value of the second rgb() to your liking, it’s the opacity of the pinned highlights, going from 0 to 1.

• If the background color is too light and the text in the pinned highlights is unreadable, change the value of color and fill from #fff to #000.