NightDev Community Forums

Change your BetterTTV highlight color!

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: rgba(rrr,ggg,bbb,.3)!important;
}

#bttv-pinned-highlight {
    background-color: rgba(rrr,ggg,bbb,.5);
    color: #fff;
}

#bttv-pinned-highlight .close {
    fill: #fff;
}
  1. On Google, search for the hex code of the color you want your highlights to be and get the RGB values.
  2. Replace the rrr /ggg /bbb by the respective values.
  3. At the bottom of the code select Applies to URLs starting with and put in https://twitch.tv/
  4. Give it a name and click Save, done!

Optional:

  • Feel free to change the last value of the second rgba() to your liking, it’s the opacity of the pinned highlights, going from 0 to 1.
  • If the color is too light and the text in the pinned highlights is unreadable, change the value of color and fill of #fff with #000.