Skip to content

Instantly share code, notes, and snippets.

@ZeusOfTheCrows
Last active June 14, 2024 15:53
Show Gist options
  • Save ZeusOfTheCrows/7b20cebc2d9e6cc755f92c64fc59cbdf to your computer and use it in GitHub Desktop.
Save ZeusOfTheCrows/7b20cebc2d9e6cc755f92c64fc59cbdf to your computer and use it in GitHub Desktop.
Comprehensive reference description of telegram theming elements

/!\ THIS IS DEPRECATED /!\

Due to the limitations of github gists, i've moved this to a proper repo, it is available here. Please feel free to open pull requests


This file is here as a way to rename the gist, but I'll use it as a readme

Unfortunately there is currently no way to create a pull request in gists, so you'll have to message me if you want changes in here, but please feel free to do so - if there is enough engagement I'll upgrade it to a proper repo

  • The section headers (italic) are ID'd with their own name, lowercase. To link to a section, make a link like so: [Generic](#generic).
Key Description
Generic
windowBackgroundWhite main background colour
windowBackgroundWhiteGrayText2 subtitle text for text items with descriptors (mobile, username etc.)
windowBackgroundWhiteBlueHeader /!\ title of settings menu items
windowBackgroundWhiteBlueText4 "change chat background" text/icon
divider dividing line between clickable items
listSelectorSDK21 ripple overlay when pressing list/menu item (dimmed)
chats_action[Icon/Background/PressedBackground] [icon/background/background when tapped] of floating action button (FAB) in chat/calls list screen
featuredStickers_addButton /!\ also affects phone icon in calls list screen
actionBarDefaultSelector /!\ unknown /!\
actionBarDefault background of header bar
actionBarDefaultIcon icons in header bar (hamburger/search/ellipse/etc.)
actionBarDefaultTitle main text in header bar
actionBarDefaultSubtitle last seen time text in header bar
actionBarDefaultSearch text typed into the searchbar
actionBarDefaultSearchPlaceholder "search" text before typing in the (inchat) searchbar
actionBarActionModeDefaultIcon header bar background when selecting messages
actionBarActionModeDefaultTop OS statusbar when selecting messages
actionBarActionModeDefaultSelector
actionBarDefaultSubmenuBackground background of ellipsis/dropdown menu
actionBarDefaultSubmenuItem text of ellipsis/dropdown menu items
actionBarDefaultSubmenuItemIcon icons of ellipsis/dropdown menu items
player_progressBackground dimmed darker line of all progress bars/sliders in settings
player_progress foreground/dot of all progress bars/sliders in settings
switchTrack toggle switch icon when disabled - also hue of 2/3 line preview in settings
switchTrackChecked toggle switch icon when enabled
chats_callRecieved[Red/Green]Icon arrow in calls screen of [failed/successful] calls
Chats List
profile_tabSelected[Line/Text] see entry in #User Profile (may be a bug?)
profile_tabText see entry in #User Profile (may be a bug?)
avatar_text user initials of placeholder avatar for contact with no profile pic
avatar_background[Colour] background of placeholder avatar for contact with no profile pic
key_graySectionText /!\ month name in "Saved Messages" file lists - may be elsewhere too
graySection dark between cards in "Saved Messages"/"New Message" dialogue
chats_menuBackground background of sidebar menu
chats_menuName username in sidebar menu (also day/night toggle)
chats_menuPhone phone number in sidebar menu
chats_menuPhoneCats same as chats_menuPhone, sometimes?
chat_serviceBackground background of forward button, internal link to group, etc
chat_service[Text/Link/Icon] [text/link/icon] of forward button, internal link to group, etc
chats_menuTopShadow /!\ unknown /!\
chats_menuTopShadowCats bottom "shadow" for section of sidebar menu containing username
chats_menuTopBackgroundCats /!\ Unknown /!\
chats_menuTopBackground background for section of sidebar menu containing username
chats_menuItemIcon icons for elements in sidebar menu
chats_menuItemText text for elements in sidebar menu
chats_archiveText /!\ unknown /!\
inappPlayerBackground background of mini music player
inappPlayerPlayPause play/pause icon of mini music player
inappPlayerTitle track title of mini music player
inappPlayerPerformer artist of mini music player
inappPlayerClose close (x) icon of mini music player
checkbox background of "selected" chat tickmark icon
chats_verified[Check/Background] "Verified" chat [tickmark/background] (same as profile_verified[…])
In Chat
chat_status "Online" status below contact name in top bar
chat_muteIcon "Muted" icon by recipient name
chat_lockIcon secret chat padlock icon
avatar_nameInMessage[Colour] user's name in message bubble (groups)
chat_inBubble inbound message bubble background
chat_inBubbleSelected inbound message bubble background, when selecting multiple messages
chat_inBubbleShadow /!\ unknown /!\
chat_outBubbleShadow /!\ unknown /!\
chat_outBubble outbound message bubble background
chat_outBubbleGradient background vertical gradient across all bubbles, set alpha to 0 to disable
chat_outBubbleSelected outbound message bubble background, when selecting multiple messages
chat_outBubbleGradientSelectedOverlay /!\ unknown /!\
chat_serviceText /!\ unknown /!\ - appears defunct
chat_serviceLink /!\ unknown /!\ - appears defunct
chat_serviceIcon /!\ unknown /!\ - appears defunct
chat_serviceBackground message selected left hand tickbox (dimmed for some reason?)
chat_serviceBackgroundSelected /!\ unknown /!\
chat_messageTextIn inbound message bubble text
chat_messageTextOut outbound message bubble text
chat_messageLinkIn inbound message bubble clickable link text
chat_messageLinkOut outbound message bubble clickable link text
chat_mediaTimeText sent timestamp on media messages (images etc.)
chat_outSentCheck outbound message sent tickmark
chat_outSentCheckSelected outbound message sent tick when selected
chat_outSentCheckRead outbound message read double tick
chat_outSentCheckReadSelected outbound message read double tick when selected
chat_outSentClock outbound message sending clock icon
chat_outSentClockSelected outbound message sending clock icon when selected
chat_inSentClock inbound message sending clock icon
chat_inSentClockSelected inbound message sending clock icon when selected
chat_mediaSentCheck outbound image sent tickmark
chat_mediaSentClock outbound image sending clock icon
chat_[in/out]Views[Selected] views (eye) icon on message bubble in group chats [when message selected]
chat_mediaViews views (eye) icon on images in group chats
chat_[in/out]Menu[Selected] unticked radio button on media (file/poll/etc.) [when message selected]
chat_mediaMenu /!\ unknown /!\
chat_[in/out]Instant lightning icon in [inbound/outbound] instant article links
chat_[in/out]InstantSelected /!\ unknown /!\
chat_[in/out]PreviewInstantText "Instant View" text + outline in [inbound/outbound] instant article links
chat_[in/out]PreviewInstantSelectedText /!\ unknown /!\
chat_selectedBackground background behind selected message bubbles
chat_[in/out]ReplyLine line to the left of quoted text in [inbound/outbound] reply messages
chat_[in/out]ReplyNameText name of sender of message replied to in [inbound/outbound] messages
chat_[in/out]ReplyMessageText contents of message replied to in [inbound/outbound] messages
chat_[in/out]AudioSeekbar[Selected] dimmed darker line of [inbound/outbound] music progress bar [when message selected]
chat_[in/out]AudioSeekbarFill[Selected] foreground/dot of [inbound/outbound] music progress bar [when message selected]
User Profile
profile_tabSelected[Line/Text] [text/line below] media type active tab - also in chats list when multiple chats selected
profile_tabText name of media type inactive tab - also in chats list when multiple chats selected
profile_action[Icon/Background/PressedBackground] [icon/background/background when tapped] of FAB in profile/setttings screen
profile_verified[Check/Background] "verified" chat [tickmark/background] (same as chats_verified[…])
avatar_backgroundActionBarBlue top bar background (with profile pic and contact name)
profile_[title/status] text of contact [name/status](online, etc.)
avatar_backgroundInProfileBlue
Key Description
Generic any colours can be declared as variables using the same syntax (name: #hexa; //optional comment) these can only be used by assigning them in the text file
windowBg white: fallback for background
global background colour (bequeathed)
windowFg black: fallback for text
main text / chatlist contact name
windowBgOver light gray: fallback for background with mouse over
search field background + buttons color in context menu
windowBgRipple darker gray: fallback for ripple effect
inactive chat in chats list (press & hold)
windowFgOver black: fallback for text with mouse over
windowSubTextFg gray: fallback for additional text
chats list message preview text
windowSubTextFgOver darker gray: fallback for additional text with mouse over
/!\ unused? /!\ mouse over chats list message preview text
windowBoldFg dark gray: fallback for bold text
bold font (titles in settings, sidebar menu options)
windowBoldFgOver dark gray: fallback for bold text
sidebar menu item text on mouseover, (apparently) mouseover chatlist contact name
windowBgActive bright blue: fallback for blue filled active areas
Chats List
dialogsBg Chat list background color
dialogsChatIconFg Chat list group or channel icon (To the left group/channel name)
activeButtonBg Active button background ("Update Telegram", "Save Theme", and other buttons)
In Chat
historySendIconFg Send message icon
msgInBg Inbound message bubble background
msgInBgSelected Inbound message bubble background, when selecting multiple messages
msgInShadow Inbox message shadow (below the bubble)
msgOutBg Outbound message bubble background
msgOutBgSelected Outbound message bubble background, when selecting multiple messages
msgOutShadow Outbox message shadow (below the bubble)
Folder Sidebar
sideBarBg filters side bar background
folder sidebar background
sideBarBgActive filters side bar active background
background of selected folder
sideBarBgRipple filters side bar ripple effect
folder sidebar fill when clicked
sideBar[Text/Icon]Fg[Active] folder sidebar [text/icon] [of current folder]
sideBarBadgeBg[Muted] unread notification number badge background [when muted]
sideBarBadgeFg unread notification number text
Key Description
Accent
Content
separator list view separating line
Header
headerTabActive line underneath active tab
headerButton[Icon] floating action button (FAB) in expanded header (profile screen etc.)
headerRemoveBackground /?\
headerPlaceholder /?\
statusBarContent content generated by telegram in the statusbar. i.e. not the system icons, but the centred "connected" text etc.
Controls
controlContent "tick" icon inside control. this is consistent across all xxxContent items
textPlaceholder prefilled dummy text inside underlined content fields
inlineContentActive text inside inline buttons when pressed
playerButtonActive e.g. shuffle item when shuffle mode is enabled
Media
attach[Type] background of bottom sheet in attach (paperclip) menu
attachText text/icon of attach sheet bottom (opacity reduces when unfocussed)
fileAttach file type (gallery, music, etc.) circular icon background. icon is service\white
Chats
shareSeparator line separating contacts grid from "open in" text (e.g. in IV sharesheet)
Bubbles
bubble_unread[Text] "unread messages" banner [text]
bubble_date[Text] floating date bubble [text]
Other
sectionedScrollBar[Active/Content]
Service
caption_textLink
caption_textLinkPressHighlight
videoSlider[In]active
white an annoyingly generic property, covering (buggy?) expanded header icon buttons, name in sidebar, text at the top of images, shutter icon for camera, and more…
black /!\ unknown /!\
transparentEditor background of caption text over images, image editor
led[Colour] radio button for choosing led colour in settings ztodo: does this affect actual led colour?
@ZeusOfTheCrows
Copy link
Author

Feel free to add/modify this then pull request

@ZeusOfTheCrows
Copy link
Author

as of 25-10-2021, this has been moved to a proper repo so i can add images etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment