Theme Reference

This is a reference for creating Telegram Desktop themes. Some general introduction to be added later...

Constants

Guide

Reference

Constant	Description	Illustration
activeButtonBg	Currently selected button background
activeButtonBgOver	Mouse over currently selected button background
activeButtonBgRipple	Primary button background color (and active chat) - Press & hold
activeButtonFg	Currently selected button text
activeButtonFgOver	Mouse over currently selected button text
activeButtonSecondaryFg	Counter color on primary button
activeButtonSecondaryFgOver	Counter color on primary button (hover)
activeLineFg	Active input field line color (normal)
activeLineFgError	Active input field line color (error)
attentionButtonBgOver
attentionButtonBgRipple
attentionButtonFg
attentionButtonFgOver
boxBg	Popup windows background color
boxSearchBg
boxSearchCancelIconFg
boxSearchCancelIconFgOver
boxTextFg	Popup windows text color
boxTextFgError	Popup windows "bad" text (e.g. "Username already taken")
boxTextFgGood	Popup windows "good" text (e.g. "Username available")
boxTitleAdditionalFg
boxTitleCloseFg
boxTitleCloseFgOver
boxTitleFg	Popup windows titles color (sessions, contacts...)
cancelIconFg
cancelIconFgOver
checkboxFg
contactsBg	Contacts list background color
contactsBgOver	Contacts list mouse over background
contactsNameFg
contactsStatusFg	Contacts list last seen
contactsStatusFgOnline
contactsStatusFgOver
dialogsBg	Chats list background color
dialogsBgActive	Active chat color (in chats list)
dialogsBgOver	Inactive chat color on hover
dialogsChatIconFg
dialogsChatIconFgActive
dialogsChatIconFgOver
dialogsDateFg	Chats list date text
dialogsDateFgActive	Active chat date color
dialogsDateFgOver
dialogsDraftFg	"Draft" word
dialogsDraftFgActive	"Draft" word when chat is selected
dialogsDraftFgOver
dialogsForwardBg
dialogsForwardFg
dialogsMenuIconFg
dialogsMenuIconFgOver
dialogsNameFg
dialogsNameFgActive
dialogsNameFgOver
dialogsSendingIconFg
dialogsSendingIconFgActive
dialogsSendingIconFgOver
dialogsSentIconFg
dialogsSentIconFgActive
dialogsSentIconFgOver
dialogsTextFg	Chats list message preview text
dialogsTextFgActive	Active chat message preview color
dialogsTextFgOver
dialogsTextFgService	Chats list message preview sender name
dialogsTextFgServiceActive	Active chat service messages color
dialogsTextFgServiceOver	Mouse over chats list message preview sender name
dialogsUnreadBg	Chats list unread counter background
dialogsUnreadBgActive
dialogsUnreadBgMuted	Unread counter (for muted chats) + pins color(?)
dialogsUnreadBgMutedActive
dialogsUnreadBgMutedOver
dialogsUnreadBgOver
dialogsUnreadFg	Unread counter text color
dialogsUnreadFgActive
dialogsUnreadFgOver
dialogsVerifiedIconBg	Verification icon background
dialogsVerifiedIconBgActive
dialogsVerifiedIconBgOver
dialogsVerifiedIconFg	Verification icon check color
dialogsVerifiedIconFgActive
dialogsVerifiedIconFgOver
emojiPanBg	Sticker panel background
emojiPanCategories	Sticker panel bottom bar background
emojiPanHeaderBg	Sticker panel top bar background
emojiPanHeaderFg	Sticker panel title text
filterInputBorderFg	Search field border
filterInputInactiveBg
historyCaptionInFg
historyCaptionOutFg
historyComposeAreaBg	Text input field background
historyComposeAreaFg	Text color in "Type your message" field
historyComposeAreaFgService
historyComposeButtonBg
historyComposeButtonBgOver
historyComposeButtonBgRipple
historyComposeIconFg	Text input field: Paperclip and Smile icons
historyComposeIconFgOver	Text input field: Paperclip and Smile icons (hover)
historyFileInIconFg	Uploading/downloading icons?
historyFileInIconFgSelected
historyFileInRadialFg
historyFileInRadialFgSelected
historyFileNameInFg
historyFileNameOutFg
historyFileOutIconFg
historyFileOutIconFgSelected
historyFileOutRadialFg
historyFileOutRadialFgSelected
historyFileThumbIconFg
historyFileThumbIconFgSelected
historyFileThumbRadialFg
historyFileThumbRadialFgSelected
historyForwardChooseBg	"Choose recipient" BACKGROUND color (forwarding)
historyForwardChooseFg	"Choose recipient" TEXT color (forwarding)
historyIconFgInverted	"Checks" on stickers (outgoing)
historyOutIconFg	"Eye" and "Checks" color for outgoing messages (selected)
historyOutIconFgSelected	"Eye" and "Checks" color for outgoing messages (selected)
historyPeer1NameFg	Group chat sender name - Orange
historyPeer1UserpicBg
historyPeer2NameFg	Green
historyPeer2UserpicBg
historyPeer3NameFg	Gold
historyPeer3UserpicBg
historyPeer4NameFg	Light green
historyPeer4UserpicBg
historyPeer5NameFg	Violet
historyPeer5UserpicBg
historyPeer6NameFg	"Raspberry"
historyPeer6UserpicBg
historyPeer7NameFg	Cyan
historyPeer7UserpicBg
historyPeer8NameFg	One more orange?!
historyPeer8UserpicBg
historyPeerUserpicFg
historyPinnedBg
historyReplyBg
historyReplyCancelFg
historyReplyCancelFgOver
historyScrollBarBg	Scrollbar (history view) background
historyScrollBarBgOver	Scrollbar (history view) background (hover)
historyScrollBg	Scrollbar (history view) current position background
historyScrollBgOver	Scrollbar (history view) current position background (hover)
historySendIconFg	Text input field: Send icon
historySendIconFgOver	Text input field: Send icon (hover)
historySendingInIconFg	"Clock" icon while sending file (incoming)
historySendingInvertedIconFg
historySendingOutIconFg	"Clock" icon while sending file (outgoing)
historySystemBg
historySystemBgSelected
historySystemFg
historyTextInFg	Incoming messages TEXT color
historyTextOutFg	Outgoing messages TEXT color
historyToDownBg	"Scroll to bottom" button background
historyToDownBgOver	"Scroll to bottom" button background (hover)
historyToDownBgRipple	"Scroll to bottom" button background (press & hold)
historyToDownFg	"Scroll to bottom" internal icon color
historyToDownFgOver	"Scroll to bottom" internal icon color (hover)
historyToDownShadow	"Scroll to bottom" button shadow
historyUnreadBarBg	Unread messages bar background color
historyUnreadBarBorder	Unread messages bar border color
historyUnreadBarFg	Unread messages bar text color
imageBg
imageBgTransparent
inputBorderFg
introBg
introCoverBottomBg	Gradient start at the bottom of the login screen
introCoverIconsFg	Icons and clouds colors
introCoverPlaneInner	Plane color inside
introCoverPlaneOuter	Plane color outside
introCoverPlaneTop	Main plane color
introCoverPlaneTrace	Plane trace
introCoverTopBg	Gradient finish at the top of the login screen
introDescriptionFg
introErrorFg
introTitleFg
layerBg	Current chat tint when forwarding message
lightButtonBg	Secondary button background color (default)
lightButtonBgOver	Secondary button background color (hover)
lightButtonBgRipple	Secondary button background color (press & hold)
lightButtonFg	Secondary button text color
lightButtonFgOver
mainMenuBg	Left menu background (lower part, not buttons)
mainMenuCoverBg	Left menu background (upper part)
mainMenuCoverFg
mediaInFg
mediaInFgSelected
mediaOutFg
mediaOutFgSelected
mediaPlayerActiveFg	Clickable Next song/Prev song button in music player
mediaPlayerBg	Music player background
mediaPlayerDisabledFg
mediaPlayerInactiveFg	"Disabled" Next song/Prev song button in music player
mediaviewBg	Background for all content types in media view window
mediaviewCaptionBg	Background for caption in media preview window
mediaviewCaptionFg	Caption text color
mediaviewControlBg	Background for arrows and close button in media view window
mediaviewControlFg
mediaviewFileBg
mediaviewFileBlueCornerFg
mediaviewFileExtFg
mediaviewFileGreenCornerFg
mediaviewFileNameFg
mediaviewFileRedCornerFg
mediaviewFileSizeFg
mediaviewFileYellowCornerFg
mediaviewMenuBg	Menu background in media view menu
mediaviewMenuBgOver	Menu items (hover)
mediaviewMenuBgRipple	Menu items (press & hold)
mediaviewMenuFg	Text color in media view menu
mediaviewPlaybackActive	Controls color in video preview (default)
mediaviewPlaybackActiveOver	Controls color in video preview (hover)
mediaviewPlaybackIconFg
mediaviewPlaybackIconFgOver
mediaviewPlaybackInactive	Timeline color (default)
mediaviewPlaybackInactiveOver	Timeline color (hover)
mediaviewPlaybackProgressFg	Time color in video preview
mediaviewSaveMsgBg	'Something was saved to % folder' message background
mediaviewSaveMsgFg	'Something was saved to % folder' message text color
mediaviewTextLinkFg	Links color in captions
mediaviewTransparentBg
mediaviewTransparentFg
mediaviewVideoBg
membersAboutLimitFg
menuBg
menuBgOver
menuBgRipple
menuFgDisabled
menuIconFg	Icons color (left menu button, scroll down, paperclip..)
menuIconFgOver	Icons color on hover (left menu button, scroll down, paperclip..)
menuSeparatorFg	(unknown)
menuSubmenuArrowFg	(unknown)
msgBotKbIconFg	Inline button icon color (URL Buttons, for example)
msgBotKbOverBgAdd	Inline button (hover)
msgBotKbRippleBg	Inline button (press & hold)
msgDateImgBg	Download / play / etc overlay backgrounds
msgDateImgBgOver	Mouse over download / play / etc overlay backgrounds
msgDateImgBgSelected
msgDateImgFg
msgFile1Bg
msgFile1BgDark
msgFile1BgOver
msgFile1BgSelected
msgFile2Bg
msgFile2BgDark
msgFile2BgOver
msgFile2BgSelected
msgFile3Bg
msgFile3BgDark
msgFile3BgOver
msgFile3BgSelected
msgFile4Bg
msgFile4BgDark
msgFile4BgOver
msgFile4BgSelected
msgFileInBg
msgFileInBgOver
msgFileInBgSelected
msgFileOutBg
msgFileOutBgOver
msgFileOutBgSelected
msgFileThumbLinkInFg
msgFileThumbLinkInFgSelected
msgFileThumbLinkOutFg
msgFileThumbLinkOutFgSelected
msgInBg	Incoming message background
msgInBgSelected	Selected incoming message background
msgInDateFg	Incoming message date text
msgInDateFgSelected
msgInMonoFg	Monowidth font / incoming msg
msgInReplyBarColor	Incoming msg: vertical bar next to reply
msgInReplyBarSelColor	Incoming msg: vertical bar next to reply (selected)
msgInServiceFg	Incoming reply quoted name
msgInServiceFgSelected	Selected incoming reply quoted name
msgInShadow	Incoming message box shadow
msgInShadowSelected	Selected incoming message box shadow
msgOutBg	Outgoing message background
msgOutBgSelected	Selected outgoing message background
msgOutDateFg	Outgoing message date text
msgOutDateFgSelected
msgOutMonoFg	Monowidth font / outgoing msg
msgOutReplyBarColor	Outgoing msg: vertical bar next to reply
msgOutReplyBarSelColor	Outgoing msg: vertical bar next to reply (selected)
msgOutServiceFg	Outgoing reply quoted name
msgOutServiceFgSelected	Selected outgoing reply quoted name
msgOutShadow	Outgoing message box shadow
msgOutShadowSelected	Selected outgoing message box shadow
msgSelectOverlay	Selected media (images...) overlay
msgServiceBg	Service messages BACKGROUND color (join, left etc)
msgServiceBgSelected
msgServiceFg	Service messages TEXT color (join, left etc)
msgStickerOverlay	Selected sticker overlay
msgWaveformInActive	Incoming Voice "heard" part
msgWaveformInActiveSelected	Selected incoming Voice "heard" part
msgWaveformInInactive	Incoming Voice "unheard" part
msgWaveformInInactiveSelected	Selected incoming Voice "unheard" part
msgWaveformOutActive	Outgoing Voice "heard" part
msgWaveformOutActiveSelected	Selected outgoing Voice "heard" part
msgWaveformOutInactive	Outgoing Voice "unheard" part
msgWaveformOutInactiveSelected	Selected outgoing Voice "unheard" part
notificationBg	Notification background
notificationSampleCloseFg	Sample notifications close button color (Settings > Notifications position and count)
notificationSampleNameFg	Sample notifications name color
notificationSampleTextFg	Sample notifications message text color
notificationSampleUserpicFg
notificationsBoxMonitorFg
notificationsBoxScreenBg
outlineButtonBg	Buttons background in profiles (shared media)
outlineButtonBgOver
outlineButtonBgRipple
outlineButtonOutlineFg
overviewCheckBg	Circle background for check in shared media (default)
overviewCheckFg	Circle background for check in shared media (selected file)
overviewCheckFgActive	Check color for selected files in shared media
overviewPhotoSelectOverlay	Overlay color for selected files in shared media
photoCropFadeBg	"Out-of-bounds" area in photo cropping (avatars etc...)
photoCropPointFg	Photo crop "corners" (which you drag to crop photo)
placeholderFg	Inactive input box placeholder text
placeholderFgActive	Active input box placeholder text
profileAdminStartFg	Star color for group/channhel admins and moderators (look in members list)
profileStatusFgOver
profileVerifiedCheckBg	Check background color for verified accounts (on profile page)
profileVerifiedCheckFg	Check color for verified accounts (on profile page)
radialBg
radialFg
reportSpamBg
reportSpamFg
scrollBarBg	Scrollbar (chats list) current position
scrollBarBgOver	Mouse over scrollbar (chats list) current position
scrollBg	Scrollbar (chats list) background
scrollBgOver	Mouse over scrollbar (chats list) background
searchedBarBg	Search results window background color
searchedBarBorder
searchedBarFg	Search results text color
shadowFg	Internal border shadows
slideFadeOutBg
slideFadeOutShadowFg	Window slide animation shadow
sliderBgActive	Active media player button (prev/next song)
sliderBgInactive	Inactive media player button (prev/next song)
smallCloseIconFg	Notification close button (default)
smallCloseIconFgOver	Notification close button (hover)
stickerPanDeleteBg
stickerPanDeleteFg
stickerPreviewBg	Sticker preview background
titleBg	Title bar color
titleBgActive	Title bar color when Telegram window is focused
titleButtonBg	Title bar min/max/close buttons background
titleButtonBgActive
titleButtonBgActiveOver
titleButtonBgOver	Title bar min/max background (hover)
titleButtonCloseBg
titleButtonCloseBgActive
titleButtonCloseBgActiveOver
titleButtonCloseBgOver	Close button background (hover)
titleButtonCloseFg
titleButtonCloseFgActive
titleButtonCloseFgActiveOver
titleButtonCloseFgOver	Close button icon color (hover)
titleButtonFg	Title bar buttons(min/max/close)
titleButtonFgActive
titleButtonFgActiveOver
titleButtonFgOver	Title bar min/max icons
titleFg	Inactive title bar text (Mac)
titleFgActive
titleFgActive	Active title bar text (Mac)
titleShadow
toastBg	Video player control block background
toastFg	Video player control block text color
tooltipBg	Tooltip background (hover on message sent time)
tooltipBorderFg	Tooltip border color
tooltipFg	Tooltip text color
topBarBg	Chat header background
trayCounterBg	Unread messages counter background in tray (not muted, default red)
trayCounterBgMacInvert
trayCounterBgMute	Unread messages counter background in tray (muted, default gray)
trayCounterFg	Unread messages counter text (number)
trayCounterFgMacInvert
videoPlayIconBg
videoPlayIconFg
windowActiveTextFg	Online status, links, recording cancel, etc
windowBg	Window backgrounds
windowBgActive	Active button background (+ checkboxes background)
windowBgOver	Search field background + buttons color in context menu
windowBgRipple	Inactive chat in chats list (press & hold)
windowBoldFg	Bold font (titles in Settings, Left menu options)
windowBoldFgOver	Mouse over chats list chat name text (+ Left menu options on hover)
windowFg	Main text / chat text
windowFgActive	Active selected chats list text / button text + checkboxes' "ticks" color
windowFgOver	black: fallback for over text color
windowShadowFg	Window border shadows
windowShadowFgFallback	Notification border
windowSubTextFg	Chats list message preview text
windowSubTextFgOver	Mouse over chats list message preview text
youtubePlayIconBg
youtubePlayIconFg