////////////////////////////////////////////////////////////////////////////////////////////////// // // // UbuntuLIGHT theme v1.34 for Telegram Desktop. // // // // // // Source code: https://github.com/michaelkisiel/ubuntu-light-telegram-theme // // // // Published under MIT Licence. Feel free to modify this file whatever you want. // // Mentioning the original repo (see above) isn't mandatory, but highly appreciated! // // // // // ////////////////////////////////////////////////////////////////////////////////////////////////// // Color presets // COLOR_GRAY: #5b5953; COLOR_LGRAY: #f2f1f0; COLOR_DARK: #403f3a; // Main color (dark one) COLOR_IRON: #d3d3d3; COLOR_GGRAY: #818181; COLOR_WHITE: #ffffff; COLOR_BLACK: #000000; COLOR_APRICOT: #ee8d66; COLOR_LAPRICOT: #ffe9d4; COLOR_APRICOT_ALPHA: #f1d1c4; COLOR_ORANGE: #ef7645; COLOR_FINN: #5e2750; COLOR_PLUM: #77216f; COLOR_BLUE: #32a3e2; COLOR_RED: #FF6347; COLOR_GREEN: #00a32b; COLOR_GREEN_DARK: #008c00; // Accent color COLOR_GREEN_LIGHT: #15cd7d; // Accent color #2 (just like first one with slight changes) COLOR_GREEN_RIPPLE_ACTIVE: #025618; // basic windowBg: COLOR_LGRAY; // Window backgrounds windowFg: COLOR_DARK; // Main text / chat text windowBgOver: COLOR_IRON; // Search field background + buttons color in context menu windowBgRipple: COLOR_GGRAY; // Inactive chat in chats list (press & hold) windowFgOver: COLOR_DARK; // Main text color on hover windowSubTextFg: COLOR_DARK; // Chats list message preview text windowSubTextFgOver: COLOR_GRAY; // Mouse over chats list message preview text windowBoldFg: COLOR_DARK; // Bold font (titles in Settings, Left menu options) windowBoldFgOver: COLOR_DARK; // Mouse over chats list chat name text (+ Left menu options on hover) windowBgActive: COLOR_GREEN_LIGHT; // Active button background (+ checkboxes background) windowFgActive: COLOR_WHITE; // Active selected chats list text / button text + checkboxes' "ticks" color windowActiveTextFg: COLOR_ORANGE; // Online status, links, recording cancel, etc windowShadowFg: COLOR_DARK; // Window border shadows windowShadowFgFallback: COLOR_LGRAY; // Notification border shadowFg: #00000018; // Internal border shadows slideFadeOutBg: #0000003c; slideFadeOutShadowFg: windowShadowFg; // Window slide animation shadow imageBg: COLOR_DARK; imageBgTransparent: COLOR_WHITE; //widgets activeButtonBg: COLOR_GRAY; // Currently selected button background activeButtonBgOver: COLOR_GGRAY; // Mouse over currently selected button background activeButtonBgRipple: COLOR_APRICOT_ALPHA; // Primary button background color (and active chat) - Press & hold activeButtonFg: COLOR_WHITE; // Currently selected button text activeButtonFgOver: COLOR_WHITE; // Mouse over currently selected button text activeButtonSecondaryFg: COLOR_WHITE; // Counter color on primary button activeButtonSecondaryFgOver: COLOR_WHITE; // Counter color on primary button (hover) activeLineFg: COLOR_BLUE; // Active input field line color (normal) activeLineFgError: COLOR_RED; // Active input field line color (error) lightButtonBg: COLOR_IRON; // Secondary button background color (default) lightButtonBgOver: COLOR_APRICOT; // Secondary button background color (hover) lightButtonBgRipple: COLOR_APRICOT_ALPHA; // Secondary button background color (press & hold) lightButtonFg: COLOR_GGRAY; // Secondary button text color lightButtonFgOver: COLOR_WHITE; attentionButtonFg: #d84343; attentionButtonFgOver: #d84343; attentionButtonBgOver: #ef9592; attentionButtonBgRipple: #d87c79; outlineButtonBg: COLOR_LGRAY; // Buttons background in profiles (shared media) outlineButtonBgOver: COLOR_LGRAY; outlineButtonOutlineFg: COLOR_APRICOT; outlineButtonBgRipple: COLOR_IRON; menuBg: COLOR_LGRAY; //Background color of top right menu when clicked on three dots menuBgOver: COLOR_IRON; menuBgRipple: COLOR_RED; menuIconFg: COLOR_GGRAY; // Icons color (left menu button, scroll down, paperclip..) menuIconFgOver: COLOR_APRICOT; // Icons color on hover (left menu button, scroll down, paperclip..) menuSubmenuArrowFg: COLOR_GRAY; // (unknown) menuFgDisabled: COLOR_GGRAY; menuSeparatorFg: COLOR_GGRAY; // seperator line in right click pop-up window in historyComposeArea scrollBarBg: #ee8d6653; // Scrollbar (chats list) current position scrollBarBgOver: #ee8d667a; // Mouse over scrollbar (chats list) current position scrollBg: #0000001a; // Scrollbar (chats list) background scrollBgOver: #0000002c; // Mouse over scrollbar (chats list) background smallCloseIconFg: COLOR_GGRAY; smallCloseIconFgOver: COLOR_RED; radialFg: COLOR_WHITE; radialBg: COLOR_GRAY; placeholderFg: COLOR_GRAY; // Inactive input box placeholder text placeholderFgActive: COLOR_GRAY; // Active input box placeholder text inputBorderFg: COLOR_LGRAY; filterInputBorderFg: COLOR_APRICOT; // Search field border filterInputInactiveBg: COLOR_IRON; // Search field background color checkboxFg: COLOR_GGRAY; sliderBgInactive: COLOR_IRON; // Inactive media slider button in settings or gif add panel sliderBgActive: COLOR_BLUE; // Active media slider button in settings or gif add panel tooltipBg: #eef2f5; tooltipFg: #5d6c80; tooltipBorderFg: #c9d1db; // custom title bar for Windows and macOS titleBg: COLOR_LGRAY; // Title bar titleShadow: #00000003; titleButtonFg: COLOR_DARK; // Title bar buttons(min/max/close) titleButtonBgOver: COLOR_IRON; // Title bar min/max background (hover) titleButtonFgOver: COLOR_DARK; // Title bar min/max icons titleButtonCloseBgOver: COLOR_GGRAY; titleButtonCloseFgOver: COLOR_WHITE; titleFgActive: #3e3c3e; // Active title bar text (Mac) titleFg: #acacac; // Inactive title bar text (Mac) // tray icon trayCounterBg: COLOR_ORANGE; trayCounterBgMute: COLOR_GGRAY; trayCounterFg: COLOR_WHITE; trayCounterBgMacInvert: COLOR_WHITE; trayCounterFgMacInvert: COLOR_WHITE; // layers layerBg: #0000007f; cancelIconFg: COLOR_GRAY; cancelIconFgOver: COLOR_RED; // boxes boxBg: COLOR_LGRAY; // Popup windows background color boxTextFg: COLOR_DARK; boxTextFgGood: COLOR_BLUE; boxTextFgError: COLOR_RED; boxTitleFg: COLOR_DARK; // Popup windows titles color (sessions, contacts...) boxSearchBg: COLOR_LGRAY; boxSearchCancelIconFg: COLOR_GRAY; boxSearchCancelIconFgOver: COLOR_RED; boxTitleAdditionalFg: COLOR_BLUE; boxTitleCloseFg: COLOR_GRAY; boxTitleCloseFgOver: COLOR_RED; membersAboutLimitFg: windowSubTextFgOver; contactsBg: COLOR_LGRAY; // Contacts list background color contactsBgOver: COLOR_APRICOT_ALPHA; // Contacts list mouse over background (apricot with alpha) contactsNameFg: COLOR_DARK; contactsStatusFg: COLOR_GRAY; // Contacts list last seen contactsStatusFgOver: COLOR_GRAY; contactsStatusFgOnline: COLOR_ORANGE; photoCropFadeBg: layerBg; photoCropPointFg: COLOR_WHITE; // intro///////////////////////////////////////////////////////////////////////////////// introBg: COLOR_LGRAY; introTitleFg: windowBoldFg; introDescriptionFg: COLOR_GRAY; introErrorFg: COLOR_GRAY; introCoverTopBg: #0f89d0; introCoverBottomBg: #39b0f0; introCoverIconsFg: #5ec6ff; introCoverPlaneTrace: #5ec6ff69; introCoverPlaneInner: #c6d8e8; introCoverPlaneOuter: #a1bed4; introCoverPlaneTop: COLOR_WHITE; ////////////////////////////////////////////////////////////////////////////////////////77 dialogsMenuIconFg: COLOR_GRAY; dialogsMenuIconFgOver: COLOR_APRICOT; dialogsBg: COLOR_LGRAY; // Chats list background color dialogsNameFg: COLOR_DARK; dialogsChatIconFg: dialogsNameFg; dialogsDateFg: COLOR_GGRAY; // Chats list date text dialogsTextFg: COLOR_GGRAY; // Chats list message preview text dialogsTextFgService: COLOR_ORANGE; // Chats list message preview sender name dialogsDraftFg: COLOR_RED; // "Draft" word dialogsVerifiedIconBg: COLOR_GGRAY; dialogsVerifiedIconFg: COLOR_WHITE; dialogsSendingIconFg: COLOR_RED; dialogsSentIconFg: COLOR_GREEN_LIGHT; dialogsUnreadBg: COLOR_GREEN_LIGHT; // Chats list unread counter background dialogsUnreadBgMuted: COLOR_GGRAY; // Unread counter (for muted chats) + pins color(?) dialogsUnreadFg: COLOR_WHITE; // Unread counter text color dialogsBgOver: COLOR_APRICOT_ALPHA; // Inactive chat color on hover (COLOR_APRICOT with alpha) dialogsNameFgOver: COLOR_DARK; dialogsChatIconFgOver: COLOR_DARK; dialogsDateFgOver: COLOR_GGRAY; dialogsTextFgOver: COLOR_GGRAY; dialogsTextFgServiceOver: COLOR_APRICOT; // Mouse over chats list message preview sender name dialogsDraftFgOver: COLOR_RED; dialogsVerifiedIconBgOver: dialogsVerifiedIconBg; dialogsVerifiedIconFgOver: dialogsVerifiedIconFg; dialogsSendingIconFgOver: dialogsSendingIconFg; dialogsSentIconFgOver: dialogsSentIconFg; dialogsUnreadBgOver: dialogsUnreadBg; dialogsUnreadBgMutedOver: dialogsUnreadBgMuted; dialogsUnreadFgOver: dialogsUnreadFg; dialogsBgActive: COLOR_APRICOT; // Active chat color (in chats list) dialogsNameFgActive: COLOR_WHITE; dialogsChatIconFgActive: COLOR_WHITE; dialogsDateFgActive: COLOR_WHITE; dialogsTextFgActive: COLOR_WHITE; dialogsTextFgServiceActive: COLOR_WHITE; dialogsDraftFgActive: COLOR_LAPRICOT; dialogsVerifiedIconBgActive: COLOR_LAPRICOT; dialogsVerifiedIconFgActive: COLOR_APRICOT; dialogsSendingIconFgActive: COLOR_LAPRICOT; dialogsSentIconFgActive: COLOR_LAPRICOT; dialogsUnreadBgActive: COLOR_LAPRICOT; dialogsUnreadBgMutedActive: COLOR_LAPRICOT; dialogsUnreadFgActive: COLOR_APRICOT; dialogsForwardBg: COLOR_APRICOT_ALPHA; dialogsForwardFg: COLOR_APRICOT_ALPHA; searchedBarBg: COLOR_APRICOT; // Search results window background color searchedBarBorder: COLOR_APRICOT; searchedBarFg: COLOR_WHITE; // Search results text color // history topBarBg: COLOR_LGRAY; // Chat header background emojiPanBg: COLOR_LGRAY; // Sticker panel background emojiPanCategories: COLOR_LGRAY; // Sticker panel bottom bar background emojiPanHeaderFg: COLOR_DARK; // Sticker panel title text emojiPanHeaderBg: COLOR_LGRAY; // Sticker panel top bar background stickerPanDeleteBg: COLOR_LGRAY; stickerPanDeleteFg: COLOR_RED; stickerPreviewBg: COLOR_LGRAY; // Sticker preview background historyTextInFg: COLOR_DARK; // Incoming messages TEXT color historyTextOutFg: COLOR_DARK; // Outgoing messages TEXT color historyCaptionInFg: COLOR_GRAY; historyCaptionOutFg: COLOR_GRAY; historyFileNameInFg: COLOR_DARK; historyFileNameOutFg: COLOR_DARK; historyOutIconFg: COLOR_GREEN_LIGHT; // "Eye" and "Ticks" color for outgoing messages (selected) historyOutIconFgSelected: COLOR_GREEN_LIGHT; // "Eye" and "Ticks" color for outgoing messages (selected) historyIconFgInverted: COLOR_WHITE; historySendingOutIconFg: COLOR_RED; // "Clock" icon while sending file (outgoing) historySendingInIconFg: COLOR_RED; // "Clock" icon while sending file (incoming) historySendingInvertedIconFg: COLOR_WHITE; historySystemBg: COLOR_BLUE; historySystemBgSelected: COLOR_APRICOT; historySystemFg: COLOR_GGRAY; historyUnreadBarBg: COLOR_APRICOT; // Unread messages bar color historyUnreadBarBorder: COLOR_DARK; historyUnreadBarFg: COLOR_WHITE; historyForwardChooseBg: COLOR_BLUE; // "Choose recipient" BACKGROUND color (forwarding) historyForwardChooseFg: COLOR_WHITE; // "Choose recipient" TEXT color (forwarding) historyPeer1NameFg: #ff9100; // Group chat sender name - Orange historyPeer1UserpicBg: #e17076; historyPeer2NameFg: #4fad2d; // Green historyPeer2UserpicBg: #7bc862; historyPeer3NameFg: #d09306; // Gold historyPeer3UserpicBg: #e5ca77; historyPeer4NameFg: #15cd7d; // Light green historyPeer4UserpicBg: #65aadd; historyPeer5NameFg: #9a4ff7; // Violet historyPeer5UserpicBg: #a695e7; historyPeer6NameFg: #cd4073; // "Raspberry" historyPeer6UserpicBg: #ee7aae; historyPeer7NameFg: #2996ad; // Cyan historyPeer7UserpicBg: #6ec9cb; historyPeer8NameFg: #ce671b; // One more orange?! historyPeer8UserpicBg: #faa774; historyPeerUserpicFg: COLOR_WHITE; historyScrollBarBg: scrollBarBg; // Scrollbar (history view) background historyScrollBarBgOver: scrollBarBgOver; // Scrollbar (history view) background (hover) historyScrollBg: scrollBg; // Scrollbar (history view) current position background historyScrollBgOver: scrollBgOver; // Scrollbar (history view) current position background (hover) msgInBg: COLOR_LGRAY; // Incoming message background msgInBgSelected: COLOR_GGRAY; // Selected incoming message background msgOutBg: COLOR_LAPRICOT; // Outgoing message background msgOutBgSelected: COLOR_APRICOT; // Selected outgoing message background msgSelectOverlay: #2223239b; // Selected media (images...) overlay msgStickerOverlay: #2223237f; // Selected sticker overlay msgInServiceFg: COLOR_GRAY; // Incoming reply quoted name msgInServiceFgSelected: COLOR_WHITE; // Selected incoming reply quoted name msgOutServiceFg: COLOR_GRAY; // Outgoing reply quoted name msgOutServiceFgSelected: COLOR_WHITE; // Selected outgoing reply quoted name msgInShadow: #3d3c3c29; // Incoming message box shadow msgInShadowSelected: #2f303029; // Selected incoming message box shadow msgOutShadow: #4e4f4e40; // Outgoing message box shadow msgOutShadowSelected: #2f303040; // Selected outgoing message box shadow msgInDateFg: COLOR_GGRAY; // Incoming message date text msgInDateFgSelected: COLOR_WHITE; msgOutDateFg: COLOR_GGRAY; // Outgoing message date text msgOutDateFgSelected: COLOR_WHITE; msgServiceFg: COLOR_WHITE; // Service messages TEXT color (join, left, actual date) msgServiceBg: COLOR_GRAY; // Service messages BACKGROUND color (join, left, actual date) msgServiceBgSelected: COLOR_APRICOT; msgInReplyBarColor: COLOR_APRICOT_ALPHA; // Incoming msg: vertical bar next to reply msgInReplyBarSelColor: COLOR_WHITE; // Incoming msg: vertical bar next to reply (selected) msgOutReplyBarColor: COLOR_APRICOT_ALPHA; // Outgoing msg: vertical bar next to reply msgOutReplyBarSelColor: COLOR_WHITE; // Outgoing msg: vertical bar next to reply (selected) msgInMonoFg: COLOR_GRAY; // Monowidth font / incoming msg msgOutMonoFg: COLOR_GRAY; // Monowidth font / outgoing msg msgDateImgFg: COLOR_WHITE; msgDateImgBg: #00000054; // Download / play / etc overlay backgrounds msgDateImgBgOver: #00000074; // Mouse over download / play / etc overlay backgrounds msgDateImgBgSelected: COLOR_APRICOT; msgFileThumbLinkInFg: COLOR_IRON; // msgFileThumbLinkInFgSelected: COLOR_GGRAY; msgFileThumbLinkOutFg: COLOR_IRON; msgFileThumbLinkOutFgSelected: COLOR_GGRAY; msgFileInBg: COLOR_GGRAY; msgFileInBgOver: COLOR_APRICOT; msgFileInBgSelected: COLOR_DARK; msgFileOutBg: COLOR_GGRAY; msgFileOutBgOver: COLOR_APRICOT; msgFileOutBgSelected: COLOR_DARK; msgFile1Bg: COLOR_IRON; msgFile1BgDark: COLOR_GGRAY; msgFile1BgOver: COLOR_GRAY; msgFile1BgSelected: COLOR_DARK; msgFile2Bg: COLOR_IRON; msgFile2BgDark: COLOR_GGRAY; msgFile2BgOver: COLOR_GRAY; msgFile2BgSelected: COLOR_DARK; msgFile3Bg: COLOR_IRON; msgFile3BgDark: COLOR_GGRAY; msgFile3BgOver: COLOR_GRAY; msgFile3BgSelected: COLOR_DARK; msgFile4Bg: COLOR_IRON; msgFile4BgDark: COLOR_GGRAY; msgFile4BgOver: COLOR_GRAY; msgFile4BgSelected: COLOR_DARK; historyFileInIconFg: COLOR_WHITE; // central color fillings in icons of chat history historyFileInIconFgSelected: COLOR_WHITE; historyFileInRadialFg: COLOR_WHITE; historyFileInRadialFgSelected: COLOR_WHITE; historyFileOutIconFg: COLOR_WHITE; historyFileOutIconFgSelected: COLOR_WHITE; historyFileOutRadialFg: COLOR_WHITE; historyFileOutRadialFgSelected: COLOR_WHITE; historyFileThumbIconFg: COLOR_WHITE; historyFileThumbIconFgSelected: COLOR_WHITE; historyFileThumbRadialFg: COLOR_WHITE; historyFileThumbRadialFgSelected: COLOR_WHITE; msgWaveformInActive: COLOR_ORANGE; msgWaveformInActiveSelected: COLOR_DARK; msgWaveformInInactive: COLOR_IRON; msgWaveformInInactiveSelected: COLOR_LGRAY; msgWaveformOutActive: COLOR_ORANGE; msgWaveformOutActiveSelected: COLOR_DARK; msgWaveformOutInactive: COLOR_IRON; msgWaveformOutInactiveSelected: COLOR_LAPRICOT; msgBotKbOverBgAdd: COLOR_DARK; // Inline button (hover) msgBotKbIconFg: COLOR_WHITE; // Inline button icon color (URL Buttons, for example) msgBotKbRippleBg: COLOR_APRICOT; // Inline button (press & hold) mediaInFg: COLOR_GGRAY; mediaInFgSelected: COLOR_WHITE; mediaOutFg: COLOR_GGRAY; mediaOutFgSelected: COLOR_WHITE; youtubePlayIconBg: #e83131c8; youtubePlayIconFg: COLOR_WHITE; videoPlayIconBg: COLOR_GRAY; videoPlayIconFg: COLOR_WHITE; toastBg: #151515ef; toastFg: COLOR_WHITE; reportSpamBg: COLOR_LGRAY; reportSpamFg: COLOR_GRAY; historyToDownShadow: COLOR_DARK; //history scroll button historyToDownBg: windowBg; historyToDownBgOver: windowBgOver; historyToDownBgRipple: windowBgRipple; historyToDownFg: menuIconFg; historyToDownFgOver: menuIconFgOver; historyComposeAreaBg: COLOR_LGRAY; historyComposeAreaFg: COLOR_DARK; // Text color in "Type your message" field historyComposeAreaFgService: COLOR_GGRAY; // Text color in replied field when "media" is involved historyComposeIconFg: COLOR_GRAY; historyComposeIconFgOver: COLOR_APRICOT; historySendIconFg: COLOR_APRICOT; historySendIconFgOver: COLOR_BLUE; historyPinnedBg: COLOR_IRON; historyReplyBg: COLOR_LGRAY; historyReplyIconFg: COLOR_BLUE; historyReplyCancelFg: COLOR_GRAY; historyReplyCancelFgOver: COLOR_RED; historyComposeButtonBg: COLOR_LGRAY; historyComposeButtonBgOver: COLOR_IRON; historyComposeButtonBgRipple: COLOR_GGRAY; // shared media type in profile settings thumbnail overlays with checkboxes overviewCheckBg: #00000040; overviewCheckFg: COLOR_LGRAY; overviewCheckFgActive: COLOR_WHITE; overviewPhotoSelectOverlay: #00000077; profileStatusFgOver: COLOR_GGRAY; profileVerifiedCheckBg: windowBgActive; profileVerifiedCheckFg: windowFgActive; profileAdminStartFg: windowBgActive; // notification settings notificationsBoxMonitorFg: COLOR_GRAY; notificationsBoxScreenBg: COLOR_WHITE; notificationSampleUserpicFg: windowBgActive; notificationSampleCloseFg: COLOR_RED; notificationSampleTextFg: COLOR_GGRAY; notificationSampleNameFg: COLOR_DARK; notificationBg: COLOR_LGRAY; // Notification background mainMenuBg: COLOR_LGRAY; // Left menu background (lower part, not buttons) mainMenuCoverBg: COLOR_APRICOT; // Left menu background (upper part) mainMenuCoverFg: COLOR_WHITE; mediaPlayerBg: COLOR_IRON; // Music player background mediaPlayerActiveFg: COLOR_APRICOT; // Clickable Next song/Prev song button in music player mediaPlayerInactiveFg: COLOR_GGRAY; // "Disabled" Next song/Prev song button in music player mediaPlayerDisabledFg: COLOR_DARK; mediaviewFileBg: COLOR_IRON; mediaviewFileNameFg: COLOR_WHITE; mediaviewFileSizeFg: COLOR_LGRAY; mediaviewFileRedCornerFg: #d55959; mediaviewFileYellowCornerFg: #e8a659; mediaviewFileGreenCornerFg: #49a957; mediaviewFileBlueCornerFg: #599dcf; mediaviewFileExtFg: activeButtonFg; mediaviewMenuBg: COLOR_LGRAY; mediaviewMenuBgOver: COLOR_IRON; mediaviewMenuBgRipple: COLOR_GGRAY; mediaviewMenuFg: COLOR_DARK; mediaviewBg: #000000b9; // Layer faded in when preview is selected or image mediaviewCaptionBg: COLOR_LGRAY; mediaviewCaptionFg: COLOR_DARK; mediaviewTextLinkFg: COLOR_ORANGE; mediaviewVideoBg: imageBg; mediaviewControlBg: #0000003c; mediaviewControlFg: COLOR_WHITE; mediaviewSaveMsgBg: toastBg; mediaviewSaveMsgFg: toastFg; mediaviewPlaybackActive: #c7c7c7; mediaviewPlaybackInactive: #252525; mediaviewPlaybackActiveOver: COLOR_WHITE; mediaviewPlaybackInactiveOver: #474747; mediaviewPlaybackProgressFg: COLOR_WHITE; mediaviewPlaybackIconFg: mediaviewPlaybackActive; mediaviewPlaybackIconFgOver: mediaviewPlaybackActiveOver; mediaviewTransparentBg: COLOR_WHITE; mediaviewTransparentFg: #cccccc;