On 11 January 2017 Telegram launched a new update for his desktop app, and one of the biggest changes was the custom themes support. The second day I created the github repository and on 13 january the version 0.01 was working.
I tried to actually create a theme myself but the way it had to be done was slow and hard. you actually have to type the colors of all the 300+ variables in hexadecimal. 🤦 Nope, it was too much for me.
I'm a lazy person and unless the thing I'm doing is very interesting, like coding, I easily get bored. Then I searched for a easier way. There Wasn't. That's how The idea of a theme maker was born.
Before starting to really code this project I had a great problem, How o create the theme model? I thought about different things, which can be simplified in two possibilities:
I decided to try the second one. (I'm a lazy person remember?) Fortunately Atom.io came to my rescue, thanks to his find and replace function which supports regex! So using some tries on http://regexr.com/ site I successfully transformed a telegram desktop theme into a php String containing the php array values in the color places here's some photos to explain it. That's the Original Theme which I used to crate the model That's the array I created That's the model of the theme with spaces for the variables created from the previuos theme That's the complete or expert mode model which allows you to change all 300+ colors.
After creating the theme model and arrays, I created a html page from where to chose the 5 or 7 colours for the simple version. ( I first created a simple version with only 5 or 7 colours to change, and after some time I created a complete version) The html page with inputs of type="color" which almost all browser support. This form send the data via a POST request to the php page which,
I encountered some security problems during the http://thememaker.site life, the biggest was the "path injection" inside the theme name form. I became aware of it when I found a theme folder in the root folder of my server. I tryied to turn to stackoverflow.com for help but instead of helping they downvoted me, and i finally found the answer by myself (Sorry for this part but I had a bad experience with asking questions on that site) To solve that Problem I found that this simple piece of code works perfectly.
$theme_name = str_replace("/", "_badyou_", $_GET["name"]);
I simply exchange any "/" to "badyou" in the theme name so that the new theme name is safe. Here's an example of how ../../../bin/importantfile is stored on my site. The image contains only the last 30 minutes themes. I periodically clean it to reduce space occupation.
I learned a lot from this project but here's the most important things.
I'm going to close this article with some interesting (or not) data about site traffic. During this almost 9 months of life for the project the http://thememaker.site/ received 69,570 Page views The most used operating system are:
|OS||Pages views %||Hits %|
|Windows||50.1 %||52.3 %|
|Linux||35.7 %||33.9 %|
|Macintosh||6.4 %||5.1 %|
|Ios||4 %||2.8 %|
The Most used browsers are
|Google Chrome||1,148||66.6%||4,476||72.1 %|
|Firefox||241||13.9 %||920||14.8 %|
|Opera||116||6.7 %||308||4.9 %|
|Safari||90||5.2 %||244||3.9 %|
|Mozilla||63||3.6 %||64||1 %|
p.s. my mother language is Romanian, so I find difficult to write in english. if you find some errors please tell me in the comment section.