What is wrong with theming on Android

What is wrong with theming on Android

@snejugal, @SventraPopizz, @NeoKio, @AlexStrNik
This is an article by the Android Theming Variables Glossary team.

Translations


If you've ever created a theme, you know there are elements you can't change, or they can be changed only for a half. @DrKLO haven't, and this article is especially for him — to direct him at the theming issues and to fix them. If you're not DrKLO, you'll get to know what you can't change inside Telegram.

Tablets

First of all, imagine you have an Android tablet and you want to create a Telegram theme. You start creating the theme, and suddenly it appears that you cannot change chat variables. Even if you have a chat opened. Why? Nobody knows. But if the tablet is the only Android device of yours and you're a newbie to themes, you can't make themes at all, because it's not possible. Why?

Why are on earth chats variables here?

Let it be you have no opened chat. Where a chat must be, you see a wallpaper. But this wallpaper can't be changed at all. Do you think themes look cool with the cats wallpaper?

“We‘ve included a Dark Theme in that menu for those of you who don’t want to use Telegram as a flashlight in dark places”, — telegram.org/blog/android-themes

The in-app editor

Let's move to a phone from this moment. You've created a new theme and want to change the action bar background to blue from Material Design Guidelines. That blue is #2196f3, or 33, 150, 243, 255 after converting. You set this value inside the in-app editor:

Then you tap “Apply” and tap actionBarDefault once more on the list. But you won't see 33, 150, 243, 255, you'll see 29, 150, 243, 255:

What just happened?

Why did it change to 29 instead of being 33? Nobody knows.

Or let's suppose you want to change the background of this little thing:

This is how we felt when writing this article

That's not even a thing, right? That actually is. You can change any variable inside the in-app editor you can find on every screen, but you won't find a variable that changes that little thing.

If you share the default theme with yourself and open it with a text editor, you'll be able to find a line with that variable among other 515 lines:

You'll never find it inside the in-app editor. That's because the list is made by hand:

This is how the lists you see in the editor are made, and there's no “chat_mediaTImeBackground” anywhere

But why can't you automate this process? This will prevent a lot of cases when you want to change variable A that's on screen B but you have to go to screen C to change A. Or sometimes you even have to use editors made by the community.

Next you go to the Location attach screen, where you want to change this button background:

You open the editor, find location_sendLocationBackground and change it to black:

wat

Why did “Share My Live Location” change?

Or let's change it to white:

ehm

We changed black to white, but it actually became blue and red respectively. How? This will be changed only after re-entering the screen:

Why did the top button change only after re-entering? Must we re-enter the screen every time we change the button to see what it looks like?

Unexpected usage of variables

If you try finding all windowBackgroundWhiteTextGray in the default theme file, you'll find eight of them. They have a number from 2 to 8 at the end or have it omitted (meaning the number is 1). With this big amount of gray text we can be sure that changing one gray text it's always used on one background, right?

Let's go to Settings → Phone → Change Number. You'll see little info about what Telegram will do when we enter a new number:

Let's change the color of windowBackgroundWhiteTextGray6 to 220, 220, 220, 255:

That's only for example, never make text low-contast

And now let's to go to Settings → Privacy and Security → Two-step verification. You'll see an input (if you have it enabled):

What must I enter?

But what's it asking for? It appears that we previously changed windowBackgroundGray to 220, 220, 220, 255 too, and if we change windowBackgroundWhiteTextGray6 we'll see the text appearing:

WTF is the same variables used for different cases? windowBackgroundWhiteTextGray2 sets the text for different cases too: subtitles in Settings and text on graySection. Or windowBackgroundWhiteTextBlue4 is used for both “Change number” button and matching text in search.

The icon on the bubble will get invisible if you set the bubble background alpha to 0:

Or you sent some code, this is what it will look like on most themes:

If you read carefully, you'll find out what variables changes the code color

Do you think it's an expected behavior?

Elements that don't use alpha

Let's create a new group. Here you see hint text that you want to change to 0, 0, 0, 128. But you'll fully black text, not gray as you expect. Even if you set alpha to 0, you won't get the hint invisible. Even after restarting the app, it will never use alpha. It's the same for the span backgrounds:

It must be a way more white

You can't set alpha even for chat_messagePanelHint:

The most interesting thing here that this variable once used alpha before some update

How can this even happen?

Non-themable elements

Let's go to supergroups settings and restrict/promote someone. You'll see switches here:

And here's the list of variables that change the switch colors:

  •  
  •  
  •  
  •  
  •  
  •  

The list above is complete at the time of writing the article. You just can't change the switch, nohow. Why?

Or let's go back to chat again and open emoji panel:

