Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Readable Twitch chat


  • Download the Stylus extension (custom CSS)
  • Download the Tampermonkey extension (custom JS)
  • In Stylus, create a style for, and copy the stylus_chrome.css lines into it, and click save
  • In Tampermonkey, "Create a new script..." and copy the tampermonkey_chrome.js lines into it, and click File->Save (in Tampermonkey on the top left)
  • Refresh the twitch page, and chat should now look a lot better.


  • Instructions coming soon!


  • Instructions coming soon!
span[data-a-target="chat-timestamp"] {
margin-left: -8px;
span[aria-hidden="true"]:after {
white-space: pre;
content: "\a";
div[data-a-target="chat-line-message"] {
border-bottom: #454545 1px solid;
overflow: hidden;
span[data-a-target="chat-message-username"] {
float: right;
// ==UserScript==
// @name Chat Coloring
// @namespace
// @version 0.1
// @description Make Twitch chat actually f***ing readable
// @author Dominic Muller
// @match*
// @require
// @grant none
// ==/UserScript==
const messageColorizer = function(e) {
let usernameColor = window.jQuery("[data-a-target=chat-message-username]").css("color");
if(usernameColor) {
let rgb = usernameColor.split(",").map((s) => {return s.replace(/\D/g, "")}).map(Number).map((num) => num/4.5);
let outputStr = "rgb(" + rgb.join(",") + ")";
window.jQuery("background-color", outputStr);
(function() {
'use strict';
setTimeout(function() {
let chatSection = window.jQuery("[role=log]")[0];
chatSection.addEventListener("DOMNodeInserted", messageColorizer, false);
}, 2000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.