Making HexChat Look like Discord
Making IRC look like Discord may be considered sacrilege by some, but Discord’s appearance is both easy to read and appealing to users unfamiliar with IRC.
Unfortunately, it’s a multi-step process and I can’t just upload all the changes here, but you’ll be able to customize it every step of the way. There are a few limitations that’ll get in our way, but HexChat is very customizable, so we can get around most of them.
Here’s what we need to do:
-
Install a GTK theme (this affects everything except the chat)
-
Set up ‘Whitney’ or an alternative font
-
Copy the Discord interface colors, then tweak the others to match
-
Modify a couple text events
-
Change the timestamp format with some raw ASCII
-
Disable ‘Indent nick names’
-
Hide join/part/nickchange messages
-
Restart HexChat
We’ll go through each step piece-by-piece.
Note: You can skip the ‘text events’ and ‘timestamp format’ steps by installing this custom theme file. Use HexChat’s Theme Manager to install it:
GTK Theme
HexChat’s docs explain the installation process very well:
https://hexchat.readthedocs.io/en/latest/appearance.html#gtk-theme
I use Vertex, because it’s an inoffensive dark theme and it fits HexChat’s requirements. (GTK 2.x, PixBuf engine)
Font
The font is tricky. The best way to learn “what [color|font|font-size] does Discord use?” is to open Discord in your browser, and pop open the inspector (default: F12). Use inspect element in the top left, then click on an element with the property you want.
You can see the main font is Whitney, and the fallback fonts are Helvetica Neue, Helvetica, and Arial, in order.
To make life easier, you can just use Arial and skip the collapsible section ahead. But if you really, absolutely, truly want to use Whitney, buckle up and follow along:
Here's how to set up Whitney as a font.
Important disclosure: you are not allowed to use most fonts without permission. Whitney is not an open font, so please do not redistribute the font or any modifications publically.
In Chrome's inspector, switch to the Sources tab. Look in discordapp.com/assets. All of Discord's fonts are here as .woff files; find them all and download them. Their names are gibberish, so you can use a site like FontDrop! to see what they're actually called and rename them accordingly. We only want Whitney Medium Regular, Whitney Semibold Regular, Whitney Book Regular, and Whitney Light Regular. (Book is between Medium and Light, and it's the main font for text)
You'll need to convert them from .woff to .ttf. This site can convert them.
These fonts are now usable, but they aren't in the same font family, so HexChat doesn't know they're all different styles of the same font. We'll need to edit their family and weight information to do this. There are a few tools for editing fonts, but the only one I could find that can accomplish this is FontForge.
FontForge is very unwieldy on Windows, but it works. Open all four .ttf files at once. You can navigate to a folder on another drive by putting the path in the file name bar in the middle of the screen, even though it gives an error and may hide in the corner of your other monitor in shame.
On each font, go to Element -> Font Info. It'll open on the PS Names tab. Change the Family Name to 'Whitney'. We'll need to change the Weight, too, but not in this tab; the Weight in this tab is cosmetic only.
Go to the TTF Names tab. Change the Styles (SubFamily) key's value to either 'Bold', 'Book', 'Medium', or 'Light'. You can also change Preferred Styles to this, too, but it's only cosmetic. Make sure the Family is 'Whitney.' You can change the Preferred Family to Whitney as well.
The fonts should now be ready. They'll still appear a little odd in HexChat's font selector, but they'll work. Go ahead and install them.
Open HexChat, go to Preferences, and open the Appearance tab. Select ‘Browse…’ on the main font, and begin typing ‘Whitney’ (or ‘Arial’ if you didn’t want to go through that charade); it should appear (for me, Whitney Book Regular is displayed as ‘ weight=325’ for some reason. I’ve tried changing the weight in the OS/2 tab of FontForge to an increment of 100, but to no avail). Select that style, with a size of 16, and OK.
If you went with Arial, it’s a little thicker so you may need to decrease the font size. Of course, you can use any font you wish if it’s easier to read :)
Colors
Note: You can skip this section by installing the Discord.hct theme and applying it through HexChat’s Theme Manager.
This is the least complicated, but most tedious step. You’ll have to tweak the colors to your liking. That said, I can provide some of Discord’s colors, as well as the colors I use.
These are the colors used in the Discord client:
Color | Value | R | G | B |
---|---|---|---|---|
Foreground Text | #DCDDDE | 220 | 221 | 222 |
Background | #35383E | 53 | 56 | 64 |
Selected Text | #FEFEFE | 254 | 254 | 254 |
Selected Background | #1769D6 | 23 | 105 | 214 |
Marker Line | #F04747 | 240 | 71 | 71 |
Timestamp | #72767D | 114 | 118 | 125 |
These are all the colors I use:
Color | Value |
---|---|
MIRC Colors 0-15 | Default |
Local Color 16 (White) | Discord Foreground Text |
Local Color 17 (Black) | Increase hsv:value from 21 to 41 |
Local Color 18 (Blue)) | Increase hsv:value from 64 to 100 |
Local Color 19 (Green) | Default |
Local Color 20 (Red) | Default |
Local Color 21 (Brown) | Default |
Local Color 22 (Magenta) | Increase hsv:value from 40 to 80 |
Local Color 23 (Orange) | Default |
Local Color 24 (Yellow) | Default |
Local Color 25 (Light Green) | Default |
Local Color 26 (Cyan) | Default |
Local Color 27 (Light Cyan) | Default |
Local Color 28 (Light Blue) | Default |
Local Color 29 (Pink) | Default |
Local Color 30 (Grey) | Increase hsv:value from 34 to 44 |
Local Color 31 (Light Grey) | Discord Timestamp |
Foreground | Discord Foreground Text |
Background | Discord Background |
Selected Foreground | Discord Selected Text |
Selected Background | Discord Selected Background |
Interface New Data | Anything you want (but I use #FFBFBF) |
Interface New Message | Anything you want (but I use #FF6666) |
Interface Highlight | Default |
Interface Marker Line | Discord Marker Line |
Interface Away User | Default |
Interface Spell Checker | Default |
Text Events
Note: You can skip this section by installing the Discord.hct theme and applying it through HexChat’s Theme Manager.
In Discord, messages are displayed like this:
3:59 PM Name Hey, here’s a cool message.
Changing the timestamp format is a little trickier, so we’ll start with making the name bold.
Go to Settings -> Text Events. You can begin typing the name of a setting and it’ll pop up. You’ll need to edit the ‘Channel Message’ and ‘Your Message’ events, and add a %B
(bold) tag right before the $1
(nickname) tag in both of them.
Also, we’re going to remove the coloring on your own messages, like in Discord. To do that, we just need to remove the %C30
code. We’re going to remove the coloring on your own actions, too.
This is what they look like by default:
Text Event | Default Value |
---|---|
‘Channel Message’ | %C18%H<%H$4$1%C18%H>%H%O$t$2 |
‘Your Message’ | %C20%H<%H$4$1%H>%H%O%C30$t$2%O |
‘Your Action’ | %C20*$t%B$1%B %C30$2%O |
And this is what they should look like after the changes:
Text Event | New Value |
---|---|
‘Channel Message’ | %C18%H<%H$4%B$1%C18%H>%H%O$t$2 |
‘Your Message’ | %C20%H<%H$4%B$1%H>%H%O$t$2%O |
‘Your Action’ | %C20*$t%B$1%B $2%O |
You can make any other changes you want here.
If you mess up and want to reset to the default, you can search for it here:
https://zren.github.io/HexChatThemeEditor/
Timestamps
This part had me stuck for a little bit, but these two GitHub issues helped explain it:
https://github.com/hexchat/hexchat/issues/1913
https://github.com/hexchat/hexchat/issues/937
The timestamp isn’t passed to HexChat’s text formatter, it’s passed to the strftime
C++ function instead. If you open that page and scroll down to the formatting codes section, you can see all the codes we’ll need.
Discord’s time format is 3:59 PM
, so we’ll need something like %I:%M %p
. However, %I is zero-padded. How do we remove the padding? Thankfully, there’s this heavenly Stack Overflow answer to help us out:
https://stackoverflow.com/questions/904928/python-strftime-date-without-leading-0
On Windows, we just need to add a # in the middle of %I
, forming %#I
. Our date is formatted correctly, but we have one last problem: how do we color code it? We want the timestamp to have the same color as Discord’s timestamps. This is answered by the two GitHub issues above; we need to use raw ASCII as defined in the IRC specification. It’s not as bad as it sounds. This is a page explaining it:
https://modern.ircdocs.horse/formatting.html#color
What we need is the x03 character code, followed by the color code we want. Then, we’ll have to end the timestamp with another x03, followed by a space (so that it resets the color and there’s no room for another number to get in there and affect the color). If you don’t want a space at the end, you can use a zero-width space.
Surprisingly, a good way to get x03 into your clipboard is through your browser’s developer tools. Open a new tab, open the inspector with F12, and focus the console. Write console.log('a\x03b')
; this will print x03 between ‘a’ and ‘b’, so it is easy to see. Copy it and make your timestamp format look like this:
*31%#I:%M_%p*_
Replace the underscores _
with spaces. Replace the asterisks *
with the x03 character in your clipboard. The number 31 is the color code I chose for my timestamps, because it is already quite dark by default, but you can use other colors. (the 0-15 range is defined by protocol, while the 16-31 range is user-defined)
If you want to add other effects, you can look at the IRC docs in the link posted above (link). Unfortunately, you can’t change the font size and make it centered like Discord, but it’s close enough.
Just a few last changes!
-
Disable ‘Indent Nick Names’ (Preferences -> Appearance -> Text Box)
-
Enable ‘Hide Join and Part Messages’ and ‘Hide Nick Change Messages’ (Preferenes -> General -> Miscellaneous)
-
Restart HexChat (to apply some GUI changes)
Summary
That’s it!
Let me know how it works for you. (twitter banner at the top, or message me: /u/regakakobigman)