├── .gitignore ├── INSTALL.md ├── LICENSE ├── README.md ├── colors.tdesktop-theme ├── package.json ├── screenshot.png └── tiled.png /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | \.DS_Store 3 | -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | ### [Telegram Desktop](https://desktop.telegram.org/) 2 | 3 | #### Install using Git 4 | 5 | If you are a git user, you can install the theme and keep up to date by cloning the repo: 6 | 7 | git clone https://github.com/dracula/telegram.git 8 | 9 | #### Install manually 10 | 11 | Download using the [GitHub .zip download](https://github.com/dracula/telegram/archive/master.zip) option and unzip them. 12 | 13 | #### Activating theme 14 | 15 | 1. In Telegram Desktop, go to Setting, on Chat Settings, click on kebab menu (three dots) and `Create new theme` then `import existing theme`. 16 | 2. Select the `colors.tdesktop-theme` file you just downloaded. 17 | 3. Click `Keep Changes` to apply the theme. 18 | 4. Click `Save theme`. 19 | 5. On `Theme name` set `Dracula`, click on `Choose from file` and select `tiled.png` file you just downloaded. 20 | 6. Click `save` to apply the background. 21 | 22 | _Note: The theme is also available on the [Desktop Themes Channel](https://t.me/themes)_ 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Dracula Theme 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dracula for [Telegram Desktop](https://desktop.telegram.org/) 2 | 3 | > A dark theme for [Telegram Desktop](https://desktop.telegram.org/). 4 | 5 | ![Screenshot](./screenshot.png) 6 | 7 | ## Install 8 | 9 | All instructions can be found at [draculatheme.com/telegram](https://draculatheme.com/telegram). 10 | 11 | _A complete package that installs the background and theme together can be found in [releases](https://github.com/dracula/telegram/releases)._ 12 | 13 | ## Team 14 | 15 | This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/dracula/telegram/graphs/contributors). 16 | 17 | | [![Neil Smith](https://avatars2.githubusercontent.com/u/8648114?v=3&s=70)](https://github.com/nmsmith22389) | [![Irfan Maulana](https://avatars3.githubusercontent.com/u/7221389?v=3&s=70)](https://github.com/mazipan) | 18 | | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | 19 | | [Neil Smith](https://github.com/nmsmith22389) | [Irfan Maulana](https://github.com/mazipan) | 20 | 21 | ## Community 22 | 23 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff. 24 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues. 25 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. 26 | 27 | ## Changelog 28 | 29 | See the [releases](https://github.com/dracula/telegram/releases) page for the list of changes. 30 | 31 | ## License 32 | 33 | [MIT License](./LICENSE) 34 | -------------------------------------------------------------------------------- /colors.tdesktop-theme: -------------------------------------------------------------------------------- 1 | // Description: Dracula Theme 2 | // Version: v0.1.3 3 | // Repository: https://github.com/dracula/telegram 4 | // Initial Author: Neil Smith 5 | // Initial Repository: https://github.com/nmsmith22389/dracula-telegram 6 | 7 | // Color Pallete 8 | pBg: #282a36; 9 | pSelection: #44475a; 10 | pFg: #f8f8f2; 11 | pComment: #6272a4; 12 | pCyan: #8be9fd; 13 | pGreen: #50fa7b; 14 | pOrange: #ffb86c; 15 | pPink: #ff79c6; 16 | pPurple: #bd93f9; 17 | pRed: #ff5555; 18 | pYellow: #f1fa8c; 19 | pAnthracite: #212020; 20 | 21 | // Color Vars 22 | rippleBgHeavy: #ffffff40; 23 | rippleBgLight: #ffffff20; 24 | cBlack: #000000; 25 | cWhite: #ffffff; 26 | cTransparent: #00000000; 27 | 28 | windowBg: pBg; // Main bg 29 | windowFg: pFg; // Text color etc. 30 | windowBgOver: pSelection; // Generic bg hover color (random bits and pieces) & Search bar bg 31 | windowBgRipple: rippleBgLight; // Ripple color (on hover colored items) [te] 32 | windowFgOver: windowFg; // Text color on hover 33 | windowSubTextFg: pComment; // Minor text and some labels (version number, last seen, etc.) 34 | windowSubTextFgOver: pPurple; // Hotkey hover text color? 35 | windowBoldFg: pYellow; // Bolded text (headers) [te] 36 | windowBoldFgOver: windowBoldFg; // windowBoldFg but on hover (idk where used) 37 | windowBgActive: pGreen; // Checked radio and checkbox color 38 | windowFgActive: pBg; // Button Text [te] 39 | windowActiveTextFg: pCyan; // Hyperlink text color (and text input active labels) 40 | windowShadowFg: #000000f0; // [te] 41 | windowShadowFgFallback: cBlack; // [te] 42 | shadowFg: cTransparent; // [te] 43 | slideFadeOutBg: windowBg; // ??? 44 | slideFadeOutShadowFg: cTransparent; // ??? [te] 45 | imageBg: cBlack; // ??? 46 | imageBgTransparent: cWhite; // ??? 47 | activeButtonBg: pComment; // Raised Button bg 48 | activeButtonBgOver: pPurple; // Raised Button hover bg 49 | activeButtonBgRipple: rippleBgHeavy; // Raised Button ripple color (and slected chat contact ripple?) 50 | activeButtonFg: windowBg; // Raised Button text color 51 | activeButtonFgOver: activeButtonFg; // Raised Button hover text color 52 | activeButtonSecondaryFg: pFg; // Numbers (badges) text color on raised buttons 53 | activeButtonSecondaryFgOver: activeButtonSecondaryFg; // activeButtonSecondaryFg on hover 54 | activeLineFg: windowActiveTextFg; // Active text input bottom border color 55 | activeLineFgError: pRed; // activeLineFg but on error 56 | lightButtonBg: windowBg; // Flat button bg color 57 | lightButtonBgOver: pSelection; // Flat button bg color on hover 58 | lightButtonBgRipple: rippleBgLight; // Flat button ripple color 59 | lightButtonFg: pComment; // Flat button text color [te] 60 | lightButtonFgOver: activeButtonBgOver; // Flat button text color on hover 61 | attentionButtonFg: pRed; // Warning button text color 62 | attentionButtonFgOver: attentionButtonFg; // Warning button text color hover 63 | attentionButtonBgOver: #ff555540; // Warning button bg color hover !!(pRed with transparency)!! [te] 64 | attentionButtonBgRipple: rippleBgLight; // Warning button ripple color 65 | // Outline buttons are flat btns that get a little indicator when hovered 66 | outlineButtonBg: windowBg; // Outline Button bg 67 | outlineButtonBgOver: pSelection; // Outline Button bg on hover [te] 68 | outlineButtonOutlineFg: windowActiveTextFg; // Outline Button indicator color 69 | outlineButtonBgRipple: rippleBgLight; // Outline Button ripple color 70 | menuBg: windowBg; // Menu bg color 71 | menuBgOver: windowBgOver; // Menu bg color on hover 72 | menuBgRipple: windowBgRipple; // Icon ripple color 73 | // Menu Icons are icons that appear popup windows 74 | menuIconFg: pComment; // Menu Icon text color 75 | menuIconFgOver: pPurple; // Menu Icon text color on hover 76 | menuSubmenuArrowFg: pComment; // ??? 77 | menuFgDisabled: pSelection; // Disabled menu text color 78 | menuSeparatorFg: #f8f8f210; // [te] 79 | scrollBarBg: pComment; // Scroll Bar current slider color (indicator) 80 | scrollBarBgOver: pPurple; // Scroll Bar current slider color on hover 81 | scrollBg: pSelection; // Scroll Bar track bg color 82 | scrollBgOver: scrollBg; // Scroll Bar track bg color on hover 83 | smallCloseIconFg: pComment; // Small menu close button color (its tiny) 84 | smallCloseIconFgOver: pRed; // smallCloseIconFg on hover [te] 85 | radialFg: pPink; // ??? [te] 86 | radialBg: pSelection; // ??? [te] 87 | placeholderFg: pSelection; //windowSubTextFg; [te] 88 | placeholderFgActive: pComment; 89 | inputBorderFg: pComment; // Input text field undeline when not active 90 | filterInputBorderFg: pComment; // Search box active border 91 | checkboxFg: pComment; // checkbox inactive border [te] 92 | sliderBgInactive: pSelection; // windowBgActive; 93 | sliderBgActive: pGreen; // A slider is the bottom border on tabs that slides around 94 | tooltipBg: #44475aa0; // [te] 95 | tooltipFg: pFg; // [te] 96 | tooltipBorderFg: cTransparent; // [te] 97 | titleBg: pBg; // Window top bar bg color 98 | titleShadow: cTransparent; 99 | titleButtonFg: pSelection; // [te] 100 | titleButtonBgOver: cTransparent; // ??? [te] 101 | titleButtonFgOver: pOrange; // ??? [te] 102 | titleButtonCloseBgOver: cTransparent; // ??? [te] 103 | titleButtonCloseFgOver: pRed; // ??? [te] 104 | titleFgActive: pPurple; // Window Title color when active [te] 105 | titleFg: pComment; // Window Title color 106 | trayCounterBg: pRed; // Tray icon counter background for unread messages 107 | trayCounterBgMute: pBg; // ??? [te] 108 | trayCounterFg: pFg; // ??? [te] 109 | trayCounterBgMacInvert: pComment; // ??? [te] 110 | trayCounterFgMacInvert: pFg; // ??? [te] 111 | layerBg: #44475a66; // bg overlay when menu is up [te] 112 | cancelIconFg: menuIconFg; // Main close menu color (like option close) 113 | cancelIconFgOver: pRed; // & on hover [te] 114 | boxBg: windowBg; 115 | boxTextFg: windowFg; 116 | boxTextFgGood: pGreen; 117 | boxTextFgError: pRed; 118 | boxTitleFg: cWhite; 119 | boxSearchBg: boxBg; 120 | boxSearchCancelIconFg: cancelIconFg; 121 | boxSearchCancelIconFgOver: cancelIconFgOver; 122 | boxTitleAdditionalFg: pCyan; // [te] 123 | boxTitleCloseFg: cancelIconFg; 124 | boxTitleCloseFgOver: cancelIconFgOver; 125 | membersAboutLimitFg: pRed; // [te] 126 | contactsBg: windowBg; // Contact bg color on contacts page 127 | contactsBgOver: windowBgOver; 128 | contactsNameFg: pYellow; // Contact name color on contacts page [te] 129 | contactsStatusFg: windowSubTextFg; // Contact status color on contacts page 130 | contactsStatusFgOver: windowSubTextFgOver; 131 | contactsStatusFgOnline: windowActiveTextFg; 132 | photoCropFadeBg: layerBg; 133 | photoCropPointFg: pComment; 134 | introBg: windowBg; 135 | introTitleFg: windowBoldFg; 136 | introDescriptionFg: windowSubTextFg; 137 | introErrorFg: pRed; // [te] 138 | introCoverTopBg: pBg; // [te] 139 | introCoverBottomBg: pBg; // [te] 140 | introCoverIconsFg: pComment; // [te] 141 | introCoverPlaneTrace: pCyan; // [te] 142 | introCoverPlaneInner: pCyan; // [te] 143 | introCoverPlaneOuter: pCyan; // [te] 144 | introCoverPlaneTop: pCyan; // [te] 145 | dialogsMenuIconFg: menuIconFg; // menu hamburger color 146 | dialogsMenuIconFgOver: menuIconFgOver; 147 | dialogsBg: windowBg; 148 | dialogsNameFg: windowBoldFg; // Chat names color 149 | dialogsChatIconFg: pOrange; // [te] 150 | dialogsDateFg: windowSubTextFg; 151 | dialogsTextFg: windowSubTextFg; 152 | dialogsTextFgService: windowActiveTextFg; 153 | dialogsDraftFg: pRed; // Draft label color 154 | dialogsVerifiedIconBg: pCyan; // verified icon bg [te] 155 | dialogsVerifiedIconFg: pBg; // verified icon text color [te] 156 | dialogsSendingIconFg: pOrange; // ??? little clock icon on chat contact (the ones on left sidebar) when sending 157 | dialogsSentIconFg: pGreen; 158 | dialogsUnreadBg: pComment; // [te] 159 | dialogsUnreadBgMuted: pSelection; // [te] 160 | dialogsUnreadFg: pFg; // [te] 161 | dialogsBgOver: windowBgOver; 162 | dialogsNameFgOver: windowBoldFgOver; 163 | dialogsChatIconFgOver: dialogsChatIconFg; 164 | dialogsDateFgOver: windowSubTextFgOver; 165 | dialogsTextFgOver: windowSubTextFgOver; 166 | dialogsTextFgServiceOver: dialogsTextFgService; 167 | dialogsDraftFgOver: dialogsDraftFg; 168 | dialogsVerifiedIconBgOver: dialogsVerifiedIconBg; 169 | dialogsVerifiedIconFgOver: dialogsVerifiedIconFg; 170 | dialogsSendingIconFgOver: dialogsSendingIconFg; 171 | dialogsSentIconFgOver: dialogsSentIconFg; 172 | dialogsUnreadBgOver: dialogsUnreadBg; 173 | dialogsUnreadBgMutedOver: dialogsUnreadBgMuted; 174 | dialogsUnreadFgOver: dialogsUnreadFg; 175 | dialogsBgActive: pSelection; 176 | dialogsNameFgActive: pPink; 177 | dialogsChatIconFgActive: pPurple; 178 | dialogsDateFgActive: windowActiveTextFg; 179 | dialogsTextFgActive: windowActiveTextFg; 180 | dialogsTextFgServiceActive: pOrange; // [te] 181 | dialogsDraftFgActive: dialogsDraftFg; 182 | dialogsVerifiedIconBgActive: dialogsVerifiedIconBg; 183 | dialogsVerifiedIconFgActive: dialogsVerifiedIconFg; 184 | dialogsSendingIconFgActive: dialogsSendingIconFg; 185 | dialogsSentIconFgActive: dialogsSentIconFg; 186 | dialogsUnreadBgActive: dialogsUnreadBg; 187 | dialogsUnreadBgMutedActive: dialogsUnreadBgMuted; 188 | dialogsUnreadFgActive: dialogsUnreadFg; 189 | dialogsForwardBg: dialogsBgActive; 190 | dialogsForwardFg: pCyan; // [te] 191 | searchedBarBg: pBg; // Results & 'no msgs found' msg in search results [te] 192 | searchedBarBorder: cTransparent; // [te] 193 | searchedBarFg: pPink; // Text 'Search for messages' in search results. [te] 194 | topBarBg: windowBg; 195 | emojiPanBg: windowBg; // Emoji window bg 196 | emojiPanCategories: emojiPanBg; 197 | emojiPanHeaderFg: windowSubTextFg; 198 | emojiPanHeaderBg: emojiPanBg; 199 | stickerPanDeleteBg: #ff555540; // [te] 200 | stickerPanDeleteFg: pRed; // windowFgActive; [te] 201 | stickerPreviewBg: cTransparent; 202 | historyTextInFg: windowFg; 203 | historyTextOutFg: windowFg; 204 | historyCaptionInFg: historyTextInFg; 205 | historyCaptionOutFg: historyTextOutFg; 206 | historyFileNameInFg: historyTextInFg; 207 | historyFileNameOutFg: historyTextOutFg; 208 | historyOutIconFg: pGreen; 209 | historyOutIconFgSelected: pGreen; 210 | historyIconFgInverted: pGreen; // [te] 211 | historySendingOutIconFg: pOrange; // [te] 212 | historySendingInIconFg: pOrange; // [te] 213 | historySendingInvertedIconFg: pOrange; // little 'eye' icon on some media msgs (ie sticker, image) to indicate views? [te] 214 | historySystemBg: pYellow; // [te] 215 | historySystemBgSelected: pOrange; // [te] 216 | historySystemFg: pBg; // windowFgActive; [te] 217 | historyUnreadBarBg: pSelection; 218 | historyUnreadBarBorder: pSelection; 219 | historyUnreadBarFg: cWhite; 220 | historyForwardChooseBg: pComment; 221 | historyForwardChooseFg: cWhite; 222 | historyPeer1NameFg: pRed; // [te] 223 | historyPeer1UserpicBg: pRed; // [te] 224 | historyPeer2NameFg: pGreen; // [te] 225 | historyPeer2UserpicBg: pGreen; // [te] 226 | historyPeer3NameFg: pYellow; // [te] 227 | historyPeer3UserpicBg: pYellow; // [te] 228 | historyPeer4NameFg: pCyan; // [te] 229 | historyPeer4UserpicBg: pCyan; // [te] 230 | historyPeer5NameFg: pPurple; // [te] 231 | historyPeer5UserpicBg: pPurple; // [te] 232 | historyPeer6NameFg: pPink; // [te] 233 | historyPeer6UserpicBg: pPink; // [te] 234 | historyPeer7NameFg: pAnthracite; // [te] 235 | historyPeer7UserpicBg: pAnthracite; // [te] 236 | historyPeer8NameFg: pOrange; // [te] 237 | historyPeer8UserpicBg: pOrange; // [te] 238 | historyPeerUserpicFg: pBg; // [te] 239 | historyScrollBarBg: scrollBarBg; 240 | historyScrollBarBgOver: scrollBarBgOver; 241 | historyScrollBg: scrollBg; 242 | historyScrollBgOver: scrollBgOver; 243 | msgInBg: pComment; 244 | msgInBgSelected: pPink; 245 | msgOutBg: pSelection; 246 | msgOutBgSelected: pPurple; 247 | msgSelectOverlay: rippleBgLight; 248 | msgStickerOverlay: rippleBgHeavy; 249 | msgInServiceFg: windowActiveTextFg; // Chat name color when system message in (ie the computer... Forwarded by, Channels, etc) 250 | msgInServiceFgSelected: windowActiveTextFg; // msgInServiceFg when selected 251 | msgOutServiceFg: windowActiveTextFg; // msgInServiceFg but out instead 252 | msgOutServiceFgSelected: windowActiveTextFg; // msgOutServiceFg when selected 253 | msgInShadow: cTransparent; 254 | msgInShadowSelected: cTransparent; 255 | msgOutShadow: cTransparent; 256 | msgOutShadowSelected: cTransparent; 257 | msgInDateFg: #8beafdcc; // Date in IN msg (text color) [ie time recieved] [te] 258 | msgInDateFgSelected: #282a3690; // msgInDateFG but when msg is selected [te] 259 | msgOutDateFg: #8beafdcc; // Date in OUT msg (text color) [ie time sent] [te] 260 | msgOutDateFgSelected: #282a3690; // msgOutDateFG but when msg is selected [te] 261 | msgServiceFg: #282a36cc; // [te] 262 | msgServiceBg: #6272a4cc; // Sticker reply, dates in chat history, bot buttons [te] 263 | msgServiceBgSelected: #ff79c7cc; // [te] 264 | msgInReplyBarColor: activeLineFg; 265 | msgInReplyBarSelColor: activeLineFg; 266 | msgOutReplyBarColor: activeLineFg; 267 | msgOutReplyBarSelColor: activeLineFg; 268 | msgImgReplyBarColor: activeLineFg; 269 | msgInMonoFg: pOrange; // [te] 270 | msgOutMonoFg: pOrange; // [te] 271 | msgDateImgFg: windowFg; 272 | msgDateImgBg: windowBg; 273 | msgDateImgBgOver: windowBgOver; 274 | msgDateImgBgSelected: windowBgOver; 275 | msgFileThumbLinkInFg: pYellow; // [te] 276 | msgFileThumbLinkInFgSelected: pComment; // [te] 277 | msgFileThumbLinkOutFg: pYellow; // [te] 278 | msgFileThumbLinkOutFgSelected: pComment; // [te] 279 | msgFileInBg: pPink; // [te] 280 | msgFileInBgOver: pFg; // [te] 281 | msgFileInBgSelected: pComment; // [te] 282 | msgFileOutBg: #bc94f9; // [te] 283 | msgFileOutBgOver: pFg; // [te] 284 | msgFileOutBgSelected: pSelection; // [te] 285 | msgFile1Bg: pCyan; // [te] 286 | msgFile1BgDark: #38d9fc; // [te] 287 | msgFile1BgOver: #59e0fc; // [te] 288 | msgFile1BgSelected: #bdf2fe; // [te] 289 | msgFile2Bg: pGreen; // [te] 290 | msgFile2BgDark: #07ee41; // [te] 291 | msgFile2BgOver: #1df954; // [te] 292 | msgFile2BgSelected: #82fba0; // [te] 293 | msgFile3Bg: pRed; // [te] 294 | msgFile3BgDark: #ff0000; // [te] 295 | msgFile3BgOver: #ff2222; // [te] 296 | msgFile3BgSelected: #ff8888; // [te] 297 | msgFile4Bg: pYellow; // [te] 298 | msgFile4BgDark: #e7f63b; // [te] 299 | msgFile4BgOver: #ebf85b; // [te] 300 | msgFile4BgSelected: #f7fcbd; // [te] 301 | msgWaveformInActive: pGreen; // Waveforms for audio messages (active is the played part) 302 | msgWaveformInActiveSelected: pGreen; 303 | msgWaveformInInactive: windowBg; 304 | msgWaveformInInactiveSelected: windowBg; 305 | msgWaveformOutActive: pGreen; 306 | msgWaveformOutActiveSelected: pGreen; 307 | msgWaveformOutInactive: windowBg; 308 | msgWaveformOutInactiveSelected: windowBg; 309 | msgBotKbOverBgAdd: rippleBgLight; // [te] 310 | msgBotKbIconFg: pBg; // [te] 311 | msgBotKbRippleBg: activeButtonBgRipple; //menuBgRipple; // Bot (system) chat buttons [ie theme like/dislike] 312 | mediaInFg: pOrange; // [te] 313 | mediaInFgSelected: pOrange; // [te] 314 | mediaOutFg: pOrange; // [te] 315 | mediaOutFgSelected: pOrange; // [te] 316 | youtubePlayIconBg: pRed; 317 | youtubePlayIconFg: pFg; 318 | videoPlayIconBg: pComment; // [te] 319 | videoPlayIconFg: pFg; // [te] 320 | toastBg: pComment; // [te] 321 | toastFg: cWhite; 322 | reportSpamBg: emojiPanHeaderBg; 323 | reportSpamFg: windowFg; 324 | historyToDownShadow: cTransparent; 325 | historyComposeAreaBg: windowBg; 326 | historyComposeAreaFg: historyTextInFg; 327 | historyComposeAreaFgService: pFg; // [te] 328 | historyComposeIconFg: menuIconFg; // Bottom chat icons (Attach File, Emoji, Microphone) 329 | historyComposeIconFgOver: menuIconFgOver; 330 | historySendIconFg: menuIconFg; // Paper plane icon that shows when text is typed (click to send) 331 | historySendIconFgOver: pGreen; // [te] 332 | historyPinnedBg: windowBg; 333 | historyReplyBg: historyComposeAreaBg; 334 | historyReplyCancelFg: cancelIconFg; 335 | historyReplyCancelFgOver: pRed; // [te] 336 | historyComposeButtonBg: historyComposeAreaBg; 337 | historyComposeButtonBgOver: windowBgOver; 338 | historyComposeButtonBgRipple: windowBgRipple; 339 | overviewCheckBg: cTransparent; // [te] 340 | overviewCheckFg: windowBg; 341 | overviewCheckFgActive: windowBg; 342 | overviewPhotoSelectOverlay: rippleBgHeavy; // [te] 343 | profileStatusFgOver: pPurple; 344 | notificationsBoxMonitorFg: windowFg; 345 | notificationsBoxScreenBg: pSelection; // [te] 346 | notificationSampleUserpicFg: pCyan; // [te] 347 | notificationSampleCloseFg: pRed; // [te] 348 | notificationSampleTextFg: pFg; // [te] 349 | notificationSampleNameFg: pYellow; // [te] 350 | mainMenuBg: windowBg; 351 | mainMenuCoverBg: pSelection; // [te] 352 | mainMenuCoverFg: pGreen; // [te] 353 | mediaPlayerBg: pBg; // [te] 354 | mediaPlayerActiveFg: pGreen; // [te] 355 | mediaPlayerInactiveFg: pComment; // [te] 356 | mediaPlayerDisabledFg: pSelection; // [te] 357 | mediaviewFileBg: pSelection; // [te] 358 | mediaviewFileNameFg: windowFg; 359 | mediaviewFileSizeFg: pOrange; //windowSubTextFg; [te] 360 | mediaviewFileRedCornerFg: #ff0000; // [te] 361 | mediaviewFileYellowCornerFg: #e7f63b; // [te] 362 | mediaviewFileGreenCornerFg: #07ee41; // [te] 363 | mediaviewFileBlueCornerFg: #38d9fc; // [te] 364 | mediaviewFileExtFg: pBg; // [te] 365 | mediaviewMenuBg: pBg; // [te] 366 | mediaviewMenuBgOver: pSelection; // [te] 367 | mediaviewMenuBgRipple: rippleBgLight; // [te] 368 | mediaviewMenuFg: pFg; // windowFgActive; [te] 369 | mediaviewBg: #282a36e0; // [te] 370 | mediaviewVideoBg: imageBg; 371 | mediaviewControlBg: pBg; // [te] 372 | mediaviewControlFg: pComment; // windowFgActive; [te] 373 | mediaviewCaptionBg: pBg; // [te] 374 | mediaviewCaptionFg: cWhite; 375 | mediaviewTextLinkFg: pCyan; // [te] 376 | mediaviewSaveMsgBg: toastBg; 377 | mediaviewSaveMsgFg: toastFg; 378 | mediaviewPlaybackActive: pGreen; // video playback progress already played part 379 | mediaviewPlaybackInactive: pSelection; // video playback progress upcoming (not played yet) part 380 | mediaviewPlaybackActiveOver: pPink; // video playback progress already played part with mouse over 381 | mediaviewPlaybackInactiveOver: pComment; // video playback progress upcoming (not played yet) part with mouse over 382 | mediaviewPlaybackProgressFg: pFg; // video playback progress text 383 | mediaviewPlaybackIconFg: pGreen; // video playback controls icon 384 | mediaviewPlaybackIconFgOver: pPink; // video playback controls icon with mouse over 385 | mediaviewPipControlsFg: pGreen; // picture-in-picture controls 386 | mediaviewPipControlsFgOver : pPink; // picture-in-picture controls with mouse over 387 | mediaviewPipFade : pBg; // picture-in-picture gradient fade controls background 388 | mediaviewPipPlaybackActive : pGreen; // picture-in-picture playback progress already played part 389 | mediaviewPipPlaybackInactive: pSelection; // picture-in-picture playback progress upcoming (not played yet) part 390 | mediaviewTransparentBg: cBlack; // [te] 391 | mediaviewTransparentFg: #666666; // [te] 392 | notificationBg: windowBg; 393 | titleButtonBg: cTransparent; // [te] 394 | titleButtonBgActive: cTransparent; // [te] 395 | titleButtonBgActiveOver: pSelection; // [te] 396 | titleButtonFgActiveOver: pOrange; // [te] 397 | titleButtonFgActive: pOrange; // [te] 398 | titleButtonCloseBg: cTransparent; // [te] 399 | titleButtonCloseFg: pSelection; // [te] 400 | titleButtonCloseBgActive: cTransparent; // [te] 401 | titleButtonCloseFgActive: pRed; // [te] 402 | titleButtonCloseBgActiveOver: pSelection; // [te] 403 | titleButtonCloseFgActiveOver: titleButtonCloseFgOver; 404 | filterInputInactiveBg: #44475a20; // [te] 405 | profileVerifiedCheckBg: pCyan; // [te] 406 | historyReplyIconFg: windowBgActive; 407 | historyToDownBg: #282a36cc; // [te] 408 | titleBgActive: pBg; // [te] 409 | sideBarBg: pBg; // filters side bar background 410 | sideBarBgActive: pSelection; // filters side bar active background 411 | sideBarBgRipple: rippleBgHeavy; // filters side bar ripple effect 412 | sideBarTextFg: pYellow; // filters side bar text 413 | sideBarTextFgActive: pPink; // filters side bar active item text 414 | sideBarIconFg: pComment; // filters side bar icon 415 | sideBarIconFgActive: pPurple; // filters side bar active item icon 416 | sideBarBadgeBg: pPurple; // filters side bar badge background 417 | sideBarBadgeBgMuted: pSelection; // filters side bar unimportant badge background 418 | sideBarBadgeFg: pFg; // filters side bar badge text 419 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dracula-telegram", 3 | "version": "0.1.2", 4 | "description": "A dark theme for Telegram Desktop based on the Dracula Palette.", 5 | "main": "README.md", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/dracula/telegram.git" 12 | }, 13 | "keywords": [ 14 | "dracula", 15 | "telegram", 16 | "theme" 17 | ], 18 | "author": "Neil Smith, Irfan Maulana", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/dracula/telegram/issues" 22 | }, 23 | "homepage": "https://draculatheme.com/telegram" 24 | } 25 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/telegram/0ac0610ea1c503e882a1ce606ad7fd5c54ca80af/screenshot.png -------------------------------------------------------------------------------- /tiled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/telegram/0ac0610ea1c503e882a1ce606ad7fd5c54ca80af/tiled.png --------------------------------------------------------------------------------