Android Theming Variables Glossary

Android Theming Variables Glossary

@snejugal, @SventraPopizz, @NeoKio, @AlexStrNik

While creating themes for Telegram for Android, you could find some parts of the app which variable you didn't know or you could face some variables you don't know what they change. And there are no descriptions below variables in the in-app editor, so you had to ask someone who knows more about theming than you.

We decided that this shouldn't be so and started working on a glossary that would have descriptions of all variables in Telegram, and you can see the result here. This glossary has descriptions of many variables and is still being completed.

We're also looking for people who also think that the variables should be described or that the glossary must be translated in your language. If you're the one we need, check the "Team that works on the glossary" section.

This glossary is done only by 35.5% (not all variables are described at the moment) and may contain mistakes. If you find any, please contact the team head @snejugal on Telegram.


Useful stuff

Articles

Webtools

CLIs

All of these CLIs are based on Node.js.

Themes groups

Bots

  • @atthemeglossarybot — gives a short and easy access to the glossary and its translations. Works inline and by /variable command in groups.
  • @themepreviewbot — creates previews of .attheme's you send to him. Works in groups automatically.
  • @themesporterbot — converts .attheme to .tdesktop-theme and vice versa.
  • @atthemeimagebot — extracts a theme's wallpaper or puts one inside one.
  • @atthemeeditorbot — upload a theme in and download from .attheme editor easily and quickly.
  • @createatthemebot — creates a theme from an image. Useful to start creating a new theme.

Translations

Not only translations but also analogous articles in other languages.


The glossary is split into a few parts so it's easier to find the one you need.


Backgrounds

  • windowBackgroundWhite
  • windowBackgroundGray
  • chat_wallpaper


Text

  • windowBackgroundWhiteBlackText

Gray text

  • windowBackgroundWhiteGrayText
  • windowBackgroundWhiteGrayText2
  • windowBackgroundWhiteGrayText3
  • windowBackgroundWhiteGrayText4
  • windowBackgroundWhiteGrayText5
  • windowBackgroundWhiteGrayText6
  • windowBackgroundWhiteGrayText7
  • windowBackgroundWhiteGrayText8

Red text

  • windowBackgroundWhiteRedText
  • windowBackgroundWhiteRedText2
  • windowBackgroundWhiteRedText3
  • windowBackgroundWhiteRedText4
  • windowBackgroundWhiteRedText5
  • windowBackgroundWhiteRedText6

Green text

  • windowBackgroundWhiteGreenText
  • windowBackgroundWhiteGreenText2

Blue text

  • windowBackgroundWhiteBlueHeader
  • windowBackgroundWhiteBlueText
  • windowBackgroundWhiteBlueText3
  • windowBackgroundWhiteBlueText4
  • windowBackgroundWhiteBlueText5
  • windowBackgroundWhiteBlueText6
  • windowBackgroundWhiteBlueText7
  • windowBackgroundWhiteValueText
  • windowBackgroundWhiteLinkText
  • windowBackgroundWhiteLinkSelector
  • Dialogs blue text


Controls

Text fields

  • windowBackgroundWhiteHintText
  • windowBackgroundWhiteInputField
  • windowBackgroundWhiteInputFieldActivated
  • Dialog text fields

Switch

  • switchTrack
  • switchThumb
  • switchTrackChecked
  • switchThumbChecked

Checkbox

Openable list control

  • windowBackgroundGrayLine

Progress indicators

  • contextProgressInner1
  • contextProgressOuter1
  • contextProgressInner2
  • contextProgressOuter2
  • contextProgressInner3
  • contextProgressOuter3
  • login_progressInner
  • login_progressOuter
  • progressCircle
  • Dialog progress indicators

Action buttons

Profile screen

  • profile_actionIcon
  • profile_actionBackground
  • profile_actionPressedBackground


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
  • listSelectorSDK21
  • emptyListPlaceholder

Chats list

General variables

  • chats_message
  • chats_date
  • chats_nameMessage
  • chats_actionMessage
  • chats_attachMessage
  • chats_draft

Typical chats

  • chats_name
  • chats_nameIcon

Secret chats

  • chats_secretName
  • chats_secretIcon

Unread counter

  • chats_unreadCounter
  • chats_unreadCounterMuted
  • chats_unreadCounterText

Verified icon

  • chats_verifiedBackground
  • chats_verifiedCheck

“Send message” button

  • chats_actionBackground
  • chats_actionPressedBackground
  • chats_actionIcon

Left menu

  • chats_menuBackground
  • chats_menuItemText


Calls

Calls log

  • calls_callReceivedGreenIcon
  • calls_callReceivedRedIcon

“Rate the quality” prompt

  • calls_ratingStar
  • calls_ratingStarSelected


Action bar

Default mode

  • actionBarDefault
  • actionBarDefaultIcon
  • actionBarDefaultTitle
  • actionBarDefaultSelector
  • actionBarDefaultSubtitle

Action mode

  • actionBarActionModeDefault
  • actionBarActionModeDefaultIcon
  • actionBarActionModeDefaultSelector
  • actionBarActionModeDefaultTop
  • actionBarDefaultSubmenuBackground
  • actionBarDefaultSubmenuItem
  • actionBarDefaultSearchPlaceholder
  • actionBarDefaultSearch

“What is a channel?” screen

  • actionBarWhiteSelector


Dialogs