Seems there's something wrong here… That's the Trending Stickers badge, you can't change it anyway.

Let's read an article with Instant View and switch the theme of the screen:

And here your eyes start hurting a lot. You can't change anything here.

You can write some text and select it:

But you can't change the thumbs, the background of the selected text, and the cursor itself when typing.

You can play hide-and-seek with the scrollbar on dark themes:

Do you see the scrollbar?

Half-themable elements

So, you've made a fully broken because of Telegram bugs theme, made a preview of it and you're going to share it in @androidthemesgroup. You've tapped a preview of the photo you want to share, but you notice something…

Why are both the icon and the background blue? You screenshot it, ask the community how to fix it instead of sending the theme and they answer that only the icon can be changed and the variable for this is chats_actionIcon. And here you scream out loud, “WHAT THE HELL???”.

Let's go to the code:

Here you can see that the it takes the color from applied theme for the icon, but the color is fixed for the background

Here you might fork the repository, fix this, commit to the fork and ask the developer for a pull request, but first, they will ignore it, and second, what must we change it to? Must we create new variables, or use the action button variables, or must we make it non-changeable at all?

This is not the only half-themable element, the bottom button in “Invite Friends” screen is half-themable too, because you can't change the badge color:

Have I selected all Mark Zuckerberg's numbers?

Or the screen we've gone through twice:

You can change only the text and the little border after photos but the background and the icons. We've quoted it before but let's quote it once more:

The white here won't hurt your eyes at night. At all.

When you wake up in morning and open Telegram, you might be mentioned in some chats, it looks like this:

And you can change only the background of the badge but not the @ symbol. Nohow.

And one special element

This is the most strange element in Telegram. It doesn't fit only one section, so it's in this special section.

Case 1

Let's go to a group's info screen and look at the members list.

Why is there space on the left? Wouldn't it be more logical if the avatars were in that space?

Take a moment, let's apply the default dark theme:

“Please remove the members icon”, said the designer. “Okay”, said the developer and changed the fill of the icon to white. *Laugher in the background*

If you try to find a variable to change the icon, you'll never end doing that.

But wait, take a deep breath…

Case 2

But on some devices, you'll find the variable! The icon will depend on chats_menuItemIcon in this case:

On other devices, the icon will still be solid white, despite what chats_menuItemIcon is. And here's the question:

with this icon?

Wait… Who are we writing to?

We were talking about the official Android Telegram client here. As you might know, it is open source and the source is hosted on GitHub. People who can code in Java can contribute to it by pull requesting — this means people download the source code, change it some way to make or fix something and ask the developer to add these changes to his code. Not only code but every file in the repository, and one of files that aren't a part of the app is a readme file that explain what the repository is for, usually it's named readme.md, written in Markdown formatting language and shown after the repository content automatically. There's such a file in the Android Telegram repository, here's the beginning of that:

Wait, there's something wrong. And the wrong thing is ##Creating your Telegram Application that was meant to be a heading level 2, but it isn't because of a typo — there must be a space after ##.

This pseudoheading was added in the file on October 23, 2014 and hasn't been fixed yet since that time. But… didn't anyone notice this, fix it and ask for a pull request? Doesn't anyone come to this repository and read the readme?

Yes, they do. 8 people noticed it, fixed it and asked for a pull request. And they still ask for it as for the time the article was written. Just imagine that the developer can't fix one missing space! And the overall amount of pull requests is 82, the developer doesn't reply there at all. How can we talk about fixing theming issues?

Wait, if you look at the header of the repository, there's one missing tab.

The missing tab is “Issues”. This is a place where people tell the developers about bugs in the program or an app in our case. Any person can easily tell about them, because it doesn't require programming skills. Owners of repositories can hide some sections, and “Issues” is one of them, and DrKLO used this opportunity. Thankfully, “Pull requests” can't. But pull requests are just ignored by the developer. If he could hide “Pull requests”, he'd do that, believe us. There's nothing worse than people who want the app to be better, are we right?

This was a simple example that users of Android Telegram are nobody for the developer (not that it's not developers because the developer of the desktop client replies to issues and pull requests), they will just ignore the users (or reply “this is something we're already working on and that won't be like others do", as someone does).

So does it mean we're writing this to… nobody?

Sincerely,
The Android Theming Variables Glossary team
.


If you have anything to add to this article, please contact @snejugal and we'll include it.

Translate this article in your language

The more people know about these issues, the faster it comes to the developer. To get more people know about this, this article should be translated in their first languages. You can easily do that by making a new article on Telegraph, after you're done, contact @snejugal on Telegram and we'll add the link to your translation.