.attheme glossary

While creating themes for Android Telegram, you can find elements which variable you don't know, or variables you don't know what they change. Worse yet, there are no descriptions of the variables in the in-app editor, so you have to ask someone who knows more about theming than you.

We started creating this glossary in order to collect variable descriptions in one place. The glossary already has descriptions of many variables, but much more are still to be described. And you can help to make it even better!

Every part of the glossary is free software. The source code of the website is available on GitLab here, and the most important part — the database — is available on GitLab here. You can contribute to these parts by opening merge requests against the repositories above, and once your merge request is merged, you can instantly see your contribution live!

Backgrounds

window­Background­White

Sets the background almost everywhere except the chat screen background. For example, it sets the background on the chats list screen or the background of sections in Settings.

window­Background­Gray

Sets the secondary background, e. g. in Settings, between sections or below calls log if it doesn't fill the screen fully.

The red areas show window­Background­White and the green areas show window­Background­Gray.

chat_wallpaper

Sets the background on the chat screen, accepts either an image or a color. You must change this variable so Telegram includes your wallpaper in your theme. Changing the wallpaper in Settings → Chat Wallpaper won't include it in your theme.

Be careful: if you set an image as a wallpaper, Telegram will compress it every time you change any variable with the in-app editor. For this reason, you must set your image again before you share your theme.

Example of an image and a color as a chat screen wallpaper.

Text

window­Background­White­Black­Text

Sets the color of almost all texts in the app.

Be careful: the bot inline result titles color is also set by this variable, although the background of the results isn’t set by windowBackgroundWhite but chat_messagePanelBackground. Consider setting the message panel background the same as windowBackgroundWhite or check the readability of the bot results.

The red areas show window­Background­White­Black­Text.

Gray text

window­Background­White­Gray­Text6

Sets the color of description texts below text fields like in Settings → Phone → Change Number and the color of the info text in “What is a Channel?” screen that appears when you try to create a channel (unless you already have one).

Be careful: this variable sets the color of text like “Please enter your password” on the gray background in Settings → Privacy and Security → Two-step Verification/Passcode Lock when you have either a two-step or a passcode lock password when you have (one of) them set.

The red area at the top shows window­Background­White­Gray­Text, the purple area shows window­Background­White­Gray­Text2, the dark blue area shows window­Background­White­Gray­Text3, the light blue area shows window­Background­White­Gray­Text4, the green area shows window­Background­White­Gray­Text5, the yellow area shows window­Background­White­Gray­Text6, the pink area at the bottom shows window­Background­White­Gray­Text7, and the brown area shows window­Background­White­Gray­Text8.

Red text

window­Background­White­Red­Text

Sets the color of red buttons on dialogs like the “Clear Cache” button in Settings → Data and Storage → Storage Usage → Clear Cache.

You can’t change this variable with the in-app editor for unknown reasons, so you have to use .attheme editor to change this variable.

window­Background­White­Red­Text2

Sets the color of red buttons in Settings like the “Terminate All Other Sessions” button in Settings → Privacy and Security → Active Sessions.

window­Background­White­Red­Text3

Sets the color of the “Abort two-step verification setup” button in Settings → Privacy and Security → Two-step Verification while setting up a two-step password.

window­Background­White­Red­Text4

Sets the color of warning text below a text field like in Settings → Username when you try to take a username less than 5 symbols or already taken.

window­Background­White­Red­Text6

Sets the color of “Reset my account” button when you try to sign in your account that has a two-step verification password but you don’t remember it, try to restore it with your email but you can’t access it.

This variable can’t be changed with the in-app editor (because it closes after you sign out), so you have to use .attheme editor to change this variable.

The red area shows window­Background­White­Red­Text, the dark blue area shows window­Background­White­Red­Text2, the green area shows window­Background­White­Red­Text3, the purple area shows window­Background­White­Red­Text4, the light blue area shows window­Background­White­Red­Text5, and the yellow area shows window­Background­White­Red­Text6.

Green text
The red area shows window­Background­White­Green­Text and the blue area shows window­Background­White­Green­Text2.

Blue text

window­Background­White­Blue­Text5

Sets the color of “Create Channel” button in “What is a Channel?” screen that appears when you try to create a new channel (unless you already have one). If the screen doesn’t appear to you, then use .attheme editor to change this variable.