Backgrounds

  • dialogBackground
  • dialogBackgroundGray

Text

  • dialogTextBlack
  • dialogTextGray2

Blue text

  • dialogLinkSelection

Decorative elements

  • dialogIcon
  • dialogGrayLine

Badge

  • dialogBadgeBackground
  • dialogBadgeText

Attach panel

  • dialogScrollGlow
  • chat_attachGalleryBackground
  • chat_attachVideoBackground
  • chat_attachMusicBackground
  • chat_attachFileBackground
  • chat_attachContactBackground
  • chat_attachLocationBackground
  • chat_attachHideBackground
  • chat_attachSendBackground
  • chat_attachGalleryIcon
  • chat_attachVideoIcon
  • chat_attachMusicIcon
  • chat_attachFileIcon
  • chat_attachContactIcon
  • chat_attachLocationIcon
  • chat_attachHideIcon
  • chat_attachSendIcon
  • chat_attachCameraIcon1
  • chat_attachCameraIcon2
  • chat_attachCameraIcon3
  • chat_attachCameraIcon4
  • chat_attachCameraIcon5
  • chat_attachCameraIcon6

Controls

Buttons

  • dialogButton
  • dialogButtonSelector

Radio buttons

  • dialogRadioButton
  • dialogRadioButtonChecked

Square checkboxes

  • dialogCheckboxSquareBackground
  • dialogCheckboxSquareCheck
  • dialogCheckboxSquareDisabled
  • dialogCheckboxSquareUnchecked

Round checkboxes

  • dialogRoundCheckBox
  • dialogRoundCheckBoxCheck

Text fields

  • dialogInputField
  • dialogInputFieldActivated

Progress indicators

  • dialogLineProgressBackground
  • dialogLineProgress


Chat screen

Bubbles

  • chat_selectedBackground

Message panel

  • chat_messagePanelBackground
  • chat_messagePanelHint
  • chat_messagePanelText
  • chat_messagePanelSend
  • chat_messagePanelIcons
  • chat_fieldOverlayText

Emojis/stickers panel

  • chat_emojiPanelBackground
  • chat_emojiPanelEmptyText
  • chat_emojiPanelIcon
  • chat_emojiPanelIconSelected
  • chat_emojiPanelIconSelector
  • chat_emojiPanelBackspace
  • chat_emojiPanelStickerPackSelector
  • chat_emojiPanelStickerSetName
  • chat_emojiPanelStickerSetNameIcon
  • featuredStickers_delButton
  • featuredStickers_delButtonPressed
  • featuredStickers_unread

Bot keyboard

  • chat_botKeyboardButtonText
  • chat_botKeyboardButtonBackground
  • chat_botKeyboardButtonBackgroundPressed


Contacts

  • windowBackgroundWhiteIcon
  • graySection

Fast scroll

  • fastScrollInactive
  • fastScrollActive
  • fastScrollText

“Invite friends” screen

  • contacts_inviteBackground
  • contacts_inviteText


Attach screens

Files

  • files_folderIcon
  • files_folderIconBackground
  • files_iconText

Location

  • location_markerX
  • location_sendLocationBackground
  • location_sendLocationIcon

Music

  • musicPiker_buttonBackground
  • musicPicker_buttonIcon
  • musicPicker_checkbox
  • musicPicker_checkboxCheck
  • picker_badge
  • picker_badgeText
  • picker_disabledButton
  • picker_enabledButton

In-app music player

Action bar

  • player_actionBar
  • player_actionBarItems
  • player_actionBarTitle
  • player_actionBarSubtitle
  • player_actionBarSelector
  • player_actionBarTop

Playlist panel

  • player_background

Seekbar panel

  • player_progress
  • player_progressBackground
  • player_time
  • player_button
  • player_buttonActive

The list

  • windowBackgroundWhiteBlackText
  • windowBackgroundWhiteGrayText2
  • chat_inLoader
  • chat_inBubble
  • actionBarDefaultSubmenuBackground

Placeholder

  • player_placeholderBackground
  • player_placeholder

Top panel

  • inappPlayerBackground
  • inappPlayerPlayPause
  • inappPlayerPerformer
  • inappPlayerTitle
  • inappPlayerClose


Settings

  • windowBackgroundGrayShadow

Icons

  • changephoneinfo_image
  • sessions_devicesImage

Stickers and Themes sections

  • stickers_menu
  • stickers_menuSelector
  • featuredStickers_addedIcon
  • featuredStickers_addButton
  • featuredStickers_addButtonSelected
  • featuredStickers_buttonText
  • featuredStickers_buttonProgress


Obsolete variables

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

  • listSelector, replaced with listSelectorSDK21;
  • player_seekBarBackground, the element was removed;
  • player_duration, the element was replaced with player_time.

Unused variables

These variables aren't used by Telegram for unknown reasons. This is found by searching through the entire source code that's published on GitHub. If through time they get used, please contact the team head @snejugal on Telegram.

  • chat_mediaBroadcast
  • chat_outBroadcast
  • windowBackgroundWhiteBlueText2

Team that works on the glossary

People who contributed but weren't in the team

  • @Paveloom described some dialog, submenu and stickers settings section variables.
  • Fabio Capuano helped us to find what windowBackgroundWhiteBlueText3 sets.
  • @Ra1nb0wD4sh helped describe some variables on the attach panel.