-
Notifications
You must be signed in to change notification settings - Fork 7.1k
Theme Reference
ADTC edited this page Jan 25, 2017
·
19 revisions
This reference wiki is a community work in progress. Your contributions are welcome.
This is a help reference for Telegram Desktop themes. You can find new themes in the Desktop Themes Channel. You can also share and exchange themes with your friends by simply sending and receiving them as regular files in the Telegram client.
To apply a theme, download the theme in the Telegram Desktop client and click on it within the client window. In the Theme Preview window, click the Apply This Theme button and then the Keep Changes button.
If you downloaded the theme from an external source, upload the theme in the Telegram Desktop client (any chat; perhaps in your own chat), download it again in the client, and click on it within the client window.
You can also apply a theme by visiting Settings and clicking on Choose from file in the Chat background section. Open the .tdesktop-theme file here to load the theme. Tip: If you load a theme this way, it is reloaded each time you launch the app. This maybe helpful if you're making changes to the theme.
To create a theme with just a color scheme, you only need a single text file with the extension .tdesktop-theme (instead of .txt). The text is a list of color constants and their defined colors.
To create a theme with a background image included you should put two files in a ZIP archive:
- The color scheme in a text file. This file should be named
colors.tdesktop-theme. - The background image in JPEG or PNG format. It can be named
background.jpg,background.png,tiled.jpgortiled.png. You should name itbackgroundif you'd like it not to be tiled, ortiledif you'd like it to be tiled.
After that you need to change the extension of your ZIP archive from .zip to .tdesktop-theme, so you'll have:
mytheme.tdesktop-theme (a ZIP archive)
|-colors.tdesktop-theme (a text file)
'-background.jpg (or tiled.jpg, background.png, tiled.png)
The standard list of color constants (shown below) define colors for user interface components of Telegram Desktop. The default colors are defined in the default theme color file.
The color of a constant is defined in hexadecimal format with RGB or RGBA notation. The A in RGBA stands for alpha, which defines the amount of transparency.
activeButtonBgOver: #00a32b; //RGB
msgStickerOverlay: #2223237f; //RGBA
A constant can reuse the color defined for another constant:
windowActiveTextFg: #15cd7d;
msgInServiceFg: windowActiveTextFg;
Beyond the standard list, custom constants can also be defined for easy reference and constant reuse:
COLOR_GREEN_LIGHT: #15cd7d;
windowBoldFgOver: COLOR_GREEN_LIGHT;
menuIconFgOver: COLOR_GREEN_LIGHT;
| 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 | ||
| historyReplyIconFg | ||
| 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 | ||
| msgImgReplyBarColor | ||
| 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 | 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 |