├── .gitignore ├── src ├── tiled.png └── colors.tdesktop-theme ├── Makefile ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | gruv-material-dark.tdesktop-theme 2 | -------------------------------------------------------------------------------- /src/tiled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanielevan/gruvbox-material-telegram/HEAD/src/tiled.png -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | BACKGROUND_FILE ?= src/tiled.png 2 | COLORS_FILE ?= src/colors.tdesktop-theme 3 | THEME_NAME ?= gruv-material-dark 4 | 5 | build: $(BACKGROUND_FILE) $(COLORS_FILE) 6 | zip -j $(THEME_NAME).tdesktop-theme $(BACKGROUND_FILE) $(COLORS_FILE) 7 | 8 | clean: 9 | rm -f $(THEME_NAME).tdesktop-theme 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gruvbox Material Theme for Telegram 2 | Port of the [Gruvbox Material colour scheme](https://github.com/sainnhe/gruvbox-material) by [@sainnhe](https://github.com/sainnhe) for the Telegram desktop client. 3 | 4 | ## Usage 5 | ### Manual build 6 | * Clone this repository and change directory to it. 7 | * Run `make build` to generate the theme file. 8 | * On the Telegram desktop client, go to "Settings" --> "Chat Settings" --> Triple dot menu on top-right --> Create new theme --> Import existing theme 9 | 10 | ### Install link 11 | Alternatively, you may automatically add this theme to your client by visiting [this link](https://t.me/addtheme/gruvmaterialdark). 12 | 13 | Any contribution would be much appreciated! 14 | 15 | ## Screenshot 16 | 17 | ![Screenshot](https://user-images.githubusercontent.com/9361126/183894872-4e721645-a359-48eb-b8f0-f10d6ca27781.png) 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Nathaniel Evan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/colors.tdesktop-theme: -------------------------------------------------------------------------------- 1 | windowBg: #282828; // white: fallback for background 2 | windowFg: #e2d3ba; // black: fallback for text 3 | windowBgOver: #3c3836; // light gray: fallback for background with mouse over 4 | windowBgRipple: #45403d; // darker gray: fallback for ripple effect 5 | windowFgOver: windowFg; // black: fallback for text with mouse over 6 | windowSubTextFg: #928374; // gray: fallback for additional text 7 | windowSubTextFgOver: #a89984; // darker gray: fallback for additional text with mouse over 8 | windowBoldFg: #d4be98; // dark gray: fallback for bold text 9 | windowBoldFgOver: #e2d3ba; // dark gray: fallback for bold text with mouse over 10 | windowBgActive: #d8a657; // bright blue: fallback for blue filled active areas 11 | windowFgActive: #1d2021; // white: fallback for text on active areas 12 | windowActiveTextFg: #e1bb7e; // online blue: fallback for active text like online status 13 | windowShadowFg: #1d2021; // black: fallback for shadow 14 | windowShadowFgFallback: #928374; // gray: fallback for shadow without opacity 15 | shadowFg: #1d202118; // most shadows (including opacity) 16 | slideFadeOutBg: #1d20213c; // slide animation (chat to profile) fade out filling 17 | slideFadeOutShadowFg: windowShadowFg; // slide animation (chat to profile) fade out right section shadow 18 | imageBg: #1d2021; // image background fallback (when photo size is less than minimum allowed) 19 | imageBgTransparent: #f9f5d7; // image background when displaying an image with opacity where no opacity is needed 20 | activeButtonBg: windowBgActive; // default active button background 21 | activeButtonBgOver: #ddb16b; // default active button background with mouse over 22 | activeButtonBgRipple: #e1bb7e; // default active button ripple effect 23 | activeButtonFg: windowFgActive; // default active button text 24 | activeButtonFgOver: activeButtonFg; // default active button text with mouse over 25 | activeButtonSecondaryFg: #5a524c; // default active button additional text (selected messages counter in forward / delete buttons) 26 | activeButtonSecondaryFgOver: activeButtonSecondaryFg; // default active button additional text with mouse over 27 | activeLineFg: #d8a657; // default active line (like code input field bottom border when you log in and field is focused) 28 | activeLineFgError: #ea6962; // default active line for error state (like code input field bottom border when you log in and you've entered incorrect code) 29 | lightButtonBg: windowBg; // default light button background (like buttons in boxes) 30 | lightButtonBgOver: windowBgOver; // default light button background with mouse over 31 | lightButtonBgRipple: windowBgRipple; // default light button ripple effect 32 | lightButtonFg: windowActiveTextFg; // default light button text 33 | lightButtonFgOver: lightButtonFg; // default light button text with mouse over 34 | attentionButtonFg: #ea6962; // default attention button text (like confirm button on log out) 35 | attentionButtonFgOver: #ea6962; // default attention button text with mouse over 36 | attentionButtonBgOver: #3c3836; // default attention button background with mouse over 37 | attentionButtonBgRipple: #45403d; // default attention button ripple effect 38 | menuBg: #282828; // default popup menu background 39 | menuBgOver: windowBgOver; // default popup menu item background with mouse over 40 | menuBgRipple: windowBgRipple; // default popup menu item ripple effect 41 | menuIconFg: #928374; // default popup menu item icon (like main menu) 42 | menuIconFgOver: #d4be98; // default popup menu item icon with mouse over 43 | menuSubmenuArrowFg: #928374; // default popup menu submenu arrow icon (like in message field context menu in case of RTL system language) 44 | menuFgDisabled: #7c6f64; // default popup menu item disabled text (like unavailable items in message field context menu) 45 | menuSeparatorFg: #45403d; // default popup menu separator (like in message field context menu) 46 | scrollBarBg: #e2d3ba53; // default scroll bar current rectangle, the bar itself (like in chats list) 47 | scrollBarBgOver: #e2d3ba7a; // default scroll bar current rectangle with mouse over it 48 | scrollBg: #92837430; // default scroll bar background 49 | scrollBgOver: #9283744c; // default scroll bar background with mouse over the scroll bar 50 | smallCloseIconFg: #928374; // small X icon (like in Show all sessions box to the right for sessions termination) 51 | smallCloseIconFgOver: #a89984; // small X icon with mouse over 52 | radialFg: #e2d3ba; // default radial loader line (like in Media Viewer when loading a photo) 53 | radialBg: #282828aa; // default radial loader background (like in Media Viewer when loading a photo) 54 | placeholderFg: windowSubTextFg; // default input field placeholder when field is not focused (like in phone input field when you log in) 55 | placeholderFgActive: placeholderFg; // default input field placeholder when field is focused 56 | inputBorderFg: #e2d3ba; // default input field bottom border (like in code input field when you log in and field is not focused) 57 | filterInputBorderFg: #d4be98; // default rounded input field border (like in chats list search field when field is focused) 58 | filterInputActiveBg: windowBg; // default rounded input field active background (like in chats list search field when field is focused) 59 | filterInputInactiveBg: windowBgOver; // default rounded input field inactive background (like in chats list search field when field is inactive) 60 | checkboxFg: #928374; // default unchecked checkbox rounded rectangle 61 | botKbBg: menuBgOver; // bot keyboard button background 62 | botKbDownBg: menuBgRipple; // bot keyboard button ripple effect 63 | botKbColor: windowBoldFgOver; // bot keyboard button text 64 | sliderBgInactive: #e2d3ba; // default slider not active bar (like in Settings when you choose interface scale or custom notifications count) 65 | sliderBgActive: windowBgActive; // default slider active bar (like in Settings when you choose interface scale or custom notifications count) 66 | tooltipBg: #282828; // tooltip background (like when you put mouse over the message timestamp and wait) 67 | tooltipFg: #e2d3ba; // tooltip text 68 | tooltipBorderFg: #e2d3ba; // tooltip border 69 | titleShadow: #1d202103; // one pixel line shadow at the bottom of custom window title 70 | titleBg: #1d2021; // custom window title background when window is inactive 71 | titleBgActive: titleBg; // custom window title background when window is active 72 | titleButtonBg: titleBg; // custom window title minimize/maximize/restore button background when window is inactive (Windows only) 73 | titleButtonFg: #e2d3ba; // custom window title minimize/maximize/restore button icon when window is inactive (Windows only) 74 | titleButtonBgOver: #45403d; // custom window title minimize/maximize/restore button background with mouse over when window is inactive (Windows only) 75 | titleButtonFgOver: titleButtonFg; // custom window title minimize/maximize/restore button icon with mouse over when window is inactive (Windows only) 76 | titleButtonBgActive: titleBgActive; // custom window title minimize/maximize/restore button background when window is active (Windows only) 77 | titleButtonFgActive: titleButtonFg; // custom window title minimize/maximize/restore button icon when window is active (Windows only) 78 | titleButtonBgActiveOver: titleButtonBgOver; // custom window title minimize/maximize/restore button background with mouse over when window is active (Windows only) 79 | titleButtonFgActiveOver: titleButtonFgActive; // custom window title minimize/maximize/restore button icon with mouse over when window is active (Windows only) 80 | titleButtonCloseBg: titleButtonBg; // custom window title close button background when window is inactive (Windows only) 81 | titleButtonCloseFg: titleButtonFg; // custom window title close button icon when window is inactive (Windows only) 82 | titleButtonCloseBgOver: #ea6962; // custom window title close button background with mouse over when window is inactive (Windows only) 83 | titleButtonCloseFgOver: #282828; // custom window title close button icon with mouse over when window is inactive (Windows only) 84 | titleButtonCloseBgActive: titleButtonBgActive; // custom window title close button background when window is active (Windows only) 85 | titleButtonCloseFgActive: titleButtonFgActive; // custom window title close button icon when window is active (Windows only) 86 | titleButtonCloseBgActiveOver: titleButtonCloseBgOver; // custom window title close button background with mouse over when window is active (Windows only) 87 | titleButtonCloseFgActiveOver: titleButtonCloseFgOver; // custom window title close button icon with mouse over when window is active (Windows only) 88 | titleFg: #928374; // custom window title text when window is inactive (macOS only) 89 | titleFgActive: #e2d3ba; // custom window title text when window is active (macOS only) 90 | trayCounterBg: #ea6962; // tray icon counter background 91 | trayCounterBgMute: #928374; // tray icon counter background if all unread messages are muted 92 | trayCounterFg: #e2d3ba; // tray icon counter text 93 | trayCounterBgMacInvert: trayCounterBg; // tray icon counter background when tray icon is pressed or when dark theme of macOS is used (macOS only) 94 | trayCounterFgMacInvert: trayCounterFg; // tray icon counter text when tray icon is pressed or when dark theme of macOS is used (macOS only) 95 | layerBg: #1d20217f; // box and main menu background layer fade 96 | cancelIconFg: menuIconFg; // default for settings close icon and box search cancel icon 97 | cancelIconFgOver: menuIconFgOver; // default for settings close icon and box search cancel icon with mouse over 98 | boxBg: windowBg; // box background 99 | boxTextFg: windowFg; // box text 100 | boxTextFgGood: #a9b665; // accepted box text (like when choosing username that is not occupied) 101 | boxTextFgError: #ea6962; // rejecting box text (like when choosing username that is occupied) 102 | boxTitleFg: #e2d3ba; // box title text 103 | boxSearchBg: boxBg; // box search field background (like in contacts box) 104 | boxTitleAdditionalFg: #928374; // box title additional text (like in create group box when you see chosen members count) 105 | boxTitleCloseFg: cancelIconFg; // settings close icon and box search cancel icon (like in contacts box) 106 | boxTitleCloseFgOver: cancelIconFgOver; // settings close icon and box search cancel icon (like in contacts box) with mouse over 107 | membersAboutLimitFg: windowSubTextFgOver; // text in channel members box about the limit (max 200 last members are shown) 108 | contactsBg: windowBg; // contacts (and some other) box row background 109 | contactsBgOver: windowBgOver; // contacts (and some other) box row background with mouse over 110 | contactsNameFg: boxTextFg; // contacts (and some other) box row name text 111 | contactsStatusFg: windowSubTextFg; // contacts (and some other) box row additional text (like last seen stamp) 112 | contactsStatusFgOver: windowSubTextFgOver; // contacts (and some other) box row additional text (like last seen stamp) with mouse over 113 | contactsStatusFgOnline: windowActiveTextFg; // contacts (and some other) box row active additional text (like online status) 114 | photoCropFadeBg: layerBg; // avatar crop box fade background (when choosing a new photo in Settings or for a group) 115 | photoCropPointFg: #e2d3ba7f; // avatar crop box corner rectangles (when choosing a new photo in Settings or for a group) 116 | callArrowFg: #a9b665; // received phone call arrow (in calls list box) 117 | callArrowMissedFg: #ea6962; // missed phone call arrow (in calls list box) 118 | introBg: windowBg; // login background 119 | introTitleFg: windowBoldFg; // login title text 120 | introDescriptionFg: windowSubTextFg; // login description text 121 | introErrorFg: windowSubTextFg; // login error text (like when providing a wrong log in code) 122 | introCoverTopBg: #282828; // intro gradient top (from) 123 | introCoverBottomBg: #45403d; // intro gradient bottom (to) 124 | introCoverIconsFg: #665c54; // intro cloud graphics 125 | introCoverPlaneTrace: #928374; // intro plane traces 126 | introCoverPlaneInner: #d4be98; // intro plane part 127 | introCoverPlaneOuter: #ddc7a1; // intro plane part 128 | introCoverPlaneTop: #e2d3ba; // intro plane part 129 | dialogsMenuIconFg: menuIconFg; // main menu and lock telegram icon 130 | dialogsMenuIconFgOver: menuIconFgOver; // main menu and lock telegram icon with mouse over 131 | dialogsBg: windowBg; // chat list background 132 | dialogsNameFg: windowBoldFg; // chat list name text 133 | dialogsChatIconFg: dialogsNameFg; // chat list group or channel icon 134 | dialogsDateFg: windowSubTextFg; // chat list date text 135 | dialogsTextFg: windowSubTextFg; // chat list message text 136 | dialogsTextFgService: windowActiveTextFg; // chat list group sender name text (or media message type text) 137 | dialogsDraftFg: #ea6962; // chat list draft label 138 | dialogsVerifiedIconBg: windowBgActive; // chat list verified icon background 139 | dialogsVerifiedIconFg: windowFgActive; // chat list verified icon check 140 | dialogsSendingIconFg: #7c6f64; // chat list sending message icon (clock) 141 | dialogsSentIconFg: #a9b665; // chat list sent message tick / double tick icon 142 | dialogsUnreadBg: windowBgActive; // chat list unread badge background for not muted chat 143 | dialogsUnreadBgMuted: #928374; // chat list unread badge background for muted chat 144 | dialogsUnreadFg: windowFgActive; // chat list unread badge text 145 | dialogsArchiveFg: #928374; // chat list archive name text 146 | dialogsOnlineBadgeFg: #a9b665; // chat list online status 147 | dialogsScamFg: dialogsDraftFg; // chat list scam label 148 | dialogsBgOver: windowBgOver; // chat list background with mouse over 149 | dialogsNameFgOver: windowBoldFgOver; // chat list name text with mouse over 150 | dialogsChatIconFgOver: dialogsNameFgOver; // chat list group or channel icon with mouse over 151 | dialogsDateFgOver: windowSubTextFgOver; // chat list date text with mouse over 152 | dialogsTextFgOver: windowSubTextFgOver; // chat list message text with mouse over 153 | dialogsTextFgServiceOver: dialogsTextFgService; // chat list group sender name text with mouse over 154 | dialogsDraftFgOver: dialogsDraftFg; // chat list draft label with mouse over 155 | dialogsVerifiedIconBgOver: dialogsVerifiedIconBg; // chat list verified icon background with mouse over 156 | dialogsVerifiedIconFgOver: dialogsVerifiedIconFg; // chat list verified icon check with mouse over 157 | dialogsSendingIconFgOver: dialogsSendingIconFg; // chat list sending message icon (clock) with mouse over 158 | dialogsSentIconFgOver: dialogsSentIconFg; // chat list sent message tick / double tick icon with mouse over 159 | dialogsUnreadBgOver: dialogsUnreadBg; // chat list unread badge background for not muted chat with mouse over 160 | dialogsUnreadBgMutedOver: dialogsUnreadBgMuted; // chat list unread badge background for muted chat with mouse over 161 | dialogsUnreadFgOver: dialogsUnreadFg; // chat list unread badge text with mouse over 162 | dialogsArchiveFgOver: #a89984; // chat list archive name text with mouse over 163 | dialogsScamFgOver: dialogsDraftFgOver; // chat list scam label with mouse over 164 | dialogsBgActive: #45403d; // chat list background for current (active) chat 165 | dialogsNameFgActive: dialogsNameFg; // chat list name text for current (active) chat 166 | dialogsChatIconFgActive: dialogsNameFgActive; // chat list group or channel icon for current (active) chat 167 | dialogsDateFgActive: dialogsDateFg; // chat list date text for current (active) chat 168 | dialogsTextFgActive: #a89984; // chat list message text for current (active) chat 169 | dialogsTextFgServiceActive: dialogsTextFgService; // chat list group sender name text for current (active) chat 170 | dialogsDraftFgActive: #ea6962; // chat list draft label for current (active) chat 171 | dialogsVerifiedIconBgActive: dialogsVerifiedIconBg; // chat list verified icon background for current (active) chat 172 | dialogsVerifiedIconFgActive: dialogsVerifiedIconFg; // chat list verified icon check for current (active) chat 173 | dialogsSendingIconFgActive: #28282899; // chat list sending message icon (clock) for current (active) chat 174 | dialogsSentIconFgActive: #a9b665; // chat list sent message tick / double tick icon for current (active) chat 175 | dialogsUnreadBgActive: #d8a657; // chat list unread badge background for not muted chat for current (active) chat 176 | dialogsUnreadBgMutedActive: #a89984; // chat list unread badge background for muted chat for current (active) chat 177 | dialogsUnreadFgActive: #45403d; // chat list unread badge text for current (active) chat 178 | dialogsOnlineBadgeFgActive: #a9b665; // chat list online status for current (active) chat 179 | dialogsScamFgActive: dialogsDraftFgActive; // chat list scam label for current (active) chat 180 | dialogsRippleBg: windowBgRipple; // chat list background ripple effect 181 | dialogsRippleBgActive: #5a524c; // chat list background ripple effect for current (active) chat 182 | dialogsForwardBg: dialogsBgActive; // forwarding panel background (when forwarding messages in the smallest window size) 183 | dialogsForwardFg: dialogsNameFgActive; // forwarding panel text (when forwarding messages in the smallest window size) 184 | searchedBarBg: windowBgOver; // search results bar background (in chats list, contacts box..) 185 | searchedBarFg: windowSubTextFgOver; // search results bar text (in chats list, contacts box..) 186 | topBarBg: windowBg; // top bar background (in chat view, media overview..) 187 | emojiPanBg: windowBg; // emoji panel background 188 | emojiPanCategories: #32302f; // emoji panel categories background 189 | emojiPanHeaderFg: windowSubTextFg; // emoji panel section header text 190 | emojiPanHeaderBg: #32302f; // emoji panel section header background 191 | emojiIconFg: #928374; // emoji category icon 192 | emojiIconFgActive: windowBgActive; // active emoji category icon 193 | stickerPanDeleteBg: #282828; // delete X button background for custom sent stickers in stickers panel (legacy) 194 | stickerPanDeleteFg: windowFgActive; // delete X button icon for custom sent stickers in stickers panel (legacy) 195 | stickerPreviewBg: #282828b0; // sticker and GIF preview background (when you press and hold on a sticker) 196 | historyTextInFg: windowFg; // inbox message text 197 | historyTextInFgSelected: #282828; // inbox message selected text or text in a selected message 198 | historyTextOutFg: windowFg; // outbox message text 199 | historyTextOutFgSelected: #282828; // outbox message selected text or text in a selected message 200 | historyLinkInFg: windowActiveTextFg; // inbox message link 201 | historyLinkInFgSelected: #a96b2c; // inbox message link in a selected text or message 202 | historyLinkOutFg: #e1bb7e; // outbox message link 203 | historyLinkOutFgSelected: #a96b2c; // outbox message link in a selected text or message 204 | historyFileNameInFg: historyTextInFg; // inbox media filename text 205 | historyFileNameInFgSelected: historyTextInFgSelected; // inbox media filename text in a selected message 206 | historyFileNameOutFg: historyTextOutFg; // outbox media filename text 207 | historyFileNameOutFgSelected: historyTextOutFgSelected; // outbox media filename text in a selected message 208 | historyOutIconFg: dialogsSentIconFg; // outbox message tick / double tick icon 209 | historyOutIconFgSelected: #6c782e; // outbox message tick / double tick icon in a selected message 210 | historyIconFgInverted: windowFgActive; // media message tick / double tick icon (like in sent photo) 211 | historySendingOutIconFg: #928374; // outbox sending message icon (clock) 212 | historySendingInIconFg: #928374; // inbox sending message icon (clock) (like in sent messages to yourself or in sent messages to a channel) 213 | historySendingInvertedIconFg: #1d2021c8; // media sending message icon (clock) (like in sent photo) 214 | historyCallArrowInFg: callArrowFg; // received phone call arrow 215 | historyCallArrowInFgSelected: callArrowFg; // received phone call arrow in a selected message 216 | historyCallArrowMissedInFg: callArrowMissedFg; // missed phone call arrow 217 | historyCallArrowMissedInFgSelected: callArrowMissedFg; // missed phone call arrow in a selected message 218 | historyCallArrowOutFg: historyCallArrowInFg; // outgoing phone call arrow 219 | historyCallArrowOutFgSelected: historyCallArrowInFgSelected; // outgoing phone call arrow 220 | historyUnreadBarBg: #32302f; // new unread messages bar background 221 | historyUnreadBarBorder: shadowFg; // new unread messages bar shadow 222 | historyUnreadBarFg: #d4be98; // new unread messages bar text 223 | historyForwardChooseBg: #1d20214c; // forwarding messages in a large window size "choose recipient" background 224 | historyForwardChooseFg: windowFgActive; // forwarding messages in a large window size "choose recipient" text 225 | historyPeer1NameFg: #ea6962; // red group member name 226 | historyPeer1NameFgSelected: #c14a4a; // red group member name in a selected message 227 | historyPeer1UserpicBg: #ef938e; // red userpic background 228 | historyPeer2NameFg: #a9b665; // green group member name 229 | historyPeer2NameFgSelected: #6c782e; // green group member name in a selected message 230 | historyPeer2UserpicBg: #bbc585; // green userpic background 231 | historyPeer3NameFg: #d8a657; // yellow group member name 232 | historyPeer3NameFgSelected: #a96b2c; // yellow group member name in a selected message 233 | historyPeer3UserpicBg: #e1bb7e; // yellow userpic background 234 | historyPeer4NameFg: #7daea3; // blue group member name 235 | historyPeer4NameFgSelected: #45707a; // blue group member name in a selected message 236 | historyPeer4UserpicBg: #9dc2ba; // blue userpic background 237 | historyPeer5NameFg: #d3869b; // purple group member name 238 | historyPeer5NameFgSelected: #945e80; // purple group member name in a selected message 239 | historyPeer5UserpicBg: #e1acbb; // purple userpic background 240 | historyPeer6NameFg: #d487bd; // pink group member name 241 | historyPeer6NameFgSelected: #ab67a2; // pink group member name in a selected message 242 | historyPeer6UserpicBg: #d9b0cd; // pink userpic background 243 | historyPeer7NameFg: #89b482; // sea group member name 244 | historyPeer7NameFgSelected: #4c7a5d; // sea group member name in a selected message 245 | historyPeer7UserpicBg: #a7c7a2; // sea userpic background 246 | historyPeer8NameFg: #e78a4e; // orange group member name 247 | historyPeer8NameFgSelected: #c35e0a; // orange group member name in a selected message 248 | historyPeer8UserpicBg: #eca575; // orange userpic background 249 | historyPeerUserpicFg: windowFgActive; // default userpic initials 250 | historyPeerSavedMessagesBg: historyPeer4UserpicBg; // saved messages userpic background 251 | historyPeerArchiveUserpicBg: dialogsUnreadBgMuted; // archive folder userpic background 252 | historyScrollBarBg: scrollBarBg; // scroll bar current rectangle, the bar itself in the chat view (adjusted) 253 | historyScrollBarBgOver: scrollBarBgOver; // scroll bar current rectangle with mouse over it in the chat view (adjusted) 254 | historyScrollBg: scrollBg; // scroll bar background (adjusted) 255 | historyScrollBgOver: scrollBgOver; // scroll bar background with mouse over the scroll bar (adjusted) 256 | msgInBg: #32302f; // inbox message background 257 | msgInBgSelected: #d8a657; // inbox selected message background (and background of selected text in those messages) 258 | msgOutBg: #45403d; // outbox message background 259 | msgOutBgSelected: #d8a657; // outbox selected message background (and background of selected text in those messages) 260 | msgSelectOverlay: #d8a6574c; // overlay which is filling the media parts of selected messages (like in selected photo message) 261 | msgStickerOverlay: #d8a6577f; // overlay which is filling the selected sticker message 262 | msgInServiceFg: #d8a657; // inbox message information text (like information about a forwarded message original sender) 263 | msgInServiceFgSelected: #a96b2c; // inbox selected message information text (like information about a forwarded message original sender) 264 | msgOutServiceFg: #89b482; // outbox message information text (like information about a forwarded message original sender) 265 | msgOutServiceFgSelected: #4c7a5d; // outbox message information text (like information about a forwarded message original sender) 266 | msgInShadow: #45403d40; // inbox message shadow (below the bubble) 267 | msgInShadowSelected: #d8a65740; // inbox selected message shadow (below the bubble) 268 | msgOutShadow: #665c5440; // outbox message shadow (below the bubble) 269 | msgOutShadowSelected: #d8a65740; // outbox selected message shadow (below the bubble) 270 | msgInDateFg: #928374; // inbox message time text 271 | msgInDateFgSelected: #665c54; // inbox selected message time text 272 | msgOutDateFg: #a89984; // outbox message time text 273 | msgOutDateFgSelected: #665c54; // outbox selected message time text 274 | msgServiceFg: windowFgActive; // service message text (like date dividers or service message about the group title being changed) 275 | msgServiceBg: #e2d3bab5; // service message background (like in a service message about group title being changed) (adjusted) 276 | msgServiceBgSelected: #d8a657; // service message selected text background (like in a service message about group title being changed) (adjusted) 277 | msgInReplyBarColor: activeLineFg; // inbox message reply outline 278 | msgInReplyBarSelColor: #282828; // inbox selected message reply outline 279 | msgOutReplyBarColor: historyOutIconFg; // outbox message reply outline 280 | msgOutReplyBarSelColor: historyOutIconFgSelected; // outbox selected message reply outline 281 | msgImgReplyBarColor: msgServiceFg; // sticker message reply outline 282 | msgInMonoFg: #d8a657; // inbox message monospace text (like a message sent with `test` text) 283 | msgOutMonoFg: #a9b665; // outbox message monospace text 284 | msgInMonoFgSelected: #a96b2c; // inbox message monospace text in a selected text or message 285 | msgOutMonoFgSelected: #6f8352; // outbox message monospace text in a selected text or message 286 | msgDateImgFg: msgServiceFg; // media message time text (like time text in a sent photo) 287 | msgDateImgBg: #e2d3bab0; // media message time bubble background (like time bubble in a sent photo) or file with thumbnail download icon circle background 288 | msgDateImgBgOver: #e2d3ba; // media message download icon circle background with mouse over (like file with thumbnail download icon) 289 | msgDateImgBgSelected: #d8a657b0; // selected media message time bubble background 290 | msgFileThumbLinkInFg: lightButtonFg; // inbox media file message with thumbnail download / open with button text 291 | msgFileThumbLinkInFgSelected: #a96b2c; // inbox selected media file message with thumbnail download / open with button text 292 | msgFileThumbLinkOutFg: #a9b665; // outbox media file message with thumbnail download / open with button text 293 | msgFileThumbLinkOutFgSelected: #6f8352; // outbox selected media file message with thumbnail download / open with button text 294 | msgFileInBg: windowBgActive; // inbox audio file download circle background 295 | msgFileInBgOver: #e1bb7e; // inbox audio file download circle background with mouse over 296 | msgFileInBgSelected: #45403d; // inbox selected audio file download circle background 297 | msgFileOutBg: #a9b665; // outbox audio file download circle background 298 | msgFileOutBgOver: #bbc585; // outbox audio file download circle background with mouse over 299 | msgFileOutBgSelected: #45403d; // outbox selected audio file download circle background 300 | msgFile1Bg: #7daea3; // blue shared links / files without image square thumbnail 301 | msgFile1BgDark: #729e95; // blue shared files without image download circle background 302 | msgFile1BgOver: #688f86; // blue shared files without image download circle background with mouse over 303 | msgFile1BgSelected: #5c7e77; // blue shared files without image download circle background if file is selected 304 | msgFile2Bg: #a9b665; // green shared links / shared files without image square thumbnail 305 | msgFile2BgDark: #9fab60; // green shared files without image download circle background 306 | msgFile2BgOver: #899356; // green shared files without image download circle background with mouse over 307 | msgFile2BgSelected: #6f764a; // green shared files without image download circle background if file is selected 308 | msgFile3Bg: #ea6962; // red shared links / shared files without image square thumbnail 309 | msgFile3BgDark: #d6625c; // red shared files without image download circle background 310 | msgFile3BgOver: #c15a55; // red shared files without image download circle background with mouse over 311 | msgFile3BgSelected: #af544f; // red shared files without image download circle background if file is selected 312 | msgFile4Bg: #d8a657; // yellow shared links / shared files without image square thumbnail 313 | msgFile4BgDark: #cf9333; // yellow shared files without image download circle background 314 | msgFile4BgOver: #b57614; // yellow shared files without image download circle background with mouse over 315 | msgFile4BgSelected: #a96b2c; // yellow shared files without image download circle background if file is selected 316 | historyFileInIconFg: msgInBg; // inbox file without thumbnail (like audio file) download arrow icon 317 | historyFileInIconFgSelected: msgInBgSelected; // inbox selected file without thumbnail (like audio file) download arrow icon 318 | historyFileInRadialFg: historyFileInIconFg; // inbox file without thumbnail (like audio file) radial download animation line 319 | historyFileInRadialFgSelected: historyFileInIconFgSelected; // inbox selected file without thumbnail (like audio file) radial download animation line 320 | historyFileOutIconFg: msgOutBg; // outbox file without thumbnail (like audio file) download arrow icon 321 | historyFileOutIconFgSelected: msgOutBgSelected; // outbox selected file without thumbnail (like audio file) download arrow icon 322 | historyFileOutRadialFg: historyFileOutIconFg; // outbox file without thumbnail (like audio file) radial download animation line 323 | historyFileOutRadialFgSelected: historyFileOutIconFgSelected; // outbox selected file without thumbnail (like audio file) radial download animation line 324 | historyFileThumbIconFg: msgInBg; // file with thumbnail (or photo / video) download arrow icon 325 | historyFileThumbIconFgSelected: #45403d; // selected file with thumbnail (or photo / video) download arrow icon 326 | historyFileThumbRadialFg: historyFileThumbIconFg; // file with thumbnail (or photo / video) radial download animation line 327 | historyFileThumbRadialFgSelected: historyFileThumbIconFgSelected; // selected file with thumbnail (or photo / video) radial download animation line 328 | historyVideoMessageProgressFg: historyFileThumbIconFg; // radial playback progress in round video messages 329 | msgWaveformInActive: windowBgActive; // inbox voice message active waveform lines (like played part of currently playing voice message) 330 | msgWaveformInActiveSelected: #45403d; // inbox selected voice message active waveform lines (like played part of currently playing voice message) 331 | msgWaveformInInactive: #e2d3ba; // inbox voice message inactive waveform lines (like upcoming part of currently playing voice message) 332 | msgWaveformInInactiveSelected: #928374; // inbox selected voice message inactive waveform lines (like upcoming part of currently playing voice message) 333 | msgWaveformOutActive: #a9b665; // outbox voice message active waveform lines (like played part of currently playing voice message) 334 | msgWaveformOutActiveSelected: #45403d; // outbox selected voice message active waveform lines (like played part of currently playing voice message) 335 | msgWaveformOutInactive: #e2d3ba; // outbox voice message inactive waveform lines (like upcoming part of currently playing voice message) 336 | msgWaveformOutInactiveSelected: #928374; // outbox selected voice message inactive waveform lines (like upcoming part of currently playing voice message) 337 | msgBotKbOverBgAdd: #e2d3ba20; // this is painted over a bot inline keyboard button (which has msgServiceBg background) when mouse is over that button 338 | msgBotKbIconFg: msgServiceFg; // bot inline keyboard button icon in the top-right corner (like in @vote bot when a poll is ready to be shared) 339 | msgBotKbRippleBg: #e2d3ba20; // bot inline keyboard button ripple effect 340 | mediaInFg: msgInDateFg; // inbox media message status text (like in file that is being downloaded) 341 | mediaInFgSelected: msgInDateFgSelected; // inbox selected media message status text (like in file that is being downloaded) 342 | mediaOutFg: msgOutDateFg; // outbox media message status text (like in file that is being downloaded) 343 | mediaOutFgSelected: msgOutDateFgSelected; // outbox selected media message status text (like in file that is being downloaded) 344 | youtubePlayIconBg: #db4740e2; // youtube play icon background (when a link to a youtube video with a webpage preview is sent) 345 | youtubePlayIconFg: #e2d3ba; // youtube play icon arrow (when a link to a youtube video with a webpage preview is sent) 346 | videoPlayIconBg: #1d20217f; // other video play icon background (like when a link to a vimeo video with a webpage preview is sent) 347 | videoPlayIconFg: #e2d3ba; // other video play icon arrow (like when a link to a vimeo video with a webpage preview is sent) 348 | toastBg: #32302fe0; // toast notification background (like when you click on your t.me link when editing your username) 349 | toastFg: #d8a657; // toast notification text (like when you click on your t.me link when editing your username) 350 | reportSpamBg: emojiPanHeaderBg; // report spam panel background (like a non contact user writes your for the first time) 351 | reportSpamFg: windowFg; // report spam panel text (when you send a report from that panel) 352 | historyToDownBg: windowBg; // arrow button background (to scroll to the end of the viewed chat) 353 | historyToDownBgOver: windowBgOver; // arrow button background with mouse over 354 | historyToDownBgRipple: windowBgRipple; // arrow button ripple effect 355 | historyToDownFg: menuIconFg; // arrow button icon 356 | historyToDownFgOver: menuIconFgOver; // arrow button icon with mouse over 357 | historyToDownShadow: #1d202140; // arrow button shadow 358 | historyComposeAreaBg: #282828; // history compose area background (message write area / reply information / forwarding information) 359 | historyComposeAreaFg: historyTextInFg; // history compose area text 360 | historyComposeAreaFgService: msgInDateFg; // history compose area text when replying to a media message 361 | historyComposeIconFg: menuIconFg; // history compose area icon (like emoji, attach, bot command..) 362 | historyComposeIconFgOver: menuIconFgOver; // history compose area icon with mouse over 363 | historySendIconFg: windowBgActive; // send message icon 364 | historySendIconFgOver: windowBgActive; // send message icon with mouse over 365 | historyPinnedBg: historyComposeAreaBg; // pinned message area background 366 | historyReplyBg: historyComposeAreaBg; // reply / forward / edit message area background 367 | historyReplyIconFg: windowBgActive; // reply / forward / edit message left icon 368 | historyReplyCancelFg: cancelIconFg; // reply / forward / edit message cancel button 369 | historyReplyCancelFgOver: cancelIconFgOver; // reply / forward / edit message cancel button with mouse over 370 | historyComposeButtonBg: historyComposeAreaBg; // unblock / join channel / mute channel button background 371 | historyComposeButtonBgOver: windowBgOver; // unblock / join channel / mute channel button background with mouse over 372 | historyComposeButtonBgRipple: windowBgRipple; // unblock / join channel / mute channel button ripple effect 373 | mapPointDrop: #ea6962; // geo location marker background 374 | mapPointDot: #282828; // geo location marker point 375 | overviewCheckBg: #28282840; // shared media / files / links checkbox background for not selected rows when some rows are selected 376 | overviewCheckBgActive: windowBgActive; // shared media / files / links checkbox background for selected rows 377 | overviewCheckBorder: windowBg; // shared media round checkbox border 378 | overviewCheckFg: windowBg; // shared files / links checkbox icon for not selected rows when some rows are selected 379 | overviewCheckFgActive: windowBg; // shared files / links checkbox icon for selected rows 380 | overviewPhotoSelectOverlay: #d8a65733; // shared photos / videos / links fill for selected rows 381 | profileStatusFgOver: #a89984; // group members list in group profile user last seen text with mouse over 382 | profileVerifiedCheckBg: windowBgActive; // profile verified check icon background 383 | profileVerifiedCheckFg: windowFgActive; // profile verified check icon tick 384 | profileAdminStartFg: windowBgActive; // group members list creator star icon 385 | profileAdminStarFgOver: profileAdminStartFg; // group members list creator star icon with mouse over 386 | profileOtherAdminStarFg: windowSubTextFg; // group members list admin star icon 387 | profileOtherAdminStarFgOver: profileStatusFgOver; // group members list admin star icon with mouse over 388 | notificationsBoxMonitorFg: windowFg; // custom notifications settings box monitor color 389 | notificationsBoxScreenBg: dialogsBgActive; // #6389a8; // custom notifications settings box monitor screen background 390 | notificationSampleUserpicFg: windowBgActive; // custom notifications settings box small sample userpic placeholder 391 | notificationSampleCloseFg: #928374; // custom notifications settings box small sample close button placeholder 392 | notificationSampleTextFg: #928374; // custom notifications settings box small sample text placeholder 393 | notificationSampleNameFg: #e2d3ba; // custom notifications settings box small sample name placeholder 394 | changePhoneSimcardFrom: notificationSampleTextFg; // change phone number box left simcard icon 395 | changePhoneSimcardTo: notificationSampleNameFg; // change phone number box right simcard and plane icons 396 | mainMenuBg: windowBg; // main menu background 397 | mainMenuCoverBg: dialogsBgActive; // main menu top cover background 398 | mainMenuCoverFg: windowFgActive; // main menu top cover text 399 | mainMenuCloudFg: activeButtonFg; // 400 | mainMenuCloudBg: #e2d3ba; // 401 | mediaPlayerBg: #32302f; // audio file player background 402 | mediaPlayerActiveFg: windowBgActive; // audio file player playback progress already played part 403 | mediaPlayerInactiveFg: #5a524c; // audio file player playback progress upcoming (not played yet) part with mouse over 404 | mediaPlayerDisabledFg: #928374; // audio file player loading progress (when you're playing an audio file and switch to the previous one which is not loaded yet) 405 | mediaviewFileBg: windowBg; // file rectangle background (when you view a png file in Media Viewer and go to a previous, not loaded yet, file) 406 | mediaviewFileNameFg: windowFg; // file name in file rectangle 407 | mediaviewFileSizeFg: windowSubTextFg; // file size text in file rectangle 408 | mediaviewFileRedCornerFg: #ea6962; // red file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .pdf) 409 | mediaviewFileYellowCornerFg: #d8a657; // yellow file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .zip) 410 | mediaviewFileGreenCornerFg: #a9b665; // green file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .exe) 411 | mediaviewFileBlueCornerFg: #7daea3; // blue file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .dmg) 412 | mediaviewFileExtFg: activeButtonFg; // file extension text in file thumbnail placeholder in file rectangle 413 | mediaviewMenuBg: #282828; // context menu in Media Viewer background 414 | mediaviewMenuBgOver: #3c3836; // context menu item background with mouse over 415 | mediaviewMenuBgRipple: #45403d; // context menu item ripple effect 416 | mediaviewMenuFg: #e2d3ba; // context menu item text 417 | mediaviewBg: #282828eb; // Media Viewer background 418 | mediaviewVideoBg: imageBg; // Media Viewer background when viewing a video in full screen 419 | mediaviewControlBg: #1d20213c; // controls background (like next photo / previous photo) 420 | mediaviewControlFg: #e2d3ba; // controls icon (like next photo / previous photo) 421 | mediaviewCaptionBg: #1d202180; // caption text background (when viewing photo with caption) 422 | mediaviewCaptionFg: mediaviewControlFg; // caption text 423 | mediaviewTextLinkFg: #d8a657; // caption text link 424 | mediaviewSaveMsgBg: toastBg; // save to file toast message background in Media Viewer 425 | mediaviewSaveMsgFg: toastFg; // save to file toast message text 426 | mediaviewPlaybackActive: #d4be98; // video playback progress already played part 427 | mediaviewPlaybackInactive: #45403d; // video playback progress upcoming (not played yet) part 428 | mediaviewPlaybackActiveOver: #e2d3ba; // video playback progress already played part with mouse over 429 | mediaviewPlaybackInactiveOver: #45403d; // video playback progress upcoming (not played yet) part with mouse over 430 | mediaviewPlaybackProgressFg: #e2d3ba; // video playback progress text 431 | mediaviewPlaybackIconFg: mediaviewPlaybackActive; // video playback controls icon 432 | mediaviewPlaybackIconFgOver: mediaviewPlaybackActiveOver; // video playback controls icon with mouse over 433 | mediaviewTransparentBg: #e2d3ba; // transparent filling part (when viewing a transparent .png file in Media Viewer) 434 | mediaviewTransparentFg: #928374; // another transparent filling part 435 | notificationBg: windowBg; // custom notification window background 436 | callBg: #282828f2; // phone call popup background 437 | callNameFg: #e2d3ba; // phone call popup name text 438 | callFingerprintBg: #28282866; // phone call popup emoji fingerprint background 439 | callStatusFg: #d8a657; // phone call popup status text 440 | callIconBg: #7c6f64; // phone call mute mic and camera button background 441 | callIconFg: #e2d3ba; // phone call popup answer, hangup and mute mic icon 442 | callIconBgActive: #d4be98; // phone call line busy cancel, muted mic and camera button background 443 | callIconFgActive: #282828; // phone call line busy cancel, muted mic and camera icon 444 | callIconActiveRipple: #e2d3ba; // phone call line busy cancel, muted mic and camera ripple effect 445 | callBgOpaque: windowBg; // phone call popup background 446 | callBgButton: titleButtonBg; // phone call window control buttons bg 447 | callAnswerBg: #a9b665; // phone call popup answer button background 448 | callAnswerRipple: #bbc585; // phone call popup answer button ripple effect 449 | callAnswerBgOuter: #a9b66526; // phone call popup answer button outer ripple effect 450 | callHangupBg: #ea6962; // phone call popup hangup button background 451 | callHangupRipple: #ef938e; // phone call popup hangup button ripple effect 452 | callCancelBg: #d4be98; // phone call popup line busy cancel button background 453 | callCancelFg: #282828; // phone call popup line busy cancel button icon 454 | callCancelRipple: #e2d3ba; // phone call popup line busy cancel button ripple effect 455 | callMuteRipple: #e2d3ba12; // phone call popup mute mic ripple effect 456 | callBarBg: dialogsBgActive; // active phone call bar background 457 | callBarMuteRipple: dialogsRippleBgActive; // active phone call bar mute and hangup button ripple effect 458 | callBarBgMuted: #928374; // phone call bar with muted mic background 459 | callBarUnmuteRipple: #a89984; // phone call bar with muted mic mute and hangup button ripple effect 460 | callBarFg: dialogsNameFgActive; // phone call bar text and icons 461 | importantTooltipBg: toastBg; // 462 | importantTooltipFg: toastFg; // 463 | importantTooltipFgLink: mediaviewTextLinkFg; // 464 | outdatedFg: #282828; // 465 | outdateSoonBg: #e78a4e; // 466 | outdatedBg: #ea6962; // 467 | settingsIconBg1: #ea6962; // red settings icon background 468 | settingsIconBg2: #a9b665; // green settings icon background 469 | settingsIconBg3: #d8a657; // light-orange settings icon background 470 | settingsIconBg4: #9dc2ba; // light-blue settings icon background 471 | settingsIconBg5: #45707a; // dark-blue settings icon background 472 | settingsIconBg6: #d3869b; // purple settings icon background 473 | settingsIconBg8: #e78a4e; // dark-orange settings icon background 474 | settingsIconBgArchive: #928374; // archive main menu icon background 475 | settingsIconFg: #32302f; // settings icon shape 476 | spellUnderline: #ea6962; // misspelled words 477 | sideBarBg: #32302f; 478 | sideBarBgActive: #282828; 479 | sideBarTextFgActive: #d8a657; 480 | sideBarIconFgActive: #e2d3ba; 481 | sideBarBgRipple: #45403d; 482 | sideBarBadgeBg: #d8a657; 483 | sideBarTextFg: #928374; 484 | sideBarIconFg: #928374; 485 | sideBarBadgeBgMuted: #7c6f64; 486 | sideBarBadgeFg: #282828; 487 | --------------------------------------------------------------------------------