// vim: filetype=qml windowBg: {{colors.surface_container.default.hex}} /* #282e33 */; // white: fallback for background windowFg: {{colors.on_surface.default.hex}} /* #f5f5f5 */; // black: fallback for text windowBgOver: {{colors.surface_container_high.default.hex}} /* #313b43 */; // light gray: fallback for background with mouse over windowBgRipple: {{colors.surface_container_highest.default.hex}} /* #3f4850 */; // darker gray: fallback for ripple effect windowFgOver: {{colors.on_surface.default.hex | auto_lightness: 5}} /* #e9ecf0 */; // black: fallback for text with mouse over windowSubTextFg: {{colors.on_surface_variant.default.hex}} /* #82868a */; // gray: fallback for additional text windowSubTextFgOver: {{colors.on_surface_variant.default.hex | auto_lightness: 5}} /* #797b7f */; // darker gray: fallback for additional text with mouse over windowBoldFg: windowFg /* #e9e8e8 */; // dark gray: fallback for bold text windowBoldFgOver: windowBoldFg /* #e9e9e9 */; // dark gray: fallback for bold text with mouse over windowBgActive: {{colors.primary.default.hex}} /* #3fc1b0 */; // bright blue: fallback for blue filled active areas windowFgActive: {{colors.on_primary.default.hex}} /* #ffffff */; // white: fallback for text on active areas (NOTE(eqrfns): this unfortunately can be used in radically different (and unexpected) places) windowActiveTextFg: {{colors.primary.default.hex}} /* #4be1c3 */; // online blue: fallback for active text like online status windowShadowFg: {{colors.shadow.default.hex}}; // black: fallback for shadow windowShadowFgFallback: windowBg; // gray: fallback for shadow without opacity shadowFg: {{colors.shadow.default.hex}}18; // most shadows (including opacity) slideFadeOutBg: {{colors.scrim.default.hex}}3c; // slide animation (chat to profile) fade out filling slideFadeOutShadowFg: windowShadowFg; // slide animation (chat to profile) fade out right section shadow imageBg: {{colors.scrim.default.hex}}; // image background fallback (when photo size is less than minimum allowed) imageBgTransparent: {{colors.on_surface.default.hex}} /* #ffffff */; // image background when displaying an image with opacity where no opacity is needed activeButtonBg: {{colors.primary_container.default.hex}} /* #2da192 */; // default active button background (NOTE(eqrfns): this is also used for folder icons in "My folders" list) activeButtonBgOver: {{colors.primary_container.default.hex | auto_lightness: 5}} /* #32a896 */; // default active button background with mouse over activeButtonBgRipple: {{colors.inverse_primary.default.hex}} /* #42b8a6 */; // default active button ripple effect activeButtonFg: {{colors.on_primary_container.default.hex}} /* #ffffff */; // default active button text activeButtonFgOver: {{colors.on_primary_container.default.hex}} /* #ffffff */; // default active button text with mouse over activeButtonSecondaryFg: {{colors.on_primary_container.default.hex}} /* #8ee4d9 */; // default active button additional text (selected messages counter in forward / delete buttons) activeButtonSecondaryFgOver: activeButtonSecondaryFg; // default active button additional text with mouse over activeLineFg: {{colors.primary.default.hex}} /* #3ee2c9 */; // default active line (like code input field bottom border when you log in and field is focused) activeLineFgError: {{colors.error.default.hex}} /* #f57878 */; // default active line for error state (like code input field bottom border when you log in and you've entered incorrect code) lightButtonBg: {{colors.surface_container.default.hex}} /* #282e33 */; // default light button background (like buttons in boxes) lightButtonBgOver: {{colors.surface_container_high.default.hex}} /* #313b43 */; // default light button background with mouse over lightButtonBgRipple: {{ colors.surface_container_highest.default.hex }} /* #3c474f */; // default light button ripple effect lightButtonFg: {{colors.primary.default.hex}} /* #79e8d9 */; // default light button text lightButtonFgOver: lightButtonFg; // default light button text with mouse over attentionButtonFg: {{colors.error.default.hex}} /* #f57474 */; // default attention button text (like confirm button on log out) attentionButtonFgOver: {{colors.error.default.hex | auto_lightness: 5}} /* #e76060 */; // default attention button text with mouse over attentionButtonBgOver: {{colors.on_error.default.hex}}64 /* #613a3a64 */; // default attention button background with mouse over attentionButtonBgRipple: {{colors.on_error_container.default.hex}} /* #f4c3c2 */; // default attention button ripple effect outlineButtonBg: windowBg; // default left outlined button background (like shared media links in profiles) outlineButtonBgOver: {{colors.surface_container_high.default.hex}} /* #313b43 */; // default left outlined button background with mouse over outlineButtonOutlineFg: {{colors.primary.default.hex}} /* #29baa7 */; // default left outlined button left outline border (NOTE(eqrfns): outlineButton* colors seem unused?) outlineButtonBgRipple: {{colors.surface_container_highest.default.hex}} /* #3c474f */; // default left outlined button ripple effect menuBg: {{colors.surface_container.default.hex}} /* #282e33 */; // default popup menu background menuBgOver: {{colors.on_surface.default.hex}} /* #ffffff */; // default popup menu item background with mouse over menuBgRipple: {{colors.surface_container_high.default.hex}} /* #26292d */; // default popup menu item ripple effect menuIconFg: {{colors.outline.default.hex}} /* #808080 */; // default popup menu item icon (like main menu) menuIconFgOver: {{colors.on_surface_variant.default.hex}} /* #dcdcdc */; // default popup menu item icon with mouse over menuSubmenuArrowFg: #ff00ff /*#757575 */ ; // default popup menu submenu arrow icon (like in message field context menu in case of RTL system language) (NOTE(eqrfns): seems unused?) menuFgDisabled: {{colors.on_surface_variant.default.hex}} /* #737373 */; // default popup menu item disabled text (like unavailable items in message field context menu) (NOTE(eqrfns): this shows up for a split second in context menus sometimes) menuSeparatorFg: {{colors.surface_container_highest.default.hex}} /* #42484d */; // default popup menu separator (like in message field context menu) scrollBarBg: {{colors.on_surface.default.hex}}53 /* #ffffff53 */; // default scroll bar current rectangle, the bar itself (like in chats list) scrollBarBgOver: {{colors.on_surface.default.hex}}7a /* #ffffff7a */; // default scroll bar current rectangle with mouse over it scrollBg: {{colors.on_surface.default.hex}}1a /* #ffffff1a */; // default scroll bar background scrollBgOver: {{colors.on_surface.default.hex}}2c /* #ffffff2c */; // default scroll bar background with mouse over the scroll bar smallCloseIconFg: {{colors.outline.default.hex}} /* #6d6d6d */; // small X icon (like in Show all sessions box to the right for sessions termination) smallCloseIconFgOver: {{colors.on_surface_variant.default.hex}} /* #a3a3a3 */; // small X icon with mouse over radialFg: {{colors.scrim.default.hex | invert}} /* windowFgActive */; // default radial loader line (like in Media Viewer when loading a photo) radialBg: {{colors.scrim.default.hex}}56; // default radial loader background (like in Media Viewer when loading a photo) placeholderFg: {{colors.on_surface_variant.default.hex}} /* #818991 */; // default input field placeholder when field is not focused (like in phone input field when you log in) placeholderFgActive: {{colors.outline.default.hex}} /* #5d6165 */; // default input field placeholder when field is focused inputBorderFg: {{colors.outline.default.hex}} /* #6f6f6f */; // default input field bottom border (like in code input field when you log in and field is not focused) filterInputBorderFg: {{colors.surface_container_highest.default.hex}} /* #3d444b */; // default rounded input field border (like in chats list search field when field is focused) filterInputInactiveBg: {{colors.surface_container_highest.default.hex}} /* #3d444b */; // default rounded input field background (like in chats list search field when field is inactive) checkboxFg: {{colors.outline.default.hex}} /* #6c6c6c */; // default unchecked checkbox rounded rectangle (and also emoji category icons) sliderBgInactive: {{colors.outline.default.hex}} /* #545454 */; // default slider not active bar (like in Settings when you choose interface scale or custom notifications count) sliderBgActive: windowBgActive; // default slider active bar (like in Settings when you choose interface scale or custom notifications count) (NOTE(eqrfns): this is actualy a highlight bar under the emoji/sticker/gif tabs?) tooltipBg: {{colors.surface_container.default.hex}} /* #282e33 */; // tooltip background (like when you put mouse over the message timestamp and wait) tooltipFg: {{colors.on_surface_variant.default.hex}} /* #9a9e9c */; // tooltip text tooltipBorderFg: {{colors.surface_container_high.default.hex}} /* #313b43 */; // tooltip border titleShadow: {{colors.shadow.default.hex}}03; // one pixel line shadow at the bottom of custom window title titleBg: {{colors.surface_container_highest.default.hex}} /* #3a4047 */; // custom window title background when window is inactive titleBgActive: titleBg; // custom window title background when window is active titleButtonBg: titleBg; // custom window title minimize/maximize/restore button background when window is inactive (Windows only) titleButtonFg: {{colors.on_surface_variant.default.hex}} /* #8b9096 */; // custom window title minimize/maximize/restore button icon when window is inactive (Windows only) titleButtonBgOver: #4c535b; // custom window title minimize/maximize/restore button background with mouse over when window is inactive (Windows only) titleButtonFgOver: #e0e0e0; // custom window title minimize/maximize/restore button icon with mouse over when window is inactive (Windows only) titleButtonBgActive: titleButtonBg; // custom window title minimize/maximize/restore button background when window is active (Windows only) titleButtonFgActive: titleButtonFg; // custom window title minimize/maximize/restore button icon when window is active (Windows only) titleButtonBgActiveOver: titleButtonBgOver; // custom window title minimize/maximize/restore button background with mouse over when window is active (Windows only) titleButtonFgActiveOver: titleButtonFgOver; // custom window title minimize/maximize/restore button icon with mouse over when window is active (Windows only) titleButtonCloseBg: titleButtonBg; // custom window title close button background when window is inactive (Windows only) titleButtonCloseFg: titleButtonFg; // custom window title close button icon when window is inactive (Windows only) titleButtonCloseBgOver: {{colors.error_container.default.hex}} /* #e81123 */; // custom window title close button background with mouse over when window is inactive (Windows only) titleButtonCloseFgOver: {{colors.on_error_container.default.hex}} /* windowFgActive */; // custom window title close button icon with mouse over when window is inactive (Windows only) titleButtonCloseBgActive: titleButtonCloseBg; // custom window title close button background when window is active (Windows only) titleButtonCloseFgActive: titleButtonCloseFg; // custom window title close button icon when window is active (Windows only) titleButtonCloseBgActiveOver: titleButtonCloseBgOver; // custom window title close button background with mouse over when window is active (Windows only) titleButtonCloseFgActiveOver: titleButtonCloseFgOver; // custom window title close button icon with mouse over when window is active (Windows only) titleFg: {{colors.outline.default.hex}} /* #666666 */; // custom window title text when window is inactive (macOS only) titleFgActive: {{colors.outline.default.hex}} /* #808080 */; // custom window title text when window is active (macOS only) trayCounterBg: #f23c34; // tray icon counter background trayCounterBgMute: #888888; // tray icon counter background if all unread messages are muted trayCounterFg: #ffffff; // tray icon counter text trayCounterBgMacInvert: #ffffff; // tray icon counter background when tray icon is pressed or when dark theme of macOS is used (macOS only) trayCounterFgMacInvert: #ffffff01; // tray icon counter text when tray icon is pressed or when dark theme of macOS is used (macOS only) layerBg: {{colors.scrim.default.hex}}7f; // box and main menu background layer fade cancelIconFg: {{colors.outline.default.hex}} /* #666666 */; // default for settings close icon and box search cancel icon cancelIconFgOver: {{colors.on_surface_variant.default.hex}} /* #dcdcdc */; // default for settings close icon and box search cancel icon with mouse over boxBg: windowBg; // box background boxTextFg: windowFg; // box text boxTextFgGood: {{colors.primary.default.hex}} /* #56dbce */; // accepted box text (like when choosing username that is not occupied) (NOTE(eqrfns): this is also used for the selected messages checkmark background) boxTextFgError: {{colors.error.default.hex}} /* #d84d4d */; // rejecting box text (like when choosing username that is occupied) boxTitleFg: {{colors.on_surface_variant.default.hex}} /* #ebebeb */; // box title text boxSearchBg: {{colors.surface_container.default.hex}} /* #282e33 */; // box search field background (like in contacts box) boxTitleAdditionalFg: {{colors.outline.default.hex}} /* #808080 */; // box title additional text (like in create group box when you see chosen members count) boxTitleCloseFg: cancelIconFg; // settings close icon and box search cancel icon (like in contacts box) boxTitleCloseFgOver: cancelIconFgOver; // settings close icon and box search cancel icon (like in contacts box) with mouse over membersAboutLimitFg: {{colors.outline.default.hex}} /* #5e6065 */; // text in channel members box about the limit (max 200 last members are shown) (NOTE(eqrfns): haven't seen this yet) contactsBg: {{colors.surface_container.default.hex}} /* #222528 */; // contacts (and some other) box row background contactsBgOver: {{colors.surface_container.default.hex}} /* #282e33 */; // contacts (and some other) box row background with mouse over contactsNameFg: boxTextFg; // contacts (and some other) box row name text contactsStatusFg: {{colors.outline.default.hex}} /* #808080 */; // contacts (and some other) box row additional text (like last seen stamp) contactsStatusFgOver: {{colors.outline.default.hex}} /* #808080 */; // contacts (and some other) box row additional text (like last seen stamp) with mouse over contactsStatusFgOnline: {{colors.primary.default.hex}} /* #55e1d3 */; // contacts (and some other) box row active additional text (like online status) photoCropFadeBg: layerBg; // avatar crop box fade background (when choosing a new photo in Settings or for a group) photoCropPointFg: {{colors.on_surface.default.hex}}7f /* #ffffff7f */; // avatar crop box corner rectangles (when choosing a new photo in Settings or for a group) callArrowFg: {{colors.tertiary.default.hex}} /* #2bc7b7 */; // received phone call arrow (NOTE(eqrfns): this is not the color you see in chats, instead this is used by the "Calls" overview you can find in the hamburger menu) callArrowMissedFg: {{colors.error.default.hex}} /* #dd5b4a */; // missed phone call arrow (in calls list box) introBg: windowBg; // login background introTitleFg: {{colors.on_surface_variant.default.hex}} /* #eeeeee */; // login title text introDescriptionFg: {{colors.on_surface_variant.default.hex}}99 /* #999999 */; // login description text introErrorFg: {{colors.error.default.hex}} /* #999999 */; // login error text (like when providing a wrong log in code) introCoverTopBg: {{colors.primary_container.default.hex}} /* #188173 */; // intro gradient top (from) (NOTE(eqrfns): haven't checked this) introCoverBottomBg: {{colors.primary_container.default.hex}} /* #188173 */; // intro gradient bottom (to) introCoverIconsFg: {{colors.on_primary_container.default.hex}} /* #34a493 */; // intro cloud graphics introCoverPlaneTrace: {{colors.on_primary_container.default.hex}} /* #329d8f */; // intro plane traces introCoverPlaneInner: #ced9e2; // intro plane part (NOTE(eqrfns): haven't seen this yet) introCoverPlaneOuter: #97a9b5; // intro plane part (NOTE(eqrfns): haven't seen this yet) introCoverPlaneTop: #ffffff; // intro plane part (NOTE(eqrfns): haven't seen this yet) dialogsMenuIconFg: menuIconFg; // main menu and lock telegram icon dialogsMenuIconFgOver: menuIconFgOver; // main menu and lock telegram icon with mouse over dialogsBg: windowBg; // chat list background dialogsNameFg: {{colors.on_surface.default.hex}} /* #f5f5f5 */; // chat list name text dialogsChatIconFg: dialogsNameFg; // chat list group or channel icon dialogsDateFg: {{colors.outline.default.hex}} /* #6d727c */; // chat list date text dialogsTextFg: {{colors.outline.default.hex}} /* #8d939e */; // chat list message text dialogsTextFgService: {{colors.on_surface_variant.default.hex}} /* #ebebeb */; // chat list group sender name text (or media message type text) dialogsDraftFg: {{colors.error.default.hex}} /* #ec6657 */; // chat list draft label dialogsVerifiedIconBg: {{colors.secondary.default.hex}} /* #53edde */; // chat list verified icon background dialogsVerifiedIconFg: {{colors.surface_container.default.hex}} /* #282e33 */; // chat list verified icon check (NOTE(eqrfns): not sure where this is used, but it is referenced in the code) dialogsSendingIconFg: {{colors.outline.default.hex}} /* #727272 */; // chat list sending message icon (clock) dialogsSentIconFg: {{colors.primary.default.hex}} /* #20eed9 */; // chat list sent message tick / double tick icon dialogsUnreadBg: {{colors.primary_container.default.hex}} /* #05a091 */; // chat list unread badge background for not muted chat dialogsUnreadBgMuted: {{colors.primary_container.default.hex | saturate: -50, "hsl" | auto_lightness: 5}}99 /* #495159 */; // chat list unread badge background for muted chat (NOTE(eqrfns): this is also used for the "pinned" icon, and also for folder icons in the "add to folder" submenu of a chat "More" menu. I hate this...) dialogsUnreadFg: {{colors.on_primary_container.default.hex}} /* #ffffff */; // chat list unread badge text dialogsOnlineBadgeFg: {{colors.primary.default.hex}} /* #0ae7d1 */; // chat list online status dialogsBgOver: {{colors.surface_container_highest.default.hex}} /* #353c43 */; // chat list background with mouse over dialogsNameFgOver: windowBoldFgOver; // chat list name text with mouse over dialogsChatIconFgOver: dialogsNameFgOver; // chat list group or channel icon with mouse over dialogsDateFgOver: {{colors.outline.default.hex}} /* #6d727c */; // chat list date text with mouse over dialogsTextFgOver: {{colors.on_surface_variant.default.hex}} /* #a3a7ae */; // chat list message text with mouse over dialogsTextFgServiceOver: {{colors.on_surface.default.hex}} /* #f0f0f0 */; // chat list group sender name text with mouse over dialogsDraftFgOver: dialogsDraftFg; // chat list draft label with mouse over dialogsVerifiedIconBgOver: {{colors.secondary.default.hex}} /* #53edde */; // chat list verified icon background with mouse over dialogsVerifiedIconFgOver: dialogsVerifiedIconFg; // chat list verified icon check with mouse over dialogsSendingIconFgOver: dialogsSendingIconFg; // chat list sending message icon (clock) with mouse over dialogsSentIconFgOver: {{colors.primary.default.hex}} /* #41f0de */; // chat list sent message tick / double tick icon with mouse over dialogsUnreadBgOver: {{colors.primary_container.default.hex}} /* #009687 */; // chat list unread badge background for not muted chat with mouse over dialogsUnreadBgMutedOver: {{colors.primary_container.default.hex | saturate: -40, "hsl" | auto_lightness: 5}}99 /* #555e67 */; // chat list unread badge background for muted chat with mouse over dialogsUnreadFgOver: dialogsUnreadFg; // chat list unread badge text with mouse over dialogsBgActive: {{colors.primary_container.default.hex}} /* #009687 */; // chat list background for current (active) chat dialogsNameFgActive: {{colors.on_primary_container.default.hex}} /* windowFgActive */; // chat list name text for current (active) chat dialogsChatIconFgActive: dialogsNameFgActive; // chat list group or channel icon for current (active) chat dialogsDateFgActive: {{colors.on_primary_container.default.hex}} /* windowFgActive */; // chat list date text for current (active) chat dialogsTextFgActive: {{colors.on_primary_container.default.hex}} /* windowFgActive */; // chat list message text for current (active) chat dialogsTextFgServiceActive: dialogsTextFgActive; // chat list group sender name text for current (active) chat dialogsDraftFgActive: {{colors.on_primary_container.default.hex}}99 /* #c6f7f3 */; // chat list draft label for current (active) chat dialogsVerifiedIconBgActive: dialogsTextFgActive; // chat list verified icon background for current (active) chat dialogsVerifiedIconFgActive: dialogsBgActive; // chat list verified icon check for current (active) chat dialogsSendingIconFgActive: {{colors.on_primary_container.default.hex}}99 /* #ffffff99 */; // chat list sending message icon (clock) for current (active) chat dialogsSentIconFgActive: dialogsTextFgActive; // chat list sent message tick / double tick icon for current (active) chat dialogsUnreadBgActive: dialogsTextFgActive; // chat list unread badge background for not muted chat for current (active) chat dialogsUnreadBgMutedActive: {{colors.on_primary_container.default.hex}}99 /* #cbf7e8 */; // chat list unread badge background for muted chat for current (active) chat dialogsUnreadFgActive: {{colors.primary_container.default.hex}} /* #039d8e */; // chat list unread badge text for current (active) chat dialogsOnlineBadgeFgActive: {{colors.on_primary_container.default.hex}} /* #ffffff */; // chat list online status for current (active) chat dialogsRippleBg: {{colors.surface_variant.default.hex}} /* #43474d */; // dialogsRippleBgActive: {{colors.inverse_primary.default.hex}} /* #12a796 */; // dialogsForwardBg: dialogsBgActive; // forwarding panel background (when forwarding messages in the smallest window size) dialogsForwardFg: dialogsNameFgActive; // forwarding panel text (when forwarding messages in the smallest window size) searchedBarBg: {{colors.surface_container_highest.default.hex}} /* #3a4047 */; // search results bar background (in chats list, contacts box..) searchedBarFg: {{colors.on_surface_variant.default.hex}} /* #a8a8a8 */; // search results bar text (in chats list, contacts box..) topBarBg: {{colors.surface_container.default.hex}} /* #282e33 */; // top bar background (in chat view, media overview..) emojiPanBg: windowBg; // emoji panel background emojiPanCategories: {{colors.surface_container_low.default.hex}} /* #20262b */; // emoji panel categories background emojiPanHeaderFg: {{colors.outline.default.hex}}/* #90949a */; // emoji panel section header text emojiPanHeaderBg: {{colors.on_surface.default.hex}}f2 /* #fffffff2 */; // emoji panel section header background stickerPanDeleteBg: {{colors.scrim.default.hex}}cc; // delete X button background for custom sent stickers in stickers panel (legacy) stickerPanDeleteFg: windowFgActive; // delete X button icon for custom sent stickers in stickers panel (legacy) stickerPreviewBg: {{colors.scrim.default.hex}}b0; // sticker and GIF preview background (when you press and hold on a sticker) historyTextInFg: windowFg; // inbox message text historyTextInFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // inbox message selected text or text in a selected message historyTextOutFg: {{colors.on_secondary_container.default.hex}} /* #e4ecf2 */; // outbox message text historyTextOutFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox message selected text or text in a selected message historyLinkInFg: {{colors.primary.default.hex}} /* #37e1ca */; // inbox message link historyLinkInFgSelected: {{colors.on_secondary_container.default.hex | auto_lightness: -5}} /* #a7fff3 */; // inbox message link in a selected text or message historyLinkOutFg: {{colors.on_secondary_container.default.hex | blend: {{colors.tertiary.default.hex}}, 0.5}} /* #37e1ca */; // outbox message link historyLinkOutFgSelected: {{colors.on_secondary_container.default.hex | auto_lightness: -5}} /* #a7fff3 */; // outbox message link in a selected text or message historyFileNameInFg: historyTextInFg; // inbox media filename text historyFileNameInFgSelected: historyTextInFgSelected /* #ffffff */; // inbox media filename text in a selected message historyFileNameOutFg: historyTextOutFg; // outbox media filename text historyFileNameOutFgSelected: historyTextOutFgSelected /* #ffffff */; // outbox media filename text in a selected message historyOutIconFg: {{colors.on_secondary_container.default.hex}} /* #40e6c5 */; // outbox message tick / double tick icon historyOutIconFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox message tick / double tick icon in a selected message historyIconFgInverted: {{colors.secondary.dark.hex}} /* windowFgActive */; // media message tick / double tick icon (like in sent photo) (NOTE(eqrfns): forcing the dark theme looks better here IMO) historySendingOutIconFg: {{colors.on_secondary_container.default.hex}} /* #9dfadd */; // outbox sending message icon (clock) historySendingInIconFg: {{colors.outline.default.hex}} /* #76838b */; // inbox sending message icon (clock) (like in sent messages to yourself or in sent messages to a channel) historySendingInvertedIconFg: {{colors.on_surface.default.hex}}c8 /* #ffffffc8 */; // media sending message icon (clock) (like in sent photo) historyCallArrowInFg: {{colors.tertiary.default.hex}} /* #26c2ab */; // received phone call arrow historyCallArrowInFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // received phone call arrow in a selected message historyCallArrowMissedInFg: callArrowMissedFg; // missed phone call arrow historyCallArrowMissedInFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // missed phone call arrow in a selected message historyCallArrowOutFg: {{colors.on_secondary_container.default.hex}} /* #ffffff */; // outgoing phone call arrow historyCallArrowOutFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outgoing phone call arrow historyUnreadBarBg: {{colors.surface_container_highest.default.hex}} /* #33393f */; // new unread messages bar background historyUnreadBarBorder: shadowFg; // new unread messages bar shadow historyUnreadBarFg: {{colors.primary.default.hex}} /* #3cd3bf */; // new unread messages bar text historyForwardChooseBg: {{colors.scrim.default.hex}}4c; // forwarding messages in a large window size "choose recipient" background historyForwardChooseFg: {{colors.primary.default.hex}} /* windowFgActive */; // forwarding messages in a large window size "choose recipient" text historyPeer1NameFg: {{colors.primary.default.hex | blend: {{"#ec7577" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #ec7577 */; // red group member name historyPeer1NameFgSelected: historyTextInFgSelected /* #ffffff */; // red group member name in a selected message historyPeer1UserpicBg: #ff845e; // red userpic background historyPeer2NameFg: {{colors.primary.default.hex | blend: {{"#86d67f" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #86d67f */; // green group member name historyPeer2NameFgSelected: historyTextInFgSelected /* #ffffff */; // green group member name in a selected message historyPeer2UserpicBg: #9ad164; // green userpic background historyPeer3NameFg: {{colors.primary.default.hex | blend: {{"#e4c054" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #e4c054 */; // yellow group member name historyPeer3NameFgSelected: historyTextInFgSelected /* #ffffff */; // yellow group member name in a selected message historyPeer3UserpicBg: #e5ca77; // yellow userpic background (actually unused) historyPeer4NameFg: {{colors.primary.default.hex | blend: {{"#68c7f3" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #68c7f3 */; // blue group member name historyPeer4NameFgSelected: historyTextInFgSelected /* #ffffff */; // blue group member name in a selected message historyPeer4UserpicBg: #5caffa; // blue userpic background historyPeer5NameFg: {{colors.primary.default.hex | blend: {{"#b383f3" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #b383f3 */; // purple group member name historyPeer5NameFgSelected: historyTextInFgSelected /* #ffffff */; // purple group member name in a selected message historyPeer5UserpicBg: #b694f9; // purple userpic background historyPeer6NameFg: {{colors.primary.default.hex | blend: {{"#e16794" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #e16794 */; // pink group member name historyPeer6NameFgSelected: historyTextInFgSelected /* #ffffff */; // pink group member name in a selected message historyPeer6UserpicBg: #ff8aac; // pink userpic background historyPeer7NameFg: {{colors.primary.default.hex | blend: {{"#57c9e0" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #57c9e0 */; // sea group member name historyPeer7NameFgSelected: historyTextInFgSelected /* #ffffff */; // sea group member name in a selected message historyPeer7UserpicBg: #5bcbe3; // sea userpic background historyPeer8NameFg: {{colors.primary.default.hex | blend: {{"#efb05d" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #efb05d */; // orange group member name historyPeer8NameFgSelected: historyTextInFgSelected /* #ffffff */; // orange group member name in a selected message historyPeer8UserpicBg: #febb5b; // orange userpic background historyPeerUserpicFg: #ffffff /* windowFgActive */; // default userpic initials historyScrollBarBg: {{colors.on_surface_variant.default.hex}}7a /* #8989897a */; // scroll bar current rectangle, the bar itself in the chat view (adjusted) historyScrollBarBgOver: {{colors.outline.default.hex}}bc /* #6b6b6bbc */; // scroll bar current rectangle with mouse over it in the chat view (adjusted) historyScrollBg: {{colors.outline.default.hex | auto_lightness: 5}}4c /* #5f5f5f4c */; // scroll bar background (adjusted) historyScrollBgOver: {{colors.outline.default.hex}}6b /* #6262626b */; // scroll bar background with mouse over the scroll bar (adjusted) historyPeer1UserpicBg2: #d45246; // the second red userpic background historyPeer2UserpicBg2: #46ba43; // the second green userpic background historyPeer3UserpicBg2: #e5ca77; // the second yellow userpic background (actually unused) historyPeer4UserpicBg2: #408acf; // the second blue userpic background historyPeer5UserpicBg2: #6c61df; // the second purple userpic background historyPeer6UserpicBg2: #d95574; // the second pink userpic background historyPeer7UserpicBg2: #359ad4; // the second sea userpic background historyPeer8UserpicBg2: #f68136; // the second orange userpic background historyPeerSavedMessagesBg2: historyPeer4UserpicBg2; // the second saved messages userpic background msgInBg: {{colors.surface_container_high.default.hex}} /* #33393f */; // inbox message background msgInBgSelected: {{colors.primary_container.default.hex}} /* #009687 */; // inbox selected message background (and background of selected text in those messages) msgOutBg: {{colors.secondary_container.default.hex}} /* #2a2f33 */; // outbox message background msgOutBgSelected: {{colors.primary_container.default.hex}} /* #009687 */; // outbox selected message background (and background of selected text in those messages) msgSelectOverlay: {{colors.primary.default.hex}}4c /* #35d4bf4c */; // overlay which is filling the media parts of selected messages (like in selected photo message) msgStickerOverlay: {{colors.primary.default.hex}}7f /* #35d4bf7f */; // overlay which is filling the selected sticker message (NOTE(eqrfns): this color is somehow bugged, it randomy does not get updated when I change the theme) msgInServiceFg: windowActiveTextFg; // inbox message information text (like information about a forwarded message original sender) msgInServiceFgSelected: {{colors.on_surface.default.hex}} /* #ffffff */; // inbox selected message information text (like information about a forwarded message original sender) msgOutServiceFg: {{colors.on_secondary_container.default.hex}} /* #60e5ca */; // outbox message information text (like information about a forwarded message original sender) msgOutServiceFgSelected: {{colors.on_secondary_container.default.hex}} /* #ffffff */; // outbox message information text (like information about a forwarded message original sender) msgInShadow: {{colors.shadow.default.hex}}00; // inbox message shadow (below the bubble) msgInShadowSelected: {{colors.shadow.default.hex}}00; // inbox selected message shadow (below the bubble) msgOutShadow: {{colors.shadow.default.hex}}00; // outbox message shadow (below the bubble) msgOutShadowSelected: {{colors.primary_container.default.hex}}00 /* #37a78d00 */; // outbox selected message shadow (below the bubble) msgInDateFg: {{colors.secondary.default.hex}} /* #828d94 */; // inbox message time text msgInDateFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // inbox selected message time text msgOutDateFg: {{colors.on_secondary_container.default.hex}}99 /* #737f87 */; // outbox message time text msgOutDateFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox selected message time text msgServiceFg: {{colors.secondary.default.hex}}; // service message text (like date dividers or service message about the group title being changed) msgServiceBg: {{colors.surface_variant.default.hex}}c8 /* #363c43c8 */; // service message background (like in a service message about group title being changed) (adjusted) msgServiceBgSelected: {{colors.inverse_primary.default.hex}} /* #009687 */; // service message selected text background (like in a service message about group title being changed) (adjusted) msgInReplyBarColor: {{colors.primary.default.hex}} /* #32ceb7 */; // inbox message reply outline (NOTE(eqrfns): this can be seen at east in the interface scale preview) msgInReplyBarSelColor: {{colors.on_surface.default.hex}} /* #ffffff */; // inbox selected message reply outline (NOTE(eqrfns): coudn't figure out how to see this) msgOutReplyBarColor: {{colors.on_secondary_container.default.hex}} /* #32ceb7 */; // outbox message reply outline msgOutReplyBarSelColor: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox selected message reply outline msgImgReplyBarColor: msgServiceFg; // sticker message reply outline (NOTE(eqrfns): this is the color of the text that shows up when you reply with a sticker. This took me some time to figure out) msgInMonoFg: {{colors.tertiary.default.hex | auto_lightness: -10}} /* #5aab9f */; // inbox message monospace text (like a message sent with `test` text) msgOutMonoFg: {{colors.on_secondary_container.default.hex | auto_lightness: 5 | blend: {{colors.tertiary.default.hex}}, 1.0}} /* #c2f2ec */; // outbox message monospace text (NOTE(eqrfns): not sure if this is OK) msgInMonoFgSelected: {{colors.on_primary_container.default.hex | auto_lightness: -5}} /* #a7fff3 */; // inbox message monospace text in a selected text or message msgOutMonoFgSelected: {{colors.on_primary_container.default.hex | auto_lightness: -5}} /* #c9fff8 */; // outbox message monospace text in a selected text or message msgDateImgFg: {{colors.secondary.dark.hex}} /* msgServiceFg */; // media message time text (like time text in a sent photo) (NOTE(eqrfns): forced dark theme looks better IMO) msgDateImgBg: {{colors.scrim.default.hex}}54; // media message time bubble background (like time bubble in a sent photo) or file with thumbnail download icon circle background msgDateImgBgOver: {{colors.scrim.default.hex}}74; // media message download icon circle background with mouse over (like file with thumbnail download icon) msgDateImgBgSelected: {{colors.scrim.default.hex}}87 /* #1c706587 */; // selected media message time bubble background msgFileThumbLinkInFg: lightButtonFg; // inbox media file message with thumbnail download / open with button text msgFileThumbLinkInFgSelected: lightButtonFgOver; // inbox selected media file message with thumbnail download / open with button text msgFileThumbLinkOutFg: {{colors.on_secondary_container.default.hex}} /* #60e5ca */; // outbox media file message with thumbnail download / open with button text msgFileThumbLinkOutFgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox selected media file message with thumbnail download / open with button text msgFileInBg: {{colors.primary.default.hex}} /* #50d4c2 */; // inbox audio file download circle background (NOTE(eqrfns): this is actually used for ANY file) msgFileInBgOver: {{colors.primary.default.hex | auto_lightness: 10}} /* #48cfbd */; // inbox audio file download circle background with mouse over (NOTE(eqrfns): this is actualy for the play circle in the audio files overiew) msgFileInBgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // inbox selected audio file download circle background (NOTE(eqrfns): this is used both for the overview, and for the chat history) msgFileOutBg: {{colors.on_secondary_container.default.hex}} /* #11bfab */; // outbox audio file download circle background msgFileOutBgOver: {{colors.on_secondary_container.default.hex | auto_lightness: 10}} /* #ffffff */; // outbox audio file download circle background with mouse over (NOTE(eqrfns): seems to be unused in the source code?) msgFileOutBgSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox selected audio file download circle background msgFile1Bg: #72b1df; // blue shared links / files without image square thumbnail msgFile1BgDark: #5c9ece; // blue shared files without image download circle background msgFile1BgOver: #5294c4; // blue shared files without image download circle background with mouse over msgFile1BgSelected: #5099d0; // blue shared files without image download circle background if file is selected msgFile2Bg: #5fbe67; // green shared links / shared files without image square thumbnail msgFile2BgDark: #4da859; // green shared files without image download circle background msgFile2BgOver: #44a050; // green shared files without image download circle background with mouse over msgFile2BgSelected: #50ac9b; // green shared files without image download circle background if file is selected msgFile3Bg: #e47272; // red shared links / shared files without image square thumbnail msgFile3BgDark: #cd5b5e; // red shared files without image download circle background msgFile3BgOver: #c35154; // red shared files without image download circle background with mouse over msgFile3BgSelected: #9f6a82; // red shared files without image download circle background if file is selected msgFile4Bg: #efc274; // yellow shared links / shared files without image square thumbnail msgFile4BgDark: #e6a561; // yellow shared files without image download circle background msgFile4BgOver: #dc9c5a; // yellow shared files without image download circle background with mouse over msgFile4BgSelected: #b19d84; // yellow shared files without image download circle background if file is selected historyFileInIconFg: msgInBg /* #33393f */; // inbox file without thumbnail (like audio file) download arrow icon historyFileInIconFgSelected: msgInBgSelected /* #009687 */; // inbox selected file without thumbnail (like audio file) download arrow icon historyFileInRadialFg: {{colors.surface_container_highest.default.hex}} /* #33393f */; // inbox file without thumbnail (like audio file) radial download animation line historyFileInRadialFgSelected: historyFileInIconFgSelected; // inbox selected file without thumbnail (like audio file) radial download animation line historyFileOutIconFg: msgOutBg /* #33393f */; // outbox file without thumbnail (like audio file) download arrow icon historyFileOutIconFgSelected: msgOutBgSelected /* #009687 */; // outbox selected file without thumbnail (like audio file) download arrow icon historyFileOutRadialFg: historyFileOutIconFg; // outbox file without thumbnail (like audio file) radial download animation line historyFileOutRadialFgSelected: historyFileOutIconFgSelected /* #009687 */; // outbox selected file without thumbnail (like audio file) radial download animation line (NOTE(eqrfns): you need to start downloading the file and then select the message to see this) historyFileThumbIconFg: {{colors.on_surface.default.hex}} /* #efefef */; // file with thumbnail (or photo / video) download arrow icon historyFileThumbIconFgSelected: {{colors.on_surface.default.hex}} /* #ffffff */; // selected file with thumbnail (or photo / video) download arrow icon historyFileThumbRadialFg: historyFileThumbIconFg; // file with thumbnail (or photo / video) radial download animation line historyFileThumbRadialFgSelected: {{colors.on_surface.default.hex}} /* #ffffff */; // selected file with thumbnail (or photo / video) radial download animation line historyVideoMessageProgressFg: historyFileThumbIconFg; // radial playback progress in round video messages msgWaveformInActive: windowBgActive; // inbox voice message active waveform lines (like played part of currently playing voice message) msgWaveformInActiveSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // inbox selected voice message active waveform lines (like played part of currently playing voice message) msgWaveformInInactive: {{colors.outline.default.hex}} /* #5d6b76 */; // inbox voice message inactive waveform lines (like upcoming part of currently playing voice message) msgWaveformInInactiveSelected: {{colors.on_primary_container.default.hex}}80 /* #41d1be */; // inbox selected voice message inactive waveform lines (like upcoming part of currently playing voice message) msgWaveformOutActive: {{colors.on_secondary_container.default.hex}} /* #11bfab */; // outbox voice message active waveform lines (like played part of currently playing voice message) msgWaveformOutActiveSelected: {{colors.on_primary_container.default.hex}} /* #ffffff */; // outbox selected voice message active waveform lines (like played part of currently playing voice message) msgWaveformOutInactive: {{colors.on_secondary_container.default.hex}}80 /* #596874 */; // outbox voice message inactive waveform lines (like upcoming part of currently playing voice message) msgWaveformOutInactiveSelected: {{colors.on_primary_container.default.hex}}80 /* #41d1be */; // outbox selected voice message inactive waveform lines (like upcoming part of currently playing voice message) msgBotKbOverBgAdd: {{colors.on_surface.default.hex}}14 /* #ffffff14 */; // this is painted over a bot inline keyboard button (which has msgServiceBg background) when mouse is over that button msgBotKbIconFg: msgServiceFg; // bot inline keyboard button icon in the top-right corner (like in @vote bot when a poll is ready to be shared) msgBotKbRippleBg: {{colors.on_surface_variant.default.hex}}10 /* #9e9d9d10 */; // bot inline keyboard button ripple effect mediaInFg: msgInDateFg; // inbox media message status text (like in file that is being downloaded) mediaInFgSelected: msgInDateFgSelected; // inbox selected media message status text (like in file that is being downloaded) mediaOutFg: msgOutDateFg; // outbox media message status text (like in file that is being downloaded) mediaOutFgSelected: msgOutDateFgSelected; // outbox selected media message status text (like in file that is being downloaded) youtubePlayIconBg: #e83131c8; // youtube play icon background (when a link to a youtube video with a webpage preview is sent) NOTE(eqrfns): deliberately a static color youtubePlayIconFg: #ffffff /* windowFgActive */; // youtube play icon arrow (when a link to a youtube video with a webpage preview is sent) NOTE(eqrfns): deliberately a static color videoPlayIconBg: {{colors.scrim.default.hex}}7f; // other video play icon background (like when a link to a vimeo video with a webpage preview is sent) videoPlayIconFg: {{colors.on_surface.default.hex}} /* #ffffff */; // other video play icon arrow (like when a link to a vimeo video with a webpage preview is sent) toastBg: {{colors.shadow.default.hex}}b2; // toast notification background (like when you click on your t.me link when editing your username) toastFg: {{colors.shadow.default.hex | invert}} /* windowFgActive */; // toast notification text (like when you click on your t.me link when editing your username) reportSpamBg: {{colors.surface_container_highest.default.hex}} /* #363c42 */; // report spam panel background (like a non contact user writes your for the first time) reportSpamFg: windowFg; // report spam panel text (when you send a report from that panel) historyToDownBg: {{colors.secondary_container.default.hex}} /* #434d57 */; // arrow button background (to scroll to the end of the viewed chat) historyToDownBgOver: {{colors.secondary_container.default.hex | auto_lightness: 10}} /* #515b65 */; // arrow button background with mouse over historyToDownBgRipple: {{colors.secondary_container.default.hex | auto_lightness: 20}} /* #636d77 */; // arrow button ripple effect historyToDownFg: {{colors.on_secondary_container.default.hex}} /* #adb4ba */; // arrow button icon historyToDownFgOver: {{colors.on_secondary_container.default.hex}} /* menuIconFgOver */; // arrow button icon with mouse over historyToDownShadow: {{colors.shadow.default.hex}}40; // arrow button shadow historyComposeAreaBg: {{colors.surface_container.default.hex}} /* #282e33 */; // history compose area background (message write area / reply information / forwarding information) historyComposeAreaFg: historyTextInFg; // history compose area text historyComposeAreaFgService: msgInDateFg; // history compose area text when replying to a media message historyComposeIconFg: menuIconFg; // history compose area icon (like emoji, attach, bot command..) historyComposeIconFgOver: menuIconFgOver; // history compose area icon with mouse over historySendIconFg: windowBgActive; // send message icon historySendIconFgOver: windowBgActive; // send message icon with mouse over historyPinnedBg: historyComposeAreaBg; // pinned message area background historyReplyBg: historyComposeAreaBg; // reply / forward / edit message area background historyReplyIconFg: windowBgActive; // reply / forward / edit message left icon historyReplyCancelFg: cancelIconFg; // reply / forward / edit message cancel button historyReplyCancelFgOver: cancelIconFgOver; // reply / forward / edit message cancel button with mouse over historyComposeButtonBg: historyComposeAreaBg; // unblock / join channel / mute channel button background historyComposeButtonBgOver: {{colors.surface_container_high.default.hex}} /* #31363c */; // unblock / join channel / mute channel button background with mouse over historyComposeButtonBgRipple: {{colors.surface_container_low.default.hex}} /* #272b2f */; // unblock / join channel / mute channel button ripple effect overviewCheckBg: {{colors.scrim.default.hex}}40; // shared files / links checkbox background for not selected rows when some rows are selected overviewCheckFg: {{colors.on_surface.default.hex}} /* #ffffff */; // shared files / links checkbox icon for not selected rows when some rows are selected overviewCheckFgActive: {{colors.on_primary.default.hex}} /* #ffffff */; // shared files / links checkbox icon for selected rows (NOTE(eqrfns): this is used over primary (boxTextFgGood al least)) overviewPhotoSelectOverlay: {{colors.primary.default.hex}}33 /* #40ace333 */; // shared photos / videos / links fill for selected rows profileStatusFgOver: #ff00ff /* #9c9c9c */; // group members list in group profile user last seen text with mouse over (NOTE(eqrfns): seems unused in the sources?) profileVerifiedCheckBg: windowBgActive; // profile verified check icon background profileVerifiedCheckFg: {{colors.on_surface.default.hex}} /* #ffffff */; // profile verified check icon tick profileAdminStartFg: windowBgActive; // group members list admin star icon notificationsBoxMonitorFg: windowFg; // custom notifications settings box monitor color notificationsBoxScreenBg: dialogsBgActive; // #6389a8; // custom notifications settings box monitor screen background notificationSampleUserpicFg: windowBgActive; // custom notifications settings box small sample userpic placeholder notificationSampleCloseFg: {{colors.on_surface.default.hex}} /* #d7d7d7 */; // custom notifications settings box small sample close button placeholder (NOTE(eqrfns): haven't seen this) notificationSampleTextFg: {{colors.on_surface.default.hex}} /* #d7d7d7 */; // custom notifications settings box small sample text placeholder (NOTE(eqrfns): haven't seen this) notificationSampleNameFg: {{colors.on_surface_variant.default.hex}} /* #939393 */; // custom notifications settings box small sample name placeholder (NOTE(eqrfns): haven't seen this) changePhoneSimcardFrom: notificationSampleTextFg; // change phone number box left simcard icon changePhoneSimcardTo: notificationSampleNameFg; // change phone number box right simcard and plane icons mainMenuBg: windowBg; // main menu background mainMenuCoverBg: windowBgActive /* #009687 */; // main menu top cover background (NOTE(eqrfns): these "cover" colors don't seem to show up anywhere) mainMenuCoverFg: windowFgActive; // main menu top cover text mainMenuCloudFg: activeButtonFg; // main menu top cover saved messages / archive button icon mainMenuCloudBg: activeButtonBg /* #0e837d */; // main menu top cover saved messages / archive button background mediaPlayerBg: windowBg; // audio file player background mediaPlayerActiveFg: windowBgActive; // audio file player playback progress already played part mediaPlayerInactiveFg: sliderBgInactive; // audio file player playback progress upcoming (not played yet) part with mouse over mediaPlayerDisabledFg: #9dd1ef; // audio file player loading progress (when you're playing an audio file and switch to the previous one which is not loaded yet) mediaviewFileBg: windowBg; // file rectangle background (when you view a png file in Media Viewer and go to a previous, not loaded yet, file) mediaviewFileNameFg: windowFg; // file name in file rectangle mediaviewFileSizeFg: windowSubTextFg; // file size text in file rectangle mediaviewFileRedCornerFg: #d55959; // red file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .pdf) mediaviewFileYellowCornerFg: #e8a659; // yellow file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .zip) mediaviewFileGreenCornerFg: #49a957; // green file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .exe) mediaviewFileBlueCornerFg: #599dcf; // blue file thumbnail placeholder corner in file rectangle (for a file without thumbnail, like .dmg) mediaviewFileExtFg: activeButtonFg; // file extension text in file thumbnail placeholder in file rectangle mediaviewMenuBg: #ff00ff /* #383838 */; // context menu in Media Viewer background (NOTE(eqrfns): seems defined, but unreferenced in the sources) mediaviewMenuBgOver: {{colors.surface_container_highest.dark.hex}} /* #505050 */; // context menu item background with mouse over (NOTE(eqrfns): this is actually the inactive side of the playback speed control slider for some reason) mediaviewMenuBgRipple: #ff00ff /* #676767 */; // context menu item ripple effect (NOTE(eqrfns): also unused?) mediaviewMenuFg: {{colors.on_surface.dark.hex}} /* windowFgActive */; // context menu item text mediaviewBg: {{colors.surface_container_low.dark.hex}}eb /* #222222eb */; // Media Viewer background mediaviewVideoBg: imageBg; // Media Viewer background when viewing a video in full screen mediaviewControlBg: {{colors.scrim.default.hex}}3c; // controls background (like next photo / previous photo) mediaviewControlFg: {{colors.primary.dark.hex}} /* windowFgActive */; // controls icon (like next photo / previous photo) mediaviewCaptionBg: {{colors.surface_container_lowest.dark.hex}}a9 /* #11111180 */; // caption text background (when viewing photo with caption) mediaviewCaptionFg: mediaviewControlFg; // caption text mediaviewTextLinkFg: {{colors.primary.dark.hex}} /* #66f7e4 */; // caption text link mediaviewSaveMsgBg: toastBg; // save to file toast message background in Media Viewer mediaviewSaveMsgFg: toastFg; // save to file toast message text mediaviewPlaybackActive: {{colors.on_surface_variant.dark.hex}} /* #c7c7c7 */; // video playback progress already played part mediaviewPlaybackInactive: {{colors.on_surface_variant.dark.hex}}55 /* #252525 */; // video playback progress upcoming (not played yet) part mediaviewPlaybackActiveOver: {{colors.on_surface.dark.hex}} /* #ffffff */; // video playback progress already played part with mouse over mediaviewPlaybackInactiveOver: {{colors.on_surface_variant.dark.hex}}aa /* #474747 */; // video playback progress upcoming (not played yet) part with mouse over (NOTE(eqrfns): this actually only shows up when rewinding the video. I assume this is the "buffered" part, but not sure) mediaviewPlaybackProgressFg: {{colors.on_surface.dark.hex}}c7 /* #ffffffc7 */; // video playback progress text mediaviewPlaybackIconFg: mediaviewPlaybackActive; // video playback controls icon mediaviewPlaybackIconFgOver: mediaviewPlaybackActiveOver; // video playback controls icon with mouse over mediaviewTransparentBg: {{colors.on_surface.default.hex}} /* #ffffff */; // transparent filling part (when viewing a transparent .png file in Media Viewer) (NOTE(eqrfns): this is one of the checkerboard colors) mediaviewTransparentFg: {{colors.on_surface_variant.default.hex}} /* #cccccc */; // another transparent filling part (NOTE(eqrfns): this is annother checkerboard color) notificationBg: windowBg; // custom notification window background callBg: {{colors.surface_container.dark.hex}}f2 /* #26282cf2 */; // phone call popup background callNameFg: {{colors.on_surface.dark.hex}} /* #ffffff */; // phone call popup name text callFingerprintBg: {{colors.scrim.dark.hex}}66; // phone call popup emoji fingerprint background callStatusFg: {{colors.on_surface_variant.dark.hex}} /* #aaabac */; // phone call popup status text (NOTE(eqrfns): haven't seen this on Linux) callIconFg: {{colors.on_surface.dark.hex}} /* #ffffff */; // phone call popup answer, hangup and mute mic icon callAnswerBg: {{colors.primary_container.dark.hex}} /* #5ad1bf */; // phone call popup answer button background (NOTE(eqrfns): this is one of those "bugged" colors that sometimes get stuck on theme change) callAnswerRipple: {{colors.inverse_primary.dark.hex}} /* #42c2b1 */; // phone call popup answer button ripple effect callAnswerBgOuter: {{colors.primary.dark.hex}}26 /* #3febc926 */; // phone call popup answer button outer ripple effect callHangupBg: {{colors.error_container.dark.hex}} /* #d75a5a */; // phone call popup hangup button background callHangupRipple: {{colors.on_error_container.dark.hex}}19 /* #c04646 */; // phone call popup hangup button ripple effect callCancelBg: {{colors.on_surface.dark.hex}} /* #ffffff */; // phone call popup line busy cancel button background callCancelFg: {{colors.inverse_on_surface.dark.hex}}; // phone call popup line busy cancel button icon callCancelRipple: #f1f1f1; // phone call popup line busy cancel button ripple effect callMuteRipple: {{colors.on_surface.default.hex}}12 /* #ffffff12 */; // phone call popup mute mic ripple effect callBarBg: dialogsBgActive; // active phone call bar background callBarMuteRipple: dialogsRippleBgActive; // active phone call bar mute and hangup button ripple effect callBarBgMuted: #8f8f8f; // phone call bar with muted mic background callBarUnmuteRipple: #7f7f7f; // phone call bar with muted mic mute and hangup button ripple effect callBarFg: dialogsNameFgActive; // phone call bar text and icons importantTooltipBg: toastBg; // importantTooltipFg: toastFg; // importantTooltipFgLink: {{colors.primary.dark.hex}} /* #65fce8 */; // group call important tooltip text link color (NOTE(eqrfns): haven't seen this yet) filterInputActiveBg: {{colors.surface_container_highest.default.hex}} /* #3d444b */; // default rounded input field active background (like in chats list search field when field is focused) botKbBg: {{colors.surface_container_highest.default.hex}} /* #3d444b */; // bot keyboard button background botKbDownBg: {{colors.surface_variant.default.hex}} /* #494f55 */; // bot keyboard button ripple effect emojiIconFg: {{colors.outline.default.hex}} /* #6c7278 */; // emoji category icon emojiIconFgActive: #ff00ff /* #36cdb9 */; // active emoji category icon (NOTE(eqrfns): seems to be missing in the sources) overviewCheckBorder: {{colors.outline.default.hex}} /* #e4eaef */; // shared media round checkbox border sideBarBg: {{colors.surface_container_lowest.default.hex}} /* #18191d */; // filters side bar background sideBarBgActive: {{colors.surface_container.default.hex}} /* #282e33 */; // filters side bar active background sideBarBgRipple: {{colors.surface_container_low.default.hex}} /* #22272b */; // filters side bar ripple effect sideBarTextFg: {{colors.outline.default.hex}} /* #8d939e */; // filters side bar text sideBarTextFgActive: {{colors.primary.default.hex}} /* #24c9b9 */; // filters side bar active item text sideBarIconFg: {{colors.outline.default.hex}} /* #8d939e */; // filters side bar icon sideBarIconFgActive: {{colors.primary.default.hex}} /* #25dbc9 */; // filters side bar active item icon sideBarBadgeBg: {{colors.primary.default.hex}} /* #25dbc9 */; // filters side bar badge background sideBarBadgeBgMuted: {{colors.outline.default.hex}} /* #8d939e */; // filters side bar unimportant badge background statisticsChartInactive: {{colors.surface_container_high.default.hex}} /* #313a43d8 */; // inactive area in footer of statistic charts (NOTE(eqrfns): haven't seen this) statisticsChartActive: {{colors.outline_variant.default.hex}} /* #596879d8 */; // sides in footer of statistic charts (NOTE(eqrfns): haven't seen this) // The following colors are not automatically exported into a theme as of Telegram Desktop 6.6.4. // You can find them in the Telegram/lib_ui/ui/colors.palette file of the Telegram Desktop sources. groupCallMenuBg: {{colors.surface_container.dark.hex}} /* #292d33 */; // group members list in group profile user last seen text with mouse over (NOTE(eqrfns): this is also used as a context menu background in media view) groupCallMenuBgOver: {{colors.surface_container_high.dark.hex}} /* #343940 */; // group call popup menu with mouse over groupCallMenuBgRipple: {{colors.surface_container_highest.dark.hex}} /* #3a4047 */; // group call popup menu ripple effect groupCallMembersFg: {{colors.on_surface.dark.hex}} /* #ffffff */; // group call member name text (NOTE(eqrfns): this is used for the media view context menu text) sideBarBadgeFg: {{colors.surface_container_lowest.default.hex}} /* #ffffff */; // filters side bar badge text (NOTE(eqrfns): this is used for sidebar counters) callBgOpaque: {{colors.surface_container_low.dark.hex}} /* #1b1f23 */; // phone call popup background callBgButton: {{colors.surface_container_lowest.dark.hex}}7f /* #1b1f237f */; // phone call window control buttons bg (NOTE(eqrfns): this is used for the top bar with signal strength and random emojis) callIconBg: {{colors.on_surface.dark.hex}}1f /* #ffffff1f */; // phone call mute mic and camera button background callIconBgActive: {{colors.on_surface.dark.hex}}e5 /* #ffffffe5 */; // phone call line busy cancel, muted mic and camera button background callIconFgActive: {{colors.inverse_on_surface.dark.hex}} /* #222222 */; // phone call line busy cancel, muted mic and camera icon callIconActiveRipple: {{colors.inverse_on_surface.dark.hex}}19 /* #f1f1f1 */; // phone call line busy cancel, muted mic and camera ripple effect groupCallBg: {{colors.surface_container_low.dark.hex}} /* #1a2026 */; // group call popup background groupCallActiveFg: {{colors.primary.dark.hex}} /* #4db8ff */; // group call active controls text (NOTE(eqrfns): this is used for regular calls too) groupCallMembersBg: {{colors.surface_container.dark.hex}} /* #2c333d */; // group call members list background groupCallMembersBgOver: {{colors.surface_container_high.dark.hex}} /* #323a45 */; // group call members list row with mouse over groupCallMembersBgRipple: {{colors.surface_container_highest.dark.hex}} /* #39424f */; // group call member row ripple effect groupCallMemberActiveIcon: {{colors.tertiary.dark.hex}} /* #8deb90 */; // group call active member icon groupCallMemberActiveStatus: {{colors.tertiary.dark.hex}} /* #8deb90 */; // group call active member status text groupCallMemberInactiveIcon: {{colors.outline.dark.hex}} /* #84888f */; // group call inactive member icon groupCallMemberInactiveStatus: {{colors.secondary.dark.hex}} /* #61c0ff */; // group call inactive member status text groupCallMemberMutedIcon: {{colors.error.dark.hex}} /* #ed7372 */; // group call muted by admin member icon groupCallMemberNotJoinedStatus: {{colors.on_surface_variant.dark.hex}} /* #91979e */; // group call non joined member status text groupCallIconFg: {{colors.on_surface.dark.hex}} /* #ffffff */; // group call mute / settings / leave icon // I'll leave these group call button colors as they are for now. groupCallLive1: #0dcc39; // group call live button color1 groupCallLive2: #0bb6bd; // group call live button color2 groupCallMuted1: #0992ef; // group call muted button color1 groupCallMuted2: #16ccfb; // group call muted button color2 groupCallForceMutedBar1: #c65493; // group call force muted top bar color1 groupCallForceMutedBar2: #7a6af1; // group call force muted top bar color2 groupCallForceMutedBar3: #5f95e8; // group call force muted top bar color3 groupCallForceMuted1: #4f9cff; // group call force muted button color1 groupCallForceMuted2: #9b52e9; // group call force muted button color2 groupCallForceMuted3: #eb5353; // group call force muted button color3 groupCallLeaveBg: #f75c5c7f; // group call leave button background groupCallLeaveBgRipple: #f75c5c9e; // group call leave button ripple effect groupCallVideoTextFg: #ffffffe0; // group call text over video groupCallVideoSubTextFg: #ffffffc0; // group call additional text over video // NOTE(eqrfns): These "chart" colors are also used for syntax highlighting! // Unfortunately, there is probably no way to make them look good with high-contrast themes in both inbox and outbox messages // if using non-surface background (like secondary_container, as in my case) for outbox messages. statisticsChartLineBlue: {{colors.primary.default.hex | blend: {{"#327fe5" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #327fe5 */; // represents blue color on statistical charts statisticsChartLineGreen: {{colors.primary.default.hex | blend: {{"#61c752" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #61c752 */; // represents green color on statistical charts statisticsChartLineRed: {{colors.primary.default.hex | blend: {{"#e05356" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #e05356 */; // represents red color on statistical charts statisticsChartLineGolden: {{colors.primary.default.hex | blend: {{"#eba52d" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #eba52d */; // represents golden color on statistical charts statisticsChartLineLightblue: {{colors.primary.default.hex | blend: {{"#58a8ed" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #58a8ed */; // represents lightblue color on statistical charts statisticsChartLineLightgreen: {{colors.primary.default.hex | blend: {{"#8fcf39" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #8fcf39 */; // represents lightgreen color on statistical charts statisticsChartLineOrange: {{colors.primary.default.hex | blend: {{"#f28c39" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #f28c39 */; // represents orange color on statistical charts statisticsChartLineIndigo: {{colors.primary.default.hex | blend: {{"#7f79f3" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #7f79f3 */; // represents indigo color on statistical charts statisticsChartLinePurple: {{colors.primary.default.hex | blend: {{"#9f79e8" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #9f79e8 */; // represents purple color on statistical charts statisticsChartLineCyan: {{colors.primary.default.hex | blend: {{"#40d0ca" | to_color}}, 1.0 | harmonize: {{colors.primary.default.hex}}}} /* #40d0ca */; // represents cyan color on statistical charts //botKbColor: windowBoldFgOver; // bot keyboard button text //botKbPrimaryBg: #298acfcc; // bot keyboard Primary button background //botKbDangerBg: #e05356cc; // bot keyboard Danger button background //botKbSuccessBg: #61c752cc; // bot keyboard Success button background //botKbInlinePrimaryBg: #378eaeb3; // inline bot keyboard Primary button background //botKbInlineDangerBg: #c9543eb3; // inline bot keyboard Danger button background //botKbInlineSuccessBg: #489d38b3; // inline bot keyboard Success button background //boxDividerBg: windowBgOver; // gray divider in boxes and layers //boxDividerFg: windowShadowFg; // gray divider shadow in boxes and layers //paymentsTipActive: #01ad0f; // tip button text in payments checkout form //dialogsArchiveFg: #525252 | dialogsNameFg; // chat list archive name text //dialogsScamFg: dialogsDraftFg; // chat list scam label //dialogsArchiveFgOver: #525252 | dialogsNameFgOver; // chat list archive name text with mouse over //dialogsScamFgOver: dialogsDraftFgOver; // chat list scam label with mouse over //dialogsScamFgActive: dialogsDraftFgActive; // chat list scam label for current (active) chat //emojiSubIconFgActive: #666666 | windowBoldFg; // active emoji subcategory icon //stickerPanPremium1: #5a99ff; // premium sticker pack icon gradient 1 //stickerPanPremium2: #45b9f3; // premium sticker pack icon gradient 2 //historyPeerSavedMessagesBg: historyPeer4UserpicBg; // saved messages userpic background //historyPeerArchiveUserpicBg: dialogsUnreadBgMuted; // archive folder userpic background //settingsIconBg1: #f06964; // red settings icon background //settingsIconBg2: #6dc534; // green settings icon background //settingsIconBg3: #ed9f20; // light-orange settings icon background //settingsIconBg4: #56b3f5; // light-blue settings icon background //settingsIconBg5: #7595ff; // dark-blue settings icon background //settingsIconBg6: #b580e2; // purple settings icon background //settingsIconBg8: #f2925b; // dark-orange settings icon background //settingsIconBgArchive: #9da2b0; // archive main menu icon background //settingsIconFg: #ffffff; // settings icon shape //mapPointDrop: #fd4444; // geo location marker background //mapPointDot: #ffffff; // geo location marker point //overviewCheckBgActive: windowBgActive; // shared media / files / links checkbox background for selected rows //mediaviewPlaybackIconRipple: #ffffff14; // video playback controls ripple effect //mediaviewPipControlsFg: #ffffffd9; // picture-in-picture controls //mediaviewPipControlsFgOver: #ffffff; // picture-in-picture controls with mouse over //mediaviewPipPlaybackActive: #ffffffda; // picture-in-picture playback progress already played part //mediaviewPipPlaybackInactive: #ffffff26; // picture-in-picture playback progress upcoming (not played yet) part //outdatedFg: #ffffff; // operating system version is outdated bar text //outdateSoonBg: #e08543; // operating system version is soon outdated bar background //outdatedBg: #e05745; // operating system version is already outdated bar background //spellUnderline: #ff000088 | attentionButtonFg; // misspelled words //walletTitleBg: #121213; // wallet window title background when window is inactive //walletTitleBgActive: walletTitleBg; // wallet window title background when window is active //walletTitleButtonBg: walletTitleBg; // wallet window title minimize/maximize/restore button background when window is inactive (Windows only) //walletTitleButtonFg: #5a5a5b; // wallet window title minimize/maximize/restore button icon when window is inactive (Windows only) //walletTitleButtonBgOver: #373738; // wallet window title minimize/maximize/restore button background with mouse over when window is inactive (Windows only) //walletTitleButtonFgOver: #747475; // wallet window title minimize/maximize/restore button icon with mouse over when window is inactive (Windows only) //walletTitleButtonBgActive: walletTitleButtonBg; // wallet window title minimize/maximize/restore button background when window is active (Windows only) //walletTitleButtonFgActive: walletTitleButtonFg; // wallet window title minimize/maximize/restore button icon when window is active (Windows only) //walletTitleButtonBgActiveOver: walletTitleButtonBgOver; // wallet window title minimize/maximize/restore button background with mouse over when window is active (Windows only) //walletTitleButtonFgActiveOver: walletTitleButtonFgOver; // wallet window title minimize/maximize/restore button icon with mouse over when window is active (Windows only) //walletTitleButtonCloseBg: walletTitleButtonBg; // wallet window title close button background when window is inactive (Windows only) //walletTitleButtonCloseFg: walletTitleButtonFg; // wallet window title close button icon when window is inactive (Windows only) //walletTitleButtonCloseBgOver: titleButtonCloseBgOver; // wallet window title close button background with mouse over when window is inactive (Windows only) //walletTitleButtonCloseFgOver: titleButtonCloseFgOver; // wallet window title close button icon with mouse over when window is inactive (Windows only) //walletTitleButtonCloseBgActive: walletTitleButtonCloseBg; // wallet window title close button background when window is active (Windows only) //walletTitleButtonCloseFgActive: walletTitleButtonCloseFg; // wallet window title close button icon when window is active (Windows only) //walletTitleButtonCloseBgActiveOver: walletTitleButtonCloseBgOver; // wallet window title close button background with mouse over when window is active (Windows only) //walletTitleButtonCloseFgActiveOver: walletTitleButtonCloseFgOver; // wallet window title close button icon with mouse over when window is active (Windows only) //walletTopBg: #1e1f21; // wallet top part background //walletBalanceFg: #ffffff; // wallet balance text //walletSubBalanceFg: #f9f9f9; // wallet balance label text //walletTopLabelFg: #999999; // wallet top updated label text //walletTopIconFg: walletTopLabelFg; // wallet top refresh and menu icons //walletTopIconRipple: #ffffff12; // wallet top menu icon ripple effect //songCoverOverlayFg: #00000066; // song cover overlay //photoEditorItemBaseHandleFg: #3ccaef; // photo editor handle circle //premiumButtonBg1: #55a5ff; // upgrade to premium button gradient 1 //premiumButtonBg2: #a767ff; // upgrade to premium button gradient 2 //premiumButtonBg3: #db5c9d; // upgrade to premium button gradient 3 //premiumButtonFg: #ffffff; // upgrade to premium button text //premiumIconBg1: #f38926; // icon in premium settings gradient 1 //premiumIconBg2: #e44456; // icon in premium settings gradient 2 //premiumIconBg3: #4acd43; // icon in premium settings gradient 3 //creditsBg1: #ffb222; // credits icon gradient 1, normal //creditsBg2: #FFD951; // credits icon gradient 2, light //creditsBg3: #f0b400; // credits icon gradient 3, dark //creditsFg: #ba7000; // credits text on light background //creditsStroke: #da8735; // credits icon stroke //currencyFg: #168acd; // currency icon, blue //rankAdminFg: #49a355; // admin badge text and pill, green //rankOwnerFg: #956ac8; // owner badge text and pill, purple //rankUserFg: windowSubTextFg; // regular user badge text, gray