The red area shows window­Background­White­Blue­Header, the purple area shows window­Background­White­Blue­Text, the dark blue area shows window­Background­White­Blue­Text3, the light blue areas show window­Background­White­Blue­Text4, the green area shows window­Background­White­Blue­Text5, the light orange area is window­Background­White­Blue­Text6, the teal area shows window­Background­White­Blue­Text7, the light green one shows window­Background­White­Value­Text, and the dark orange area shows window­Background­White­Link­Text.
The red area shows window­Background­White­Link­Selection.

Controls

Text fields

Like the field in Settings → Username.

  • Entered text color is set by window­Background­White­Black­Text.

The red area shows window­Background­White­Hint­Text, the blue area shows window­Background­White­Input­Field, and the green area shows window­Background­White­Input­Field­Activated.

Switch

Like in Settings.

switch­Track

Sets the color of a switch track — its background — when the switch is turned off.

switch­Thumb

Sets the color of a switch thumb — the circle at the end of a switch — when the switch is turned off.

The red area shows switch­Thumb, the blue area shows switch­Track, the green area shows switch­Track­Checked, and the pink area shows switch­Thumb­Checked.

Checkbox

Like in Chat info → Notifications → Customize.

checkbox­Square­Disabled

Sets the background of a checkbox when it's disabled. Like in Settings of a group that's not converted to a supergroup.

The red area shows checkbox­Square­Unchecked, the blue area shows checkbox­Square­Background, the green area shows checkbox­Square­Check, and the orange area shows checkbox­Square­Disabled.

Openable list control

Like your country's name in Settings → Phone → Change Number.

The red area shows window­Background­Gray­Line.

Progress indicators

context­Progress­Inner2

Sets the progress indicator on the action bar when a group is being created or a game is being loaded.

context­Progress­Outer2

Sets the progress indicator on the action bar when a group is being created or a game is being loaded.

login_progress­Inner

Sets the timer counting progress indicator when you're signing in and waiting for a call from Telegram that it will process automatically (usually Telegram makes a call when you're signed in another device but you can't access it to get the sign in code).

login_progress­Outer

Sets the timer counting progress indicator when you're signing in and waiting for a call from Telegram that it will process automatically.

The red area shows context­Progress­Inner1 and context­Progress­Outer1, the green area shows context­Progress­Inner2 and context­Progress­Outer2, he purple area shows context­Progress­Inner3 and context­Progress­Outer3, and the orange area shows login_progress­Inner and login_progress­Outer.
The red area shows progress­Circle.

Profile screen
profile_action­Icon

Sets the color of the icon near the profile. In groups where you are an admin this icon is “Set picture icon”, while looking at profiles it's “New Message” button or “Move to current location” on the location attach screen.

The red area shows profile_action­Background, the orange area shows profile_action­Pressed­Background, and the green area shows profile_action­Icon.

Avatars

If a user doesn't have a profile picture or it's not loaded yet, a colored circle with a random color and one or two letters will be shown.

avatar_text

Sets the color of the letters on unloaded avatars.

Lists

divider

Sets the color of gray lines that divide items of lists.

empty­List­Placeholder

Sets the color of placeholder text — the text that you see if there's no content — when you open an empty list. You can see it in Chat screen → Attach — Music if you don't have any music. If you do, you can move them from the Music folder for a moment and move them back after you're done.

The red area shows divider, the blue area shows list­Selector­SDK21, and the green area shows empty­List­Placeholder.

Chats list

General variables

chats_message

Sets the color of messages below the chat titles.

chats_date

Sets the time or date color in the top right corner of a chat.

chats_action­Message

Sets the color of texts like “You joined the channel” and also attached message type (like photo, GIF, video etc) if the sender name is omitted.

chats_attach­Message

Sets the attached message type like photo, video, audio etc if the sender name is not omitted.

chats_draft

Sets the “Draft” text color that appears when you type some text and then close the chat without sending it.

The blue underline shows chats_message, the orange underline shows chats_date, the red underline shows chats_name­Message, the light green underline shows chats_action­Message, the dark green line shows chats_attach­Message, and the purple line shows chats_draft.

Typical chats

chats_name­Icon

Sets the icon color of a chat if the chat is a channel or a group.

The red underline shows chats_name­Icon and the green line shows chats_name.

Secret chats
The red underline shows chats_secret­Icon and the blue underline shows chats_secret­Name.

Unread counter

chats_unread­Counter

Sets the background color of unread counter background if the chat is not muted. Also it sets the background if the mention icon (“@”) if you've been mentioned in the chat.

Note: the “@” mention icon cannot be changed for unknown reasons.

