Eskilop.it

I started using telegram in 2014, and never left it. In fact early this year I completely ditched whatsapp in its favor. One of the features that I really love about telegram is theming. There aren’t really much applications that provide theming functionalities. Telegram easily provides one of the best theming functionalities I’ve ever seen. Most apps just let the user have a dark and a light theme, with the same colors. Telegram lets you customize every single color within the app. Which I think it’s fantastic.

Sadly, editing themes within the app, is not really a simple journey, let me explain why…

So, whenever we want to edit a theme, we start by duplicating an existing one. A bubble appears, and we can start editing.

Touching it, we can see a list of available colors in the current app window. When we touch one, we can edit the RGB values in it. Then we can either save it or cancel the edits.

I found some issues with the UI, namely:

  • The user should be able to specify one single color, to see the interface change accordingly. Take the background color for example, once you choose it, you know, that the actionBar will be a darker/clearer shade. I find it pointless to ask for another color.
  • As a consequence of my first point, the user shouldn’t really know the name of each color variable.
  • Also, the user shouldn’t memorize three or four values to specify a color.

Even though I can see why they designed the interface this way. User freedom has always been in Telegram’s philosophy. Telegram theming reflects this concept and I’m glad they did so.

But, since I often like to change the theme of the apps I use, I started looking for a way to make it simpler.

Reverse engineering telegram’s theme files

Telegram’s default dark theme file

In telegram’s theme files, we can see that we have one line for each color variable, shaped like this:

<interface_color_name>=<signed_integer_value>

Which honestly surprised me, I thought that they were saved as an hexadecimal value of some sort, but nope.

So I started playing with this numbers. Making sample conversions, to see if they would simply map out to a recognizable color value. This part was not too complicated, since they in fact map directly to a hex color value.

Then, I started digging through the code of telegram’s android client, just to be sure. Some time later, I figured out that a lot of the theming functionality was done using PorterDuff. It is an android native component from the graphics package.

I had no clue of what it did. Then, looking at this line I figured it had something to do with my intent. So I went over to android documentation to find out what it did. The android documentation Says 

This class contains the list of alpha compositing and blending modes […]

To sum it up: Telegram’s color values are specified in RGBA format by the user. Telegram then converts this values to the respective 32-bit signed-integer. This integers can then be converted in their hexadecimal representation.

So, that’s it, we almost have all the pieces. Now I just had to figure out the general structure of the theme. Which colors were shades of others, which others had to just change an alpha value, and so on.

Sadly, this task isn’t really automatable, so I just took all the 400+ color values and figured it out manually. Luckily I just had to do this once. I now have a tool that given a couple of colors, gives me back a coherent theme.

The result is a little tool, that if you want to check out, you can find it here: TgThemer.
I used bulma as the base CSS framework (the same I used for this site’s theme), ColorPicker.Pro for the color picker.

But what do you think? did you find it really helps out? Also, if you find some bugs here and there or if you face other problems or if you simply want to talk, Discuss in the group

Tags: