Skip to content
Restores the original (dark mode) style of Twitch before the redesign to make it readable again.
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Add Stylus as explicit installation step Oct 1, 2019
diff.gif
style.css
stylus.json

README.md

Old Twitch Chat

Before-and-after comparison animation

Background

On September 26, 2019, Twitch announced a rebranding.

I am not exactly a fan, but the worst thing about the update is how hard it makes it to read chat, which is kind of central to the whole Twitch experience.

This project restores the original (dark mode) style of Twitch chat before the redesign to make it readable again.

CSS

The original CSS isn’t that difficult as far as I can surmise:

.chat-list, /** Live chat */
.video-chat__message-list-wrapper, /** VOD chat */
.clips-chat /** Clip chat */ {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #dad8de;
    background-color: #0f0e11;
}

.chat-input {
    background-color: #0f0e11;
}

Installation

Otherwise, to use my userstyle, the easiest thing for you to do is to download the browser extension Stylus and import my script, like so:

  1. Install the Stylus browser extension
  2. Download stylus.json from this project to your computer using the below link
  3. Open Stylus
  4. Click Manage
  5. Hit Import on the bottom left, then Import Styles
  6. Open stylus.json; this might overwrite existing Stylus settings

And that’s it; Stylus has a nice button for turning off a custom style so you can see what it looks with the settings on and off.

Thanks

Throw a follow on Twitch or Twitter or something.

You can also retweet the announcement tweet.

You can’t perform that action at this time.