1// This file is part of Desktop App Toolkit, 2// a set of libraries for developing nice desktop applications. 3// 4// For license and copyright information please follow this link: 5// https://github.com/desktop-app/legal/blob/master/LEGAL 6// 7 8// basic 9windowBg: #ffffff; // white: fallback for background 10windowFg: #000000; // black: fallback for text 11windowBgOver: #f1f1f1; // light gray: fallback for background with mouse over 12windowBgRipple: #e5e5e5; // darker gray: fallback for ripple effect 13windowFgOver: windowFg; // black: fallback for text with mouse over 14windowSubTextFg: #999999; // gray: fallback for additional text 15windowSubTextFgOver: #919191; // darker gray: fallback for additional text with mouse over 16windowBoldFg: #222222; // dark gray: fallback for bold text 17windowBoldFgOver: #222222; // dark gray: fallback for bold text with mouse over 18windowBgActive: #40a7e3; // bright blue: fallback for blue filled active areas 19windowFgActive: #ffffff; // white: fallback for text on active areas 20windowActiveTextFg: #168acd; // online blue: fallback for active text like online status 21windowShadowFg: #000000; // black: fallback for shadow 22windowShadowFgFallback: #f1f1f1; // gray: fallback for shadow without opacity 23 24shadowFg: #00000018; // most shadows (including opacity) 25slideFadeOutBg: #0000003c; // slide animation (chat to profile) fade out filling 26slideFadeOutShadowFg: windowShadowFg; // slide animation (chat to profile) fade out right section shadow 27 28imageBg: #000000; // image background fallback (when photo size is less than minimum allowed) 29imageBgTransparent: #ffffff; // image background when displaying an image with opacity where no opacity is needed 30 31// widgets 32activeButtonBg: windowBgActive; // default active button background 33activeButtonBgOver: #39a5db; // default active button background with mouse over 34activeButtonBgRipple: #2095d0; // default active button ripple effect 35activeButtonFg: windowFgActive; // default active button text 36activeButtonFgOver: activeButtonFg; // default active button text with mouse over 37activeButtonSecondaryFg: #cceeff; // default active button additional text (selected messages counter in forward / delete buttons) 38activeButtonSecondaryFgOver: activeButtonSecondaryFg; // default active button additional text with mouse over 39activeLineFg: #37a1de; // default active line (like code input field bottom border when you log in and field is focused) 40activeLineFgError: #e48383; // default active line for error state (like code input field bottom border when you log in and you've entered incorrect code) 41 42lightButtonBg: windowBg; // default light button background (like buttons in boxes) 43lightButtonBgOver: #e3f1fa; // default light button background with mouse over 44lightButtonBgRipple: #c9e4f6; // default light button ripple effect 45lightButtonFg: windowActiveTextFg; // default light button text 46lightButtonFgOver: lightButtonFg; // default light button text with mouse over 47 48attentionButtonFg: #d14e4e; // default attention button text (like confirm button on log out) 49attentionButtonFgOver: #d14e4e; // default attention button text with mouse over 50attentionButtonBgOver: #fcdfde; // default attention button background with mouse over 51attentionButtonBgRipple: #f4c3c2; // default attention button ripple effect 52 53menuBg: windowBg; // default popup menu background 54menuBgOver: windowBgOver; // default popup menu item background with mouse over 55menuBgRipple: windowBgRipple; // default popup menu item ripple effect 56menuIconFg: #a8a8a8; // default popup menu item icon (like main menu) 57menuIconFgOver: #999999; // default popup menu item icon with mouse over 58menuSubmenuArrowFg: #373737; // default popup menu submenu arrow icon (like in message field context menu in case of RTL system language) 59menuFgDisabled: #cccccc; // default popup menu item disabled text (like unavailable items in message field context menu) 60menuSeparatorFg: #f1f1f1; // default popup menu separator (like in message field context menu) 61 62scrollBarBg: #00000053; // default scroll bar current rectangle, the bar itself (like in chats list) 63scrollBarBgOver: #0000007a; // default scroll bar current rectangle with mouse over it 64scrollBg: #0000001a; // default scroll bar background 65scrollBgOver: #0000002c; // default scroll bar background with mouse over the scroll bar 66 67smallCloseIconFg: #c7c7c7; // small X icon (like in Show all sessions box to the right for sessions termination) 68smallCloseIconFgOver: #a3a3a3; // small X icon with mouse over 69 70radialFg: windowFgActive; // default radial loader line (like in Media Viewer when loading a photo) 71radialBg: #00000056; // default radial loader background (like in Media Viewer when loading a photo) 72 73placeholderFg: windowSubTextFg; // default input field placeholder when field is not focused (like in phone input field when you log in) 74placeholderFgActive: #aaaaaa; // default input field placeholder when field is focused 75inputBorderFg: #e0e0e0; // default input field bottom border (like in code input field when you log in and field is not focused) 76filterInputBorderFg: #54c3f3; // default rounded input field border (like in chats list search field when field is focused) 77filterInputActiveBg: windowBg; // default rounded input field active background (like in chats list search field when field is focused) 78filterInputInactiveBg: windowBgOver; // default rounded input field inactive background (like in chats list search field when field is inactive) 79checkboxFg: #b3b3b3; // default unchecked checkbox rounded rectangle 80 81botKbBg: menuBgOver; // bot keyboard button background 82botKbDownBg: menuBgRipple; // bot keyboard button ripple effect 83botKbColor: windowBoldFgOver; // bot keyboard button text 84 85sliderBgInactive: #e1eaef; // default slider not active bar (like in Settings when you choose interface scale or custom notifications count) 86sliderBgActive: windowBgActive; // default slider active bar (like in Settings when you choose interface scale or custom notifications count) 87 88tooltipBg: #eef2f5; // tooltip background (like when you put mouse over the message timestamp and wait) 89tooltipFg: #5d6c80; // tooltip text 90tooltipBorderFg: #c9d1db; // tooltip border 91 92// custom title bar 93titleShadow: #00000003; // one pixel line shadow at the bottom of custom window title 94titleBg: windowBgOver; // custom window title background when window is inactive 95titleBgActive: titleBg; // custom window title background when window is active 96titleButtonBg: titleBg; // custom window title minimize/maximize/restore button background when window is inactive (Windows only) 97titleButtonFg: #ababab; // custom window title minimize/maximize/restore button icon when window is inactive (Windows only) 98titleButtonBgOver: #e5e5e5; // custom window title minimize/maximize/restore button background with mouse over when window is inactive (Windows only) 99titleButtonFgOver: #9a9a9a; // custom window title minimize/maximize/restore button icon with mouse over when window is inactive (Windows only) 100titleButtonBgActive: titleButtonBg; // custom window title minimize/maximize/restore button background when window is active (Windows only) 101titleButtonFgActive: titleButtonFg; // custom window title minimize/maximize/restore button icon when window is active (Windows only) 102titleButtonBgActiveOver: titleButtonBgOver; // custom window title minimize/maximize/restore button background with mouse over when window is active (Windows only) 103titleButtonFgActiveOver: titleButtonFgOver; // custom window title minimize/maximize/restore button icon with mouse over when window is active (Windows only) 104titleButtonCloseBg: titleButtonBg; // custom window title close button background when window is inactive (Windows only) 105titleButtonCloseFg: titleButtonFg; // custom window title close button icon when window is inactive (Windows only) 106titleButtonCloseBgOver: #e81123; // custom window title close button background with mouse over when window is inactive (Windows only) 107titleButtonCloseFgOver: windowFgActive; // custom window title close button icon with mouse over when window is inactive (Windows only) 108titleButtonCloseBgActive: titleButtonCloseBg; // custom window title close button background when window is active (Windows only) 109titleButtonCloseFgActive: titleButtonCloseFg; // custom window title close button icon when window is active (Windows only) 110titleButtonCloseBgActiveOver: titleButtonCloseBgOver; // custom window title close button background with mouse over when window is active (Windows only) 111titleButtonCloseFgActiveOver: titleButtonCloseFgOver; // custom window title close button icon with mouse over when window is active (Windows only) 112titleFg: #acacac; // custom window title text when window is inactive (Windows 11 and macOS) 113titleFgActive: #3e3c3e; // custom window title text when window is active (Windows 11 and macOS) 114 115// tray icon 116trayCounterBg: #f23c34; // tray icon counter background 117trayCounterBgMute: #888888; // tray icon counter background if all unread messages are muted 118trayCounterFg: #ffffff; // tray icon counter text 119trayCounterBgMacInvert: #ffffff; // tray icon counter background when tray icon is pressed or when dark theme of macOS is used (macOS only) 120trayCounterFgMacInvert: #ffffff01; // tray icon counter text when tray icon is pressed or when dark theme of macOS is used (macOS only) 121 122// layers 123layerBg: #0000007f; // box and main menu background layer fade 124 125cancelIconFg: menuIconFg; // default for settings close icon and box search cancel icon 126cancelIconFgOver: menuIconFgOver; // default for settings close icon and box search cancel icon with mouse over 127 128// boxes 129boxBg: windowBg; // box background 130boxTextFg: windowFg; // box text 131boxTextFgGood: #4ab44a; // accepted box text (like when choosing username that is not occupied) 132boxTextFgError: #d84d4d; // rejecting box text (like when choosing username that is occupied) 133boxTitleFg: #404040; // box title text 134boxSearchBg: boxBg; // box search field background (like in contacts box) 135 136boxTitleAdditionalFg: #808080; // box title additional text (like in create group box when you see chosen members count) 137boxTitleCloseFg: cancelIconFg; // settings close icon and box search cancel icon (like in contacts box) 138boxTitleCloseFgOver: cancelIconFgOver; // settings close icon and box search cancel icon (like in contacts box) with mouse over 139 140paymentsTipActive: #01ad0f; // tip button text in payments checkout form 141 142membersAboutLimitFg: windowSubTextFgOver; // text in channel members box about the limit (max 200 last members are shown) 143 144contactsBg: windowBg; // contacts (and some other) box row background 145contactsBgOver: windowBgOver; // contacts (and some other) box row background with mouse over 146contactsNameFg: boxTextFg; // contacts (and some other) box row name text 147contactsStatusFg: windowSubTextFg; // contacts (and some other) box row additional text (like last seen stamp) 148contactsStatusFgOver: windowSubTextFgOver; // contacts (and some other) box row additional text (like last seen stamp) with mouse over 149contactsStatusFgOnline: windowActiveTextFg; // contacts (and some other) box row active additional text (like online status) 150 151photoCropFadeBg: layerBg; // avatar crop box fade background (when choosing a new photo in Settings or for a group) 152photoCropPointFg: #ffffff7f; // avatar crop box corner rectangles (when choosing a new photo in Settings or for a group) 153 154callArrowFg: #2dad2d | boxTextFgGood; // received phone call arrow (in calls list box) 155callArrowMissedFg: #dd5b4a | boxTextFgError; // missed phone call arrow (in calls list box) 156 157// intro 158introBg: windowBg; // login background 159introTitleFg: windowBoldFg; // login title text 160introDescriptionFg: windowSubTextFg; // login description text 161introErrorFg: windowSubTextFg; // login error text (like when providing a wrong log in code) 162 163introCoverTopBg: #0f89d0; // intro gradient top (from) 164introCoverBottomBg: #39b0f0; // intro gradient bottom (to) 165introCoverIconsFg: #5ec6ff; // intro cloud graphics 166introCoverPlaneTrace: #5ec6ff69; // intro plane traces 167introCoverPlaneInner: #c6d8e8; // intro plane part 168introCoverPlaneOuter: #a1bed4; // intro plane part 169introCoverPlaneTop: #ffffff; // intro plane part 170 171// dialogs 172dialogsMenuIconFg: menuIconFg; // main menu and passcode lock icon 173dialogsMenuIconFgOver: menuIconFgOver; // main menu and passcode lock icon with mouse over 174 175dialogsBg: windowBg; // chat list background 176dialogsNameFg: windowBoldFg; // chat list name text 177dialogsChatIconFg: dialogsNameFg; // chat list group or channel icon 178dialogsDateFg: windowSubTextFg; // chat list date text 179dialogsTextFg: windowSubTextFg; // chat list message text 180dialogsTextFgService: windowActiveTextFg; // chat list group sender name text (or media message type text) 181dialogsDraftFg: #dd4b39; // chat list draft label 182dialogsVerifiedIconBg: windowBgActive; // chat list verified icon background 183dialogsVerifiedIconFg: windowFgActive; // chat list verified icon check 184dialogsSendingIconFg: #c1c1c1; // chat list sending message icon (clock) 185dialogsSentIconFg: #5dc452; // chat list sent message tick / double tick icon 186dialogsUnreadBg: windowBgActive; // chat list unread badge background for not muted chat 187dialogsUnreadBgMuted: #bbbbbb; // chat list unread badge background for muted chat 188dialogsUnreadFg: windowFgActive; // chat list unread badge text 189dialogsArchiveFg: #525252 | dialogsNameFg; // chat list archive name text 190dialogsOnlineBadgeFg: #4dc920 | dialogsUnreadBg; // chat list online status 191dialogsScamFg: dialogsDraftFg; // chat list scam label 192 193dialogsBgOver: windowBgOver; // chat list background with mouse over 194dialogsNameFgOver: windowBoldFgOver; // chat list name text with mouse over 195dialogsChatIconFgOver: dialogsNameFgOver; // chat list group or channel icon with mouse over 196dialogsDateFgOver: windowSubTextFgOver; // chat list date text with mouse over 197dialogsTextFgOver: windowSubTextFgOver; // chat list message text with mouse over 198dialogsTextFgServiceOver: dialogsTextFgService; // chat list group sender name text with mouse over 199dialogsDraftFgOver: dialogsDraftFg; // chat list draft label with mouse over 200dialogsVerifiedIconBgOver: dialogsVerifiedIconBg; // chat list verified icon background with mouse over 201dialogsVerifiedIconFgOver: dialogsVerifiedIconFg; // chat list verified icon check with mouse over 202dialogsSendingIconFgOver: dialogsSendingIconFg; // chat list sending message icon (clock) with mouse over 203dialogsSentIconFgOver: #58b84d; // chat list sent message tick / double tick icon with mouse over 204dialogsUnreadBgOver: dialogsUnreadBg; // chat list unread badge background for not muted chat with mouse over 205dialogsUnreadBgMutedOver: dialogsUnreadBgMuted; // chat list unread badge background for muted chat with mouse over 206dialogsUnreadFgOver: dialogsUnreadFg; // chat list unread badge text with mouse over 207dialogsArchiveFgOver: #525252 | dialogsNameFgOver; // chat list archive name text with mouse over 208dialogsScamFgOver: dialogsDraftFgOver; // chat list scam label with mouse over 209 210dialogsBgActive: #419fd9; // chat list background for current (active) chat 211dialogsNameFgActive: windowFgActive; // chat list name text for current (active) chat 212dialogsChatIconFgActive: dialogsNameFgActive; // chat list group or channel icon for current (active) chat 213dialogsDateFgActive: windowFgActive; // chat list date text for current (active) chat 214dialogsTextFgActive: windowFgActive; // chat list message text for current (active) chat 215dialogsTextFgServiceActive: dialogsTextFgActive; // chat list group sender name text for current (active) chat 216dialogsDraftFgActive: #c6e1f7; // chat list draft label for current (active) chat 217dialogsVerifiedIconBgActive: dialogsTextFgActive; // chat list verified icon background for current (active) chat 218dialogsVerifiedIconFgActive: dialogsBgActive; // chat list verified icon check for current (active) chat 219dialogsSendingIconFgActive: #ffffff99; // chat list sending message icon (clock) for current (active) chat 220dialogsSentIconFgActive: dialogsTextFgActive; // chat list sent message tick / double tick icon for current (active) chat 221dialogsUnreadBgActive: dialogsTextFgActive; // chat list unread badge background for not muted chat for current (active) chat 222dialogsUnreadBgMutedActive: dialogsDraftFgActive; // chat list unread badge background for muted chat for current (active) chat 223dialogsUnreadFgActive: dialogsBgActive; // chat list unread badge text for current (active) chat 224dialogsOnlineBadgeFgActive: #ffffff; // chat list online status for current (active) chat 225dialogsScamFgActive: dialogsDraftFgActive; // chat list scam label for current (active) chat 226 227dialogsRippleBg: windowBgRipple; // chat list background ripple effect 228dialogsRippleBgActive: activeButtonBgRipple; // chat list background ripple effect for current (active) chat 229 230dialogsForwardBg: dialogsBgActive; // forwarding panel background (when forwarding messages in the smallest window size) 231dialogsForwardFg: dialogsNameFgActive; // forwarding panel text (when forwarding messages in the smallest window size) 232 233searchedBarBg: windowBgOver; // search results bar background (in chats list, contacts box..) 234searchedBarFg: windowSubTextFgOver; // search results bar text (in chats list, contacts box..) 235 236// history 237topBarBg: windowBg; // top bar background (in chat view, media overview..) 238 239emojiPanBg: windowBg; // emoji panel background 240emojiPanCategories: #f7f7f7 | windowBg; // emoji panel categories background 241emojiPanHeaderFg: windowSubTextFg; // emoji panel section header text 242emojiPanHeaderBg: #fffffff2 | emojiPanBg; // emoji panel section header background 243emojiIconFg: checkboxFg; // emoji category icon 244emojiIconFgActive: windowBgActive; // active emoji category icon 245stickerPanDeleteBg: #000000ff; // delete X button background for custom sent stickers in stickers panel (legacy) 246stickerPanDeleteFg: windowFgActive; // delete X button icon for custom sent stickers in stickers panel (legacy) 247stickerPreviewBg: #ffffffb0; // sticker and GIF preview background (when you press and hold on a sticker) 248 249historyTextInFg: windowFg; // inbox message text 250historyTextInFgSelected: historyTextInFg; // inbox message selected text or text in a selected message 251historyTextOutFg: windowFg; // outbox message text 252historyTextOutFgSelected: historyTextOutFg; // outbox message selected text or text in a selected message 253historyLinkInFg: windowActiveTextFg; // inbox message link 254historyLinkInFgSelected: historyLinkInFg; // inbox message link in a selected text or message 255historyLinkOutFg: windowActiveTextFg; // outbox message link 256historyLinkOutFgSelected: historyLinkOutFg; // outbox message link in a selected text or message 257historyFileNameInFg: historyTextInFg; // inbox media filename text 258historyFileNameInFgSelected: historyFileNameInFg; // inbox media filename text in a selected message 259historyFileNameOutFg: historyTextOutFg; // outbox media filename text 260historyFileNameOutFgSelected: historyFileNameOutFg; // outbox media filename text in a selected message 261historyOutIconFg: #57b84c; // outbox message tick / double tick icon 262historyOutIconFgSelected: #45a3aa; // outbox message tick / double tick icon in a selected message 263historyIconFgInverted: windowFgActive; // media message tick / double tick icon (like in sent photo) 264historySendingOutIconFg: #98d292; // outbox sending message icon (clock) 265historySendingInIconFg: #a0adb5; // inbox sending message icon (clock) (like in sent messages to yourself or in sent messages to a channel) 266historySendingInvertedIconFg: #ffffffc8; // media sending message icon (clock) (like in sent photo) 267historyCallArrowInFg: #32b032; // received phone call arrow 268historyCallArrowInFgSelected: #2592a8; // received phone call arrow in a selected message 269historyCallArrowMissedInFg: callArrowMissedFg; // missed phone call arrow 270historyCallArrowMissedInFgSelected: callArrowMissedFg; // missed phone call arrow in a selected message 271historyCallArrowOutFg: historyCallArrowInFg; // outgoing phone call arrow 272historyCallArrowOutFgSelected: historyCallArrowInFgSelected; // outgoing phone call arrow 273 274historyUnreadBarBg: #fcfbfa; // new unread messages bar background 275historyUnreadBarBorder: shadowFg; // new unread messages bar shadow 276historyUnreadBarFg: #538bb4; // new unread messages bar text 277 278historyForwardChooseBg: #0000004c; // forwarding messages in a large window size "choose recipient" background 279historyForwardChooseFg: windowFgActive; // forwarding messages in a large window size "choose recipient" text 280 281historyPeer1NameFg: #c03d33; // red group member name 282historyPeer1NameFgSelected: historyPeer1NameFg; // red group member name in a selected message 283historyPeer1UserpicBg: #e17076; // red userpic background 284historyPeer2NameFg: #4fad2d; // green group member name 285historyPeer2NameFgSelected: historyPeer2NameFg; // green group member name in a selected message 286historyPeer2UserpicBg: #7bc862; // green userpic background 287historyPeer3NameFg: #d09306; // yellow group member name 288historyPeer3NameFgSelected: historyPeer3NameFg; // yellow group member name in a selected message 289historyPeer3UserpicBg: #e5ca77; // yellow userpic background 290historyPeer4NameFg: windowActiveTextFg; // blue group member name 291historyPeer4NameFgSelected: historyPeer4NameFg; // blue group member name in a selected message 292historyPeer4UserpicBg: #65aadd; // blue userpic background 293historyPeer5NameFg: #8544d6; // purple group member name 294historyPeer5NameFgSelected: historyPeer5NameFg; // purple group member name in a selected message 295historyPeer5UserpicBg: #a695e7; // purple userpic background 296historyPeer6NameFg: #cd4073; // pink group member name 297historyPeer6NameFgSelected: historyPeer6NameFg; // pink group member name in a selected message 298historyPeer6UserpicBg: #ee7aae; // pink userpic background 299historyPeer7NameFg: #2996ad; // sea group member name 300historyPeer7NameFgSelected: historyPeer7NameFg; // sea group member name in a selected message 301historyPeer7UserpicBg: #6ec9cb; // sea userpic background 302historyPeer8NameFg: #ce671b; // orange group member name 303historyPeer8NameFgSelected: historyPeer8NameFg; // orange group member name in a selected message 304historyPeer8UserpicBg: #faa774; // orange userpic background 305historyPeerUserpicFg: windowFgActive; // default userpic initials 306historyPeerSavedMessagesBg: historyPeer4UserpicBg; // saved messages userpic background 307historyPeerArchiveUserpicBg: dialogsUnreadBgMuted; // archive folder userpic background 308 309// Some values are marked as (adjusted), it means they're adjusted by 310// hue and saturation of the average background color if user chooses 311// some other (not bundled to this color theme) background. If the 312// bundled background is used those colors are not adjusted in any way. 313historyScrollBarBg: #517c417a; // scroll bar current rectangle, the bar itself in the chat view (adjusted) 314historyScrollBarBgOver: #517c41bc; // scroll bar current rectangle with mouse over it in the chat view (adjusted) 315historyScrollBg: #517c414c; // scroll bar background (adjusted) 316historyScrollBgOver: #517c416b; // scroll bar background with mouse over the scroll bar (adjusted) 317 318msgInBg: windowBg; // inbox message background 319msgInBgSelected: #c2dcf2; // inbox selected message background (and background of selected text in those messages) 320msgOutBg: #effdde; // outbox message background 321msgOutBgSelected: #b7dbdb; // outbox selected message background (and background of selected text in those messages) 322msgSelectOverlay: #358cd44c; // overlay which is filling the media parts of selected messages (like in selected photo message) 323msgStickerOverlay: #358cd47f; // overlay which is filling the selected sticker message 324msgInServiceFg: windowActiveTextFg; // inbox message information text (like information about a forwarded message original sender) 325msgInServiceFgSelected: windowActiveTextFg; // inbox selected message information text (like information about a forwarded message original sender) 326msgOutServiceFg: #45a32d; // outbox message information text (like information about a forwarded message original sender) 327msgOutServiceFgSelected: #469992; // outbox message information text (like information about a forwarded message original sender) 328msgInShadow: #748ea229; // inbox message shadow (below the bubble) 329msgInShadowSelected: #548dbb29; // inbox selected message shadow (below the bubble) 330msgOutShadow: #3ac3461d; // outbox message shadow (below the bubble) 331msgOutShadowSelected: #37a78d22; // outbox selected message shadow (below the bubble) 332msgInDateFg: #a0acb6; // inbox message time text 333msgInDateFgSelected: #6a9cc5; // inbox selected message time text 334msgOutDateFg: #6db566; // outbox message time text 335msgOutDateFgSelected: #56b2a6; // outbox selected message time text 336msgServiceFg: windowFgActive; // service message text (like date dividers or service message about the group title being changed) 337msgServiceBg: #517c417f; // service message background (like in a service message about group title being changed) (adjusted) 338msgServiceBgSelected: #96b38ba2; // service message selected text background (like in a service message about group title being changed) (adjusted) 339msgInReplyBarColor: activeLineFg; // inbox message reply outline 340msgInReplyBarSelColor: activeLineFg; // inbox selected message reply outline 341msgOutReplyBarColor: #5eb854; // outbox message reply outline 342msgOutReplyBarSelColor: historyOutIconFgSelected; // outbox selected message reply outline 343msgImgReplyBarColor: msgServiceFg; // sticker message reply outline 344msgInMonoFg: #4e7391; // inbox message monospace text (like a message sent with `test` text) 345msgOutMonoFg: #459866; // outbox message monospace text 346msgInMonoFgSelected: msgInMonoFg; // inbox message monospace text in a selected text or message 347msgOutMonoFgSelected: msgOutMonoFg; // outbox message monospace text in a selected text or message 348msgDateImgFg: msgServiceFg; // media message time text (like time text in a sent photo) 349msgDateImgBg: #00000054; // media message time bubble background (like time bubble in a sent photo) or file with thumbnail download icon circle background 350msgDateImgBgOver: #00000074; // media message download icon circle background with mouse over (like file with thumbnail download icon) 351msgDateImgBgSelected: #1c4a7187; // selected media message time bubble background 352 353msgFileThumbLinkInFg: lightButtonFg; // inbox media file message with thumbnail download / open with button text 354msgFileThumbLinkInFgSelected: lightButtonFgOver; // inbox selected media file message with thumbnail download / open with button text 355msgFileThumbLinkOutFg: #4ba831; // outbox media file message with thumbnail download / open with button text 356msgFileThumbLinkOutFgSelected: #31a298; // outbox selected media file message with thumbnail download / open with button text 357msgFileInBg: windowBgActive; // inbox audio file download circle background 358msgFileInBgOver: #4eade3; // inbox audio file download circle background with mouse over 359msgFileInBgSelected: #51a3d3; // inbox selected audio file download circle background 360msgFileOutBg: #5fbe67; // outbox audio file download circle background 361msgFileOutBgOver: #5ab15f; // outbox audio file download circle background with mouse over 362msgFileOutBgSelected: #50ac9b; // outbox selected audio file download circle background 363 364msgFile1Bg: #72b1df; // blue shared links / files without image square thumbnail 365msgFile1BgDark: #5c9ece; // blue shared files without image download circle background 366msgFile1BgOver: #5294c4; // blue shared files without image download circle background with mouse over 367msgFile1BgSelected: #5099d0; // blue shared files without image download circle background if file is selected 368msgFile2Bg: #5fbe67; // green shared links / shared files without image square thumbnail 369msgFile2BgDark: #4da859; // green shared files without image download circle background 370msgFile2BgOver: #44a050; // green shared files without image download circle background with mouse over 371msgFile2BgSelected: #50ac9b; // green shared files without image download circle background if file is selected 372msgFile3Bg: #e47272; // red shared links / shared files without image square thumbnail 373msgFile3BgDark: #cd5b5e; // red shared files without image download circle background 374msgFile3BgOver: #c35154; // red shared files without image download circle background with mouse over 375msgFile3BgSelected: #9f6a82; // red shared files without image download circle background if file is selected 376msgFile4Bg: #efc274; // yellow shared links / shared files without image square thumbnail 377msgFile4BgDark: #e6a561; // yellow shared files without image download circle background 378msgFile4BgOver: #dc9c5a; // yellow shared files without image download circle background with mouse over 379msgFile4BgSelected: #b19d84; // yellow shared files without image download circle background if file is selected 380 381historyFileInIconFg: msgInBg; // inbox file without thumbnail (like audio file) download arrow icon 382historyFileInIconFgSelected: msgInBgSelected; // inbox selected file without thumbnail (like audio file) download arrow icon 383historyFileInRadialFg: historyFileInIconFg; // inbox file without thumbnail (like audio file) radial download animation line 384historyFileInRadialFgSelected: historyFileInIconFgSelected; // inbox selected file without thumbnail (like audio file) radial download animation line 385historyFileOutIconFg: msgOutBg; // outbox file without thumbnail (like audio file) download arrow icon 386historyFileOutIconFgSelected: msgOutBgSelected; // outbox selected file without thumbnail (like audio file) download arrow icon 387historyFileOutRadialFg: historyFileOutIconFg; // outbox file without thumbnail (like audio file) radial download animation line 388historyFileOutRadialFgSelected: historyFileOutIconFgSelected; // outbox selected file without thumbnail (like audio file) radial download animation line 389historyFileThumbIconFg: msgInBg; // file with thumbnail (or photo / video) download arrow icon 390historyFileThumbIconFgSelected: msgInBgSelected; // selected file with thumbnail (or photo / video) download arrow icon 391historyFileThumbRadialFg: historyFileThumbIconFg; // file with thumbnail (or photo / video) radial download animation line 392historyFileThumbRadialFgSelected: historyFileThumbIconFgSelected; // selected file with thumbnail (or photo / video) radial download animation line 393 394historyVideoMessageProgressFg: historyFileThumbIconFg; // radial playback progress in round video messages 395 396msgWaveformInActive: windowBgActive; // inbox voice message active waveform lines (like played part of currently playing voice message) 397msgWaveformInActiveSelected: #51a3d3; // inbox selected voice message active waveform lines (like played part of currently playing voice message) 398msgWaveformInInactive: #d4dee6; // inbox voice message inactive waveform lines (like upcoming part of currently playing voice message) 399msgWaveformInInactiveSelected: #9cc1e1; // inbox selected voice message inactive waveform lines (like upcoming part of currently playing voice message) 400msgWaveformOutActive: #5ebd66; // outbox voice message active waveform lines (like played part of currently playing voice message) 401msgWaveformOutActiveSelected: #6badad; // outbox selected voice message active waveform lines (like played part of currently playing voice message) 402msgWaveformOutInactive: #b3e2b4; // outbox voice message inactive waveform lines (like upcoming part of currently playing voice message) 403msgWaveformOutInactiveSelected: #91c3c3; // outbox selected voice message inactive waveform lines (like upcoming part of currently playing voice message) 404 405msgBotKbOverBgAdd: #ffffff20; // this is painted over a bot inline keyboard button (which has msgServiceBg background) when mouse is over that button 406msgBotKbIconFg: msgServiceFg; // bot inline keyboard button icon in the top-right corner (like in @vote bot when a poll is ready to be shared) 407msgBotKbRippleBg: #00000020; // bot inline keyboard button ripple effect 408 409mediaInFg: msgInDateFg; // inbox media message status text (like in file that is being downloaded) 410mediaInFgSelected: msgInDateFgSelected; // inbox selected media message status text (like in file that is being downloaded) 411mediaOutFg: msgOutDateFg; // outbox media message status text (like in file that is being downloaded) 412mediaOutFgSelected: msgOutDateFgSelected; // outbox selected media message status text (like in file that is being downloaded) 413 414youtubePlayIconBg: #e83131c8; // youtube play icon background (when a link to a youtube video with a webpage preview is sent) 415youtubePlayIconFg: windowFgActive; // youtube play icon arrow (when a link to a youtube video with a webpage preview is sent) 416videoPlayIconBg: #0000007f; // other video play icon background (like when a link to a vimeo video with a webpage preview is sent) 417videoPlayIconFg: #ffffff; // other video play icon arrow (like when a link to a vimeo video with a webpage preview is sent) 418toastBg: #000000b2; // toast notification background (like when you click on your t.me link when editing your username) 419toastFg: windowFgActive; // toast notification text (like when you click on your t.me link when editing your username) 420 421reportSpamBg: emojiPanHeaderBg; // report spam panel background (like a non contact user writes your for the first time) 422reportSpamFg: windowFg; // report spam panel text (when you send a report from that panel) 423 424historyToDownBg: windowBg; // arrow button background (to scroll to the end of the viewed chat) 425historyToDownBgOver: windowBgOver; // arrow button background with mouse over 426historyToDownBgRipple: windowBgRipple; // arrow button ripple effect 427historyToDownFg: menuIconFg; // arrow button icon 428historyToDownFgOver: menuIconFgOver; // arrow button icon with mouse over 429historyToDownShadow: #00000040; // arrow button shadow 430 431historyComposeAreaBg: msgInBg; // history compose area background (message write area / reply information / forwarding information) 432historyComposeAreaFg: historyTextInFg; // history compose area text 433historyComposeAreaFgService: msgInDateFg; // history compose area text when replying to a media message 434historyComposeIconFg: menuIconFg; // history compose area icon (like emoji, attach, bot command..) 435historyComposeIconFgOver: menuIconFgOver; // history compose area icon with mouse over 436historySendIconFg: windowBgActive; // send message icon 437historySendIconFgOver: windowBgActive; // send message icon with mouse over 438historyPinnedBg: historyComposeAreaBg; // pinned message area background 439historyReplyBg: historyComposeAreaBg; // reply / forward / edit message area background 440historyReplyIconFg: windowBgActive; // reply / forward / edit message left icon 441historyReplyCancelFg: cancelIconFg; // reply / forward / edit message cancel button 442historyReplyCancelFgOver: cancelIconFgOver; // reply / forward / edit message cancel button with mouse over 443 444historyComposeButtonBg: historyComposeAreaBg; // unblock / join channel / mute channel button background 445historyComposeButtonBgOver: windowBgOver; // unblock / join channel / mute channel button background with mouse over 446historyComposeButtonBgRipple: windowBgRipple; // unblock / join channel / mute channel button ripple effect 447 448mapPointDrop: #fd4444; // geo location marker background 449mapPointDot: #ffffff; // geo location marker point 450 451// overview 452overviewCheckBg: #00000040; // shared media / files / links checkbox background for not selected rows when some rows are selected 453overviewCheckBgActive: windowBgActive; // shared media / files / links checkbox background for selected rows 454overviewCheckBorder: windowBg; // shared media round checkbox border 455overviewCheckFg: windowBg; // shared files / links checkbox icon for not selected rows when some rows are selected 456overviewCheckFgActive: windowBg; // shared files / links checkbox icon for selected rows 457overviewPhotoSelectOverlay: #40ace333; // shared photos / videos / links fill for selected rows 458 459// profile 460profileStatusFgOver: #7c99b2; // group members list in group profile user last seen text with mouse over 461profileVerifiedCheckBg: windowBgActive; // profile verified check icon background 462profileVerifiedCheckFg: windowFgActive; // profile verified check icon tick 463profileAdminStartFg: windowBgActive; // group members list creator star icon 464profileAdminStarFgOver: profileAdminStartFg; // group members list creator star icon with mouse over 465profileOtherAdminStarFg: windowSubTextFg; // group members list admin star icon 466profileOtherAdminStarFgOver: profileStatusFgOver; // group members list admin star icon with mouse over 467 468// settings 469notificationsBoxMonitorFg: windowFg; // custom notifications settings box monitor color 470notificationsBoxScreenBg: dialogsBgActive; // #6389a8; // custom notifications settings box monitor screen background 471 472notificationSampleUserpicFg: windowBgActive; // custom notifications settings box small sample userpic placeholder 473notificationSampleCloseFg: #d7d7d7 | windowSubTextFg; // custom notifications settings box small sample close button placeholder 474notificationSampleTextFg: #d7d7d7 | windowSubTextFg; // custom notifications settings box small sample text placeholder 475notificationSampleNameFg: #939393 | windowSubTextFg; // custom notifications settings box small sample name placeholder 476 477changePhoneSimcardFrom: notificationSampleTextFg; // change phone number box left simcard icon 478changePhoneSimcardTo: notificationSampleNameFg; // change phone number box right simcard and plane icons 479 480mainMenuBg: windowBg; // main menu background 481mainMenuCoverBg: dialogsBgActive; // main menu top cover background 482mainMenuCoverFg: windowFgActive; // main menu top cover text 483mainMenuCloudFg: activeButtonFg; // main menu top cover saved messages / archive button icon 484mainMenuCloudBg: #2785bf | activeButtonBgRipple; // main menu top cover saved messages / archive button background 485 486mediaPlayerBg: windowBg; // audio file player background 487mediaPlayerActiveFg: windowBgActive; // audio file player playback progress already played part 488mediaPlayerInactiveFg: sliderBgInactive; // audio file player playback progress upcoming (not played yet) part with mouse over 489mediaPlayerDisabledFg: #9dd1ef; // audio file player loading progress (when you're playing an audio file and switch to the previous one which is not loaded yet) 490 491// mediaview 492mediaviewFileBg: windowBg; // file rectangle background (when you view a png file in Media Viewer and go to a previous, not loaded yet, file) 493mediaviewFileNameFg: windowFg; // file name in file rectangle 494mediaviewFileSizeFg: windowSubTextFg; // file size text in file rectangle 495mediaviewFileRedCornerFg: #d55959; // red file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .pdf) 496mediaviewFileYellowCornerFg: #e8a659; // yellow file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .zip) 497mediaviewFileGreenCornerFg: #49a957; // green file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .exe) 498mediaviewFileBlueCornerFg: #599dcf; // blue file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .dmg) 499mediaviewFileExtFg: activeButtonFg; // file extension text in file thumbnail placeholder in file rectangle 500 501mediaviewMenuBg: #383838; // context menu in Media Viewer background 502mediaviewMenuBgOver: #505050; // context menu item background with mouse over 503mediaviewMenuBgRipple: #676767; // context menu item ripple effect 504mediaviewMenuFg: windowFgActive; // context menu item text 505 506mediaviewBg: #222222eb; // Media Viewer background 507mediaviewVideoBg: imageBg; // Media Viewer background when viewing a video in full screen 508mediaviewControlBg: #0000003c; // controls background (like next photo / previous photo) 509mediaviewControlFg: windowFgActive; // controls icon (like next photo / previous photo) 510mediaviewCaptionBg: #11111180; // caption text background (when viewing photo with caption) 511mediaviewCaptionFg: mediaviewControlFg; // caption text 512mediaviewTextLinkFg: #91d9ff; // caption text link 513mediaviewSaveMsgBg: toastBg; // save to file toast message background in Media Viewer 514mediaviewSaveMsgFg: toastFg; // save to file toast message text 515 516mediaviewPlaybackActive: #c7c7c7; // video playback progress already played part 517mediaviewPlaybackInactive: #252525; // video playback progress upcoming (not played yet) part 518mediaviewPlaybackActiveOver: #ffffff; // video playback progress already played part with mouse over 519mediaviewPlaybackInactiveOver: #474747; // video playback progress upcoming (not played yet) part with mouse over 520mediaviewPlaybackProgressFg: #ffffffc7; // video playback progress text 521mediaviewPlaybackIconFg: mediaviewPlaybackActive; // video playback controls icon 522mediaviewPlaybackIconFgOver: mediaviewPlaybackActiveOver; // video playback controls icon with mouse over 523mediaviewPlaybackIconRipple: #ffffff14; // video playback controls ripple effect 524 525mediaviewPipControlsFg: #ffffffd9; // picture-in-picture controls 526mediaviewPipControlsFgOver: #ffffff; // picture-in-picture controls with mouse over 527mediaviewPipFade: #00000095; // picture-in-picture gradient fade controls background 528mediaviewPipPlaybackActive: #ffffffda; // picture-in-picture playback progress already played part 529mediaviewPipPlaybackInactive: #ffffff26; // picture-in-picture playback progress upcoming (not played yet) part 530 531mediaviewTransparentBg: #ffffff; // transparent filling part (when viewing a transparent .png file in Media Viewer) 532mediaviewTransparentFg: #cccccc; // another transparent filling part 533 534// notification 535notificationBg: windowBg; // custom notification window background 536 537// calls 538callBg: #26282cf2; // old phone call popup background 539callBgOpaque: #1b1f23; // phone call popup background 540callBgButton: #1b1f237f; // phone call window control buttons bg 541callNameFg: #ffffff; // phone call popup name text 542callStatusFg: #aaabac; // phone call popup status text 543callIconBg: #ffffff1f; // phone call mute mic and camera button background 544callIconFg: #ffffff; // phone call popup answer, hangup, mute mic and camera icon 545callIconBgActive: #ffffffe5; // phone call line busy cancel, muted mic and camera button background 546callIconFgActive: #222222; // phone call line busy cancel, muted mic and camera icon 547callIconActiveRipple: #f1f1f1; // phone call line busy cancel, muted mic and camera ripple effect 548callAnswerBg: #66c95b; // phone call popup answer button background 549callAnswerRipple: #52b149; // phone call popup answer button ripple effect 550callAnswerBgOuter: #50eb4126; // phone call popup answer button outer ripple effect 551callHangupBg: #d75a5a; // phone call popup hangup button background 552callHangupRipple: #c04646; // phone call popup hangup button ripple effect 553callMuteRipple: #ffffff12; // phone call popup mute mic and camera ripple effect 554 555groupCallBg: #1a2026; // group call popup background 556groupCallActiveFg: #4db8ff; // group call active controls text 557groupCallMembersBg: #2c333d; // group call members list background 558groupCallMembersBgOver: #323a45; // group call members list row with mouse over 559groupCallMembersBgRipple: #39424f; // group call member row ripple effect 560groupCallMembersFg: #ffffff; // group call member name text 561groupCallMemberActiveIcon: #8deb90; // group call active member icon 562groupCallMemberActiveStatus: #8deb90; // group call active member status text 563groupCallMemberInactiveIcon: #84888f; // group call inactive member icon 564groupCallMemberInactiveStatus: #61c0ff; // group call inactive member status text 565groupCallMemberMutedIcon: #ed7372; // group call muted by admin member icon 566groupCallMemberNotJoinedStatus: #91979e; // group call non joined member status text 567groupCallIconFg: #ffffff; // group call mute / settings / leave icon 568groupCallLive1: #0dcc39; // group call live button color1 569groupCallLive2: #0bb6bd; // group call live button color2 570groupCallMuted1: #0992ef; // group call muted button color1 571groupCallMuted2: #16ccfb; // group call muted button color2 572groupCallForceMutedBar1: #c65493; // group call force muted top bar color1 573groupCallForceMutedBar2: #7a6af1; // group call force muted top bar color2 574groupCallForceMutedBar3: #5f95e8; // group call force muted top bar color3 575groupCallForceMuted1: #4f9cff; // group call force muted button color1 576groupCallForceMuted2: #9b52e9; // group call force muted button color2 577groupCallForceMuted3: #eb5353; // group call force muted button color3 578groupCallMenuBg: #292d33; // group call popup menu background 579groupCallMenuBgOver: #343940; // group call popup menu with mouse over 580groupCallMenuBgRipple: #3a4047; // group call popup menu ripple effect 581groupCallLeaveBg: #f75c5c7f; // group call leave button background 582groupCallLeaveBgRipple: #f75c5c9e; // group call leave button ripple effect 583groupCallVideoTextFg: #ffffffe0; // group call text over video 584groupCallVideoSubTextFg: #ffffffc0; // group call additional text over video 585 586callBarBg: dialogsBgActive; // active phone call bar background 587callBarMuteRipple: dialogsRippleBgActive; // active phone call bar mute and hangup button ripple effect 588callBarBgMuted: #8f8f8f | dialogsUnreadBgMuted; // phone call bar with muted mic background 589callBarUnmuteRipple: #7f7f7f | shadowFg; // phone call bar with muted mic mute and hangup button ripple effect 590callBarFg: dialogsNameFgActive; // phone call bar text and icons 591 592importantTooltipBg: toastBg; // group call important tooltip background color 593importantTooltipFg: toastFg; // group call important tooltip text color 594importantTooltipFgLink: mediaviewTextLinkFg; // group call important tooltip text link color 595 596outdatedFg: #ffffff; // operating system version is outdated bar text 597outdateSoonBg: #e08543; // operating system version is soon outdated bar background 598outdatedBg: #e05745; // operating system version is already outdated bar background 599 600// spellcheck 601spellUnderline: #ff000088 | attentionButtonFg; // misspelled words 602 603walletTitleBg: #121213; // wallet window title background when window is inactive 604walletTitleBgActive: walletTitleBg; // wallet window title background when window is active 605walletTitleButtonBg: walletTitleBg; // wallet window title minimize/maximize/restore button background when window is inactive (Windows only) 606walletTitleButtonFg: #5a5a5b; // wallet window title minimize/maximize/restore button icon when window is inactive (Windows only) 607walletTitleButtonBgOver: #373738; // wallet window title minimize/maximize/restore button background with mouse over when window is inactive (Windows only) 608walletTitleButtonFgOver: #747475; // wallet window title minimize/maximize/restore button icon with mouse over when window is inactive (Windows only) 609walletTitleButtonBgActive: walletTitleButtonBg; // wallet window title minimize/maximize/restore button background when window is active (Windows only) 610walletTitleButtonFgActive: walletTitleButtonFg; // wallet window title minimize/maximize/restore button icon when window is active (Windows only) 611walletTitleButtonBgActiveOver: walletTitleButtonBgOver; // wallet window title minimize/maximize/restore button background with mouse over when window is active (Windows only) 612walletTitleButtonFgActiveOver: walletTitleButtonFgOver; // wallet window title minimize/maximize/restore button icon with mouse over when window is active (Windows only) 613walletTitleButtonCloseBg: walletTitleButtonBg; // wallet window title close button background when window is inactive (Windows only) 614walletTitleButtonCloseFg: walletTitleButtonFg; // wallet window title close button icon when window is inactive (Windows only) 615walletTitleButtonCloseBgOver: titleButtonCloseBgOver; // wallet window title close button background with mouse over when window is inactive (Windows only) 616walletTitleButtonCloseFgOver: titleButtonCloseFgOver; // wallet window title close button icon with mouse over when window is inactive (Windows only) 617walletTitleButtonCloseBgActive: walletTitleButtonCloseBg; // wallet window title close button background when window is active (Windows only) 618walletTitleButtonCloseFgActive: walletTitleButtonCloseFg; // wallet window title close button icon when window is active (Windows only) 619walletTitleButtonCloseBgActiveOver: walletTitleButtonCloseBgOver; // wallet window title close button background with mouse over when window is active (Windows only) 620walletTitleButtonCloseFgActiveOver: walletTitleButtonCloseFgOver; // wallet window title close button icon with mouse over when window is active (Windows only) 621walletTopBg: #1e1f21; // wallet top part background 622walletBalanceFg: #ffffff; // wallet balance text 623walletSubBalanceFg: #f9f9f9; // wallet balance label text 624walletTopLabelFg: #999999; // wallet top updated label text 625walletTopIconFg: walletTopLabelFg; // wallet top refresh and menu icons 626walletTopIconRipple: #ffffff12; // wallet top menu icon ripple effect 627 628sideBarBg: #293a4c; // filters side bar background 629sideBarBgActive: #17212b; // filters side bar active background 630sideBarBgRipple: #1e2b38; // filters side bar ripple effect 631sideBarTextFg: #8897a6; // filters side bar text 632sideBarTextFgActive: #64b9fa; // filters side bar active item text 633sideBarIconFg: #8393a3; // filters side bar icon 634sideBarIconFgActive: #5eb5f7; // filters side bar active item icon 635sideBarBadgeBg: #5eb5f7; // filters side bar badge background 636sideBarBadgeBgMuted: #8393a3; // filters side bar unimportant badge background 637sideBarBadgeFg: #ffffff; // filters side bar badge text 638 639songCoverOverlayFg: #00000066; // song cover overlay 640 641photoEditorBg: boxTitleAdditionalFg; // photo editor background 642photoEditorItemBaseHandleFg: #3ccaef; // photo editor handle circle 643