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. ## How it works, some technical stuff 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, 1. collects the POST input 2. assign each colour to his variable 3. takes the model 4. write the model on the file (colours are automatically inserted because of the $variables names in the theme) 5. create a zip archive, and add colours.tdesktop-theme to it, (later II introduced also backgrounds support) 6. provide the html page with link to the download page. **Why the download.php page?** I wanted to hide the location of the themes on the server. ## Security problems. 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. ```php $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. ## What I learned form this Project? I learned a lot from this project but here's the most important things. * I learned that you need to protect yourself and your project from user inputs. * I definitely know more about file creation and how to handle difficult things like zip compression. * I know more about http requests. I never used them before that project. That's very useful for some bots i recently created for telegram. * I learnt how to use markdown and how to manage a github repository * I learnt how to create php desktop applications! ## Some numbers about the this project 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** | Browsers | Pages Viewed | Percent | Hits | Percent | |-| | 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.