The red area shows chats_unread­Counter, the green area shows chats_unread­Counter­Muted, and the purple area shows chats_unread­Counter­Text.

Verified icon
An example of a verified icon.

“Send message” button

chats_action­Pressed­Background

Sets the overlay of the the “New Message” button when it's pressed. The overlaying means that if you set the alpha channel of this variable to less that 255, the button won't become transparent, but it will mix two colors. It overlays only the background, but not the icon.

The red area is chats_action­Background, the green area is chats_action­Pressed­Background, and the yellow area is chats_action­Icon.

Left menu

The selector on this menu is listSelectorSDK21, because the menu is a list.

The red area shows chats_menu­Background and the green underlines show chats_menu­Item­Text.

Calls

Calls log
The red area shows calls_call­Received­Green­Icon, the green area shows calls_call­Received­Red­Icon.

“Rate the quality” prompt

After you had a call and the call was ended, a “Rate the quality” prompt will appear. You may also force the prompt to appear if you go to Calls log, hold a history item and tap “Rate call”. Unfortunately, you can edit elements of the prompt only with .attheme editor.

The red area shows calls_rating­Star­Selected, the blue area shows calls_rating­Star.

Action bar

Default mode

action­Bar­Default

Sets the app header background color. The background of the status bar is generated automatically (on Android 5.0 and above). The in-app player header, header in Settings and chat info and the header that appears when you select any messages have another variables.

The red area shows action­Bar­Default, the light blue area shows action­Bar­Default­Icon, the yellow area shows action­Bar­Default­Title, the green area shows action­Bar­Default­Selector, and the orange area shows action­Bar­Default­Subtitle.

Action mode

Action mode is the top bar dialog that opens when either chat bubbles get selected for reply, forwarding or edit or selecting shared files, music or link posts in chat shared media or attaching files in the message panel.

action­Bar­Action­Mode­Default

Sets the overlay color of the action mode panel. If you set the alpha channel of this variable to less than 255, the default action bar will be seen.

The red area shows action­Bar­Action­Mode­Default, the green area shows action­Bar­Action­Mode­Default­Top, the blue area shows action­Bar­Action­Mode­Default­Icon, and the orange area shows action­Bar­Action­Mode­Default­Selector.

Submenu

Submenu is the menu that appears when you tap the three dots icon on the action bar.

Note: the submenu in Photo Viewer depended on the variables below before, but doesn't anymore.

The red area shows action­Bar­Default­Submenu­Background and the blue area shows action­Bar­Default­Submenu­Item.

Search
The red area shows action­Bar­Default­Search­Placeholder, the green area shows action­Bar­Default­Search.

“What is a channel?” screen

The “What is a channel?” screen appears when you try to create a new channel if you didn't create any. If you did, you can change the variable only with .attheme editor.

The red area shows action­Bar­White­Selector.

Dialogs

Dialogs are the panels at the bottom or in the middle of the screen. For example, the one that appears when you tap a message or that one that appears when you hold a chat on the chat list.

Backgrounds
The red area shows dialog­Background and the green area shows dialog­Background­Gray.

Text
The red underlines show dialog­Text­Black.
The red underlines show dialog­Text­Gray2.

Blue text
The red underlines show dialog­Text­Black.

Decorative elements

dialog­Icon

Sets the color of icons. For example, the ones that appear when you hold a chat on the chat list.

dialog­Gray­Line

Sets the color of the border you can see in the in-app video player panel. You can open it by attaching a YouTube video link to your message, then tap the video preview image.

The red area shows dialog­Icon and the green area shows dialog­Gray­Line.

Badge

dialog­Badge­Background

Sets the background color of a badge — the counter you see when you forward messages or add stickers.

dialog­Badge­Text

Sets the text color on the badge when forwarding message but not when adding stickers — it's set by picker_badgeText.

The red area shows dialog­Badge­Background and the green area shows dialog­Badge­Text.

Controls

Buttons
dialog­Button

Sets the text color of buttons on dialogs on those that appear in the middle of the screen — for example, when you're deleting a message.

The red underlines show dialog­Button and the green area shows dialog­Button­Selector.

Radio buttons

They should set radio buttons colors on dialogs, but they don't for some unknown reasons.

Square checkboxes

Set the same elements of the square checkboxes but on dialogs.

The red area shows dialog­Checkbox­Square­Unchecked, the blue area shows dialog­Checkbox­Square­Background, the green area shows dialog­Checkbox­Square­Check, and the orange area shows dialog­Checkbox­Square­Disabled (note that it is how a disabled checkbox may look like, but we're not sure about that because we don't know where it is used).

Round checkboxes
dialog­Round­Check­Box

Sets the circle background that appears when you select chats you want to forward messages to on the forward panel.

The red area shows dialog­Round­Check­Box and the green area shows dialog­Round­Check­Box­Check.

Text fields

dialog­Input­Field

Sets the text field bottom border when the field is inactive. Inactive state is seen when you rate a call for 4 or less stars; you can get the ”Rate Call” prompt when you hold a call in Calls Log.

dialog­Input­Field­Activated

Sets the color of the bottom border below text fields when the field is active — almost all text fields on dialogs right after they appear.

The red area shows dialog­Input­Field and the green area shows dialog­Input­Field­Activated.

Progress indicators

dialog­Line­Progress­Background

Sets the background color of line progress you can see when you save to downloads any file (three dots beside a file on chat screen → Save to downloads).

The red area shows dialog­Line­Progress­Background and the green area shows dialog­Line­Progress.

Attach panel
The black glow is dialog­Scroll­Glow. In the default theme, it is white, and on this example image, it was made black, so one can clearly see it.

Next variables set the background color of attach buttons.

Next variables set the icon color of attach buttons.

The buttons' backgrounds are changed by chat_attach*Background and their icons are changed by chat_attach*Icon.
This button is chat_attach­Send­Background (it shows when you select at least one photo to send).

Next variables set the colors of the “leaves” of the camera icon, in the clockwise direction.

The numbers show where each “leaf” of the icon is.

Chat Screen

Bubbles
The red area shows chat_selected­Background.

Message panel

chat_message­Panel­Hint

Sets the color of the placeholder in the message panel that says “Message” or “Broadcast”.

chat_field­Overlay­Text

Sets the text color on message bar to join a channel or group or cancel a voice/video message or mute/unmute a chat.

The red area shows chat_message­Panel­Background, the green area shows chat_message­Panel­Hint, the dark blue area shows chat_message­Panel­Text, the orange area shows chat_message­Panel­Send, the light blue area shows chat_message­Panel­Icons, and the brown underline shows chat_field­Overlay­Text (example of a channel).

Emojis/stickers panel

If you change the variables from this subsection with the in-app editor, you need to reopen the chat screen to see changes.

chat_emoji­Panel­Background

Sets the background color of panel for emojis, saved stickers, sticker packs in preview and bot keyboard below message panel with alpha value been layered on black.

chat_emoji­Panel­Empty­Text

Sets the color of the “No recent” text if no emoji is used or list cleared and recent list with clock icon is empty. To clear recent list, select and hold any recent emoji that doesn't have skin tones variations and confirm Clear in dialog.

chat_emoji­Panel­Icon

Sets the color of all icons in horizontally scrollable row below message panel in emoji and sticker panel, except actually selected emoji set.

The red area shows chat_emoji­Panel­Background, the green underline shows chat_emoji­Panel­Empty­Text, the dark blue area shows chat_emoji­Panel­Icon, the purple underline shows chat_emoji­Panel­Icon­Selected, the orange area shows chat_emoji­Panel­Icon­Selector, the light blue area shows chat_emoji­Panel­Backspace, and the brown area shows chat_emoji­Panel­Sticker­Pack­Selector.

Unfortunately, the next five variables can be changed only with .attheme editor.

The red underline shows chat_emoji­Panel­Sticker­Set­Name and the green area shows chat_emoji­Panel­Sticker­Set­Name­Icon.
The red area shows featured­Stickers_del­Button, the dark blue area shows featured­Stickers_del­Button­Pressed, and the green area shows featured­Stickers_unread.

Bot keyboard

The background is chat_emoji­Panel­Background.

The red underlines show chat_bot­Keyboard­Button­Text, the dark blue areas show chat_bot­Keyboard­Button­Background, and the green area shows chat_bot­Keyboard­Button­Background­Pressed.

Contacts

The next two variables are used not only in Contacts, but primarily they are seen here.

gray­Section

Sets the header background color like “Contacts”. The title on this header is set by window­Background­White­Gray­Text2.

Red — gray­Section, green — window­Background­White­Icon.

Fast scroll

fast­Scroll­Active

Sets the color of the scrollbar when you hold and move it and the bubble that contains the letter on where you are.

fast­Scroll­Text

Sets the color of the letter inside the bubble when you hold and move the scrollbar.

Green — fast­Scroll­Inactive, red — fast­Scroll­Active, orange — fast­Scroll­Text.

“Invite friends” screen
Red — contacts_invite­Background, yellow — contacts_invite­Text.

Attach Screens

This part of glossary is about attach screens.

Files
Green — files_folder­Icon, red — files_folder­Icon­Background, blue — files_icon­Text.

Location

location_marker­X

Sets the color of the × below the red location icon when you move it across the map.

location_send­Location­Background

Sets the background of the button beside the “Send selected/your current location”.

Important note: you must re-enter the screen to see the actual color of the button if you change the variable with the in-app editor.

Red — location_marker­X, green — location_send­Location­Background, blue — location_send­Location­Icon.

Music
Blue — music­Picker_button­Background, yellow — music­Picker_button­Icon, green — music­Picker_checkbox, red — music­Picker_checkbox.
Green — picker_badge, yellow — picker_badge­Text, red — picker_disabled­Button, blue — picker_enabled­Button.

In-app Music Player

The in-app editor opener button is overlaid when you open the editor. All player variables are available on the chats list screen, or you can use .attheme editor to change the variables.

Action bar

If you tap the top-left icon, you'll see an old-like player with action bar. It also appears when the playlist is big and you scroll the list.

player_action­Bar

Set the same things actionBarDefault, actionBarDefaultIcon, actionBarDefaultTitle, actionBarDefaultSubtitle and actionBarDefaultSelector respectively do.

player_action­Bar­Top

Sets the status bar background color on Android 5.0 and higher, and, unlike in any other case, it's not darkened by 20% (if you want to do it, set the value to 0, 0, 0, 51). Setting the alpha channel of this variable to zero fallbacks to player_actionBar.

The red area shows player_action­Bar, the purple areas show player_action­Bar­Items”, the yellow area shows player_action­Bar­Top, the blue circle shows player_action­Bar­Selector, the green underline shows player_action­Bar­Title, and the orange underline shows player_action­Bar­Subtitle.

Playlist panel

For the blue-to-pink area, see the Action Bar subsection.

For the gray-to-green area, see the Placeholder subsection.

Seekbar

player_time

Sets the color of the track duration and the played part time.

player_button

Sets the color of non-pressed or inactive buttons.

The list

This subsection doesn't describe new variables, these variables aren't used only here, their primary usage can be found in other sections of the glossary.

chat_in­Loader

Sets the background color of play/pause buttons on the list.

The red area shows player_background, the blue gray underline shows player_progress, the brown underline shows player_progress­Background, the lime underlines show player_time, the orange areas show player_button­Active, the pink areas show player_button­Active, the purple underlines show window­Background­White­Black­Text, the blue underlines show window­Background­White­Gray­Text2, the green circles show chat_in­Loader. For gradient-stroked areas see the top of this subsection.

Placeholder

You see the placeholder when the track doesn't have a cover.

The red area shows player_placeholder­Background and the blue area shows player_placeholder.

Top panel

When you start playing a track or a voice message, a panel at the top and below the action bar with audio controls appears. This subsection is about this panel.

inapp­Player­Title

Sets the text color on the in-app player panel: for songs it sets the color song's name color, for voice messages shows when it was sent, for example yesterday at 08:05 A.M.

The red area shows inapp­Playerbackground, the green area shows inapp­Player­Play­Pause, the orange area shows inapp­Player­Close, the blue underline shows inapp­Player­Performer, and the purple area shows inapp­Player­Title.

Note by @Ra1nb0wD4sh: inapp­Player­Close affects the color of the 2x playback toggle (appeared in 4.8.10) while it's in disabled state. inapp­Player­Play­Pause affects the color it has when enabled.

The 2x playback toggle

Settings
The red area shows window­Background­Gray­Shadow.

Icons

sessions_devices­Image

Sets the color of phone and tablet image when you signed in only on one device, shown in Settings → Privacy and Security → Active Sessions.

The red area shows chagephoneinfo_image and the green area shows sessions_devices­Image.

Stickers and Themes sections

stickers_menu

Sets the color of three dots icon beside a sticker pack or a theme.

The blue area shows stickers_menu and the red area shows stickers_menu­Selector.
The red area shows featured­Stickers_add­Button, the blue area shows featured­Stickers_add­Button­Selected, the green areas show featured­Stickers_button­Text, the orange area shows featured­Stickers_added­Icon, the purple area shows featured­Stickers_button­Progress.

Obsolete variables

These variables once were used, but now they've been removed from Telegram because their elements were removed or replaced with other variables.