Restoring Discord’s Blurple Color

Discord updated their branding a few days ago. I’m okay with the new logo and I can live with the new wordmark, but I don’t like the new colors. They’re so saturated, especially the new Blurple. I want the old Blurple back, so I made a script to restore it. Here’s what it does:

The color change is also reflected in the other interface elements that use Blurple.

Disclaimer: Don’t do this. It’s against Discord’s terms of service and it’s likely a security risk as well.

With that said, let’s restore Blurple!

I started by looking up injecting CSS into Electron apps. Discord on desktop uses Electron, so it seemed like a good place to start.

Then I tried a bunch of things:

• Editing the stylesheet on disk. Except that Discord doesn’t save CSS on disk.
• Changing the HTML stylesheet link to point to a local stylesheet. I wasn’t sure how to specify a local file, or if it’s even possible. This also isn’t great because I’m anticipating Discord changing their variable names.
• Using some kind of server redirect to change the request for the stylesheet. I spent a few minutes looking into this and it seemed like way too much work.
• Using an existing Electron code injection library to make the code injection easy. This probably would’ve worked, but I kept getting weird errors.

Here’s what worked:
I found this article by Danny Shemesh about modifying the Microsoft Teams client. I used the same technique with some changes and I finally got it working. The script is simple: connect to Discord’s debug server and send the Javascript to execute.
The hardest part was figuring out how to make the color persistent. Early on, I could add a style element to redefine the CSS color variable, but it reset every time I went to a different channel. I spent some time researching how to change CSS stylesheets in Javascript, but I couldn’t find what I wanted to do. I ended up inspecting the stylesheet in Discord’s developer tools panel and just going down the structure until I found the relevant section. Then I copied it, changed the color, and put it in the Python script.

The script isn’t perfect. It only changes one of the colors and I’m expecting Discord to rename their “brand-experiment” variables and class names. Anyway, here it is:

# Restore Discord's Blurple color
# 5/15/2021, License CC0
# By Jacob, cheeseisatrafficsignal.com

# Uses code by Danny Shemesh, medium.com/@dany74q/injecting-js-into-electron-apps-and-adding-rtl-support-for-microsoft-teams-d315dfb212a6

# Script to change Discord's colors at runtime.
# Currently it just changes the new Blurple color to be the old Blurple color.
# Requires Python 3.6+, and websocket-client (pip3 install websocket-client).

import requests
import websocket
import json

port = 8181
blurple = "#7289DA"

script = '''
var sheet = document.styleSheets[0];
for (var i=0; i < sheet.rules.length; i++) {
	if (sheet.rules[i].selectorText == "[data-popout-root].newBrand, html.newBrand") {
		sheet.rules[i].style.cssText='--brand-experiment-100:#f7f7fe; --brand-experiment-130:#f0f1fe; --brand-experiment-160:#e7e9fd; --brand-experiment-200:#dee0fc; --brand-experiment-230:#d4d7fc; --brand-experiment-260:#c9cdfb; --brand-experiment-300:#bcc1fa; --brand-experiment-330:#a8aff8; --brand-experiment-360:#949cf7; --brand-experiment-400:#7984f5; --brand-experiment-430:#707bf4; --brand-experiment-460:#6571f3; --brand-experiment:'''+blurple+'''; --brand-experiment-500:#5865f2; --brand-experiment-530:#505cdc; --brand-experiment-560:#4752c4; --brand-experiment-600:#3c45a5; --brand-experiment-630:#343b8f; --brand-experiment-660:#2d347d; --brand-experiment-700:#232861; --brand-experiment-730:#21265b; --brand-experiment-760:#1e2353; --brand-experiment-800:#1a1e49; --brand-experiment-830:#141738; --brand-experiment-860:#0d0f24; --brand-experiment-900:#04050c; --brand-experiment-05a:rgba(88,101,242,0.05); --brand-experiment-10a:rgba(88,101,242,0.1); --brand-experiment-15a:rgba(88,101,242,0.15); --brand-experiment-20a:rgba(88,101,242,0.2); --brand-experiment-25a:rgba(88,101,242,0.25); --brand-experiment-30a:rgba(88,101,242,0.3); --brand-experiment-35a:rgba(88,101,242,0.35); --brand-experiment-40a:rgba(88,101,242,0.4); --brand-experiment-45a:rgba(88,101,242,0.45); --brand-experiment-50a:rgba(88,101,242,0.5); --brand-experiment-55a:rgba(88,101,242,0.55); --brand-experiment-60a:rgba(88,101,242,0.6); --brand-experiment-65a:rgba(88,101,242,0.65); --brand-experiment-70a:rgba(88,101,242,0.7); --brand-experiment-75a:rgba(88,101,242,0.75); --brand-experiment-80a:rgba(88,101,242,0.8); --brand-experiment-85a:rgba(88,101,242,0.85); --brand-experiment-90a:rgba(88,101,242,0.9); --brand-experiment-95a:rgba(88,101,242,0.95); --font-display:Ginto,"Helvetica Neue",Helvetica,Arial,sans-serif;';
	}
}
'''

j = requests.get("http://localhost:"+str(port)+"/json").json()

ws = websocket.create_connection(j[0]['webSocketDebuggerUrl'])
payload = {
    "id": 1339,
    "method": 'Runtime.evaluate',
    'params': {
        'expression': script
    }
}

ws.send(json.dumps(payload))
ws.close()

To use the script, start Discord with “discord –remote-debugging-port=8181”. Once Discord has loaded, run the script with “python3 restore_blurple.py”.

Port 8181 probably isn’t a good choice, it was just the first one I could think of xD