Making HexChat Look like Discord

Preview of the final theme

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:

Discord.hct

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!

Sample messages

Let me know how it works for you. (twitter banner at the top, or message me: /u/regakakobigman)