├── dracula-pro.png ├── screenshot.png ├── Dracula_Official.theme.css ├── INSTALL.md ├── LICENSE ├── README.md └── base.css /dracula-pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/betterdiscord/HEAD/dracula-pro.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/betterdiscord/HEAD/screenshot.png -------------------------------------------------------------------------------- /Dracula_Official.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Dracula Official 3 | * @author Dracula 4 | * @authorId 971847378011308102 5 | * @version 1.0.0 6 | * @description Dark theme for BetterDiscord 7 | * @source https://github.com/Dracula/BetterDiscord 8 | **/ 9 | 10 | @import url("https://dracula.github.io/betterdiscord/base.css"); 11 | -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | ### [BetterDiscord](https://betterdiscord.app) 2 | 3 | #### Installing manually 4 | 5 | - [Use this link](https://raw.githubusercontent.com/dracula/BetterDiscord/master/Dracula_Official.theme.css) or 6 | - download using the [Github `.zip` download](https://github.com/dracula/BetterDiscord/archive/master.zip) option and unzip them. 7 | 8 | Move `Dracula_Official.theme.css` file to your BetterDiscord themes folder. 9 | 10 | #### [Homebrew](https://brew.sh) 11 | 12 | Easily install from [dracula/homebrew-install](https://github.com/dracula/homebrew-install/blob/master/Casks/dracula-betterdiscord.rb): 13 | 14 | ```bash 15 | brew tap dracula/install 16 | brew install --cask dracula-betterdiscord 17 | ``` 18 | 19 | #### Activating theme 20 | 21 | 1. Open Discord user settings. 22 | 2. Navigate to the Themes section. 23 | 3. Enable the Dracula Theme listed. 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2023 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dracula for [BetterDiscord](https://betterdiscord.app) 2 | 3 | > A dark theme for [BetterDiscord](https://betterdiscord.app). 4 | 5 | ![Screenshot](./screenshot.png) 6 | 7 | ## Install 8 | 9 | All instructions can be found at [draculatheme.com/betterdiscord](https://draculatheme.com/betterdiscord). 10 | 11 | ## Team 12 | 13 | This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/dracula/betterdiscord/graphs/contributors). 14 | 15 | | [![Dominic Ruggiero](https://github.com/mrhappyma.png?size=100)](https://github.com/mrhappyma) | [![Kabir Kwatra](https://github.com/kab1r.png?size=100)](https://github.com/kab1r) | 16 | | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | 17 | | [Dominic Ruggiero](https://github.com/mrhappyma) | [Kabir Kwatra](https://github.com/kab1r) | 18 | 19 | ## Community 20 | 21 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff. 22 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues. 23 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. 24 | 25 | ## Dracula PRO 26 | 27 | [![Dracula PRO](./dracula-pro.png)](https://draculatheme.com/pro) 28 | 29 | ## License 30 | 31 | [MIT License](./LICENSE) 32 | -------------------------------------------------------------------------------- /base.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Dracula 3 | * @author Dracula 4 | * @authorId 971847378011308102 5 | * @version 1.0.0 6 | * @description Dark theme for BetterDiscord 7 | * @source https://github.com/Dracula/BetterDiscord 8 | **/ 9 | :root { 10 | --dracula-background: #282a36 !important; 11 | --dracula-current-line: #44475a !important; 12 | --dracula-selection: #44475a !important; 13 | --dracula-foreground: #f8f8f2 !important; 14 | --dracula-comment: #6272a4 !important; 15 | --dracula-cyan: #8be9fd !important; 16 | --dracula-green: #50fa7b !important; 17 | --dracula-orange: #ffb86c !important; 18 | --dracula-pink: #ff79c6 !important; 19 | --dracula-purple: #bd93f9 !important; 20 | --dracula-red: #ff5555 !important; 21 | --dracula-yellow: #f1fa8c !important; 22 | --dracula-line-highlight: #44475a75 !important; 23 | --dracula-non-text: #ffffff1a !important; 24 | --dracula-white: #ffffff !important; 25 | --dracula-tab-drop-background: #44475a70 !important; 26 | --dracula-background-lighter: #424450; 27 | --dracula-background-alt: #343746 !important; 28 | 29 | --activity-card-background: var(--dracula-background) !important; 30 | --background-accent: var(--dracula-current-line) !important; 31 | --background-floating: var(--dracula-background) !important; 32 | --background-mobile-primary: var(--dracula-background) !important; 33 | --background-mobile-secondary: var(--dracula-background-lighter) !important; 34 | --background-modifier-selected: var(--dracula-current-line) !important; 35 | --background-primary: var(--dracula-background) !important; 36 | --home-background: var(--dracula-background-alt) !important; 37 | --background-secondary-alt: var(--dracula-background) !important; 38 | --background-secondary: var(--dracula-background-lighter) !important; 39 | --background-tertiary: var(--dracula-background-alt) !important; 40 | --channeltextarea-background: var(--dracula-selection) !important; 41 | --header-primary: var(--dracula-foreground) !important; 42 | --interactive-muted: var(--dracula-comment) !important; 43 | --interactive-normal: var(--dracula-foreground) !important; 44 | --rs-dnd-color: var(--dracula-red) !important; 45 | --rs-idle-color: var(--dracula-orange) !important; 46 | --rs-invisible-color: var(--dracula-comment) !important; 47 | --rs-offline-color: var(--dracula-selection) !important; 48 | --rs-online-color: var(--dracula-green) !important; 49 | --rs-streaming-color: var(--dracula-purple) !important; 50 | --scrollbar-auto-scrollbar-color-thumb: var(--dracula-comment) !important; 51 | --scrollbar-auto-scrollbar-color-track: var( 52 | --dracula-background-alt 53 | ) !important; 54 | --scrollbar-auto-thumb: var(--dracula-comment) !important; 55 | --scrollbar-auto-track: var(--dracula-background-alt) !important; 56 | --scrollbar-thin-thumb: var(--dracula-comment) !important; 57 | } 58 | 59 | .wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9, 60 | .wrapper-1BJsBx:hover .childWrapper-anI2G9 { 61 | background-color: var(--dracula-comment) !important; 62 | } 63 | 64 | .container-2cd8Mz { 65 | background-color: var(--dracula-background) !important; 66 | } 67 | 68 | .autocomplete-3NRXG8 { 69 | background-color: var(--dracula-background) !important; 70 | } 71 | 72 | .autocomplete-3jLKbj { 73 | background-color: var(--dracula-background) !important; 74 | } 75 | 76 | .selected-3H3-RC { 77 | background-color: var(--dracula-selection) !important; 78 | } 79 | 80 | .container-ZMc96U.themed-Hp1KC_ { 81 | background-color: var(--dracula-background) !important; 82 | } 83 | 84 | .contentWrapper-3vHNP2, 85 | .container-3u7RcY, 86 | .wrapper-1NNaWG, 87 | .wrapper-1NNaWG, 88 | .inspector-DFKXwB, 89 | .wrapper-22rqw6, 90 | .listWrapper-2nHLP8, 91 | .categoryItem-1sHzUv, 92 | .guildIcon-2SUGiq, 93 | .header-11eigE { 94 | background-color: var(--dracula-background) !important; 95 | } 96 | 97 | .container-1SX9VC, 98 | .container-2oNtJn { 99 | background-color: var(--dracula-selection) !important; 100 | } 101 | 102 | .header-1w9Q93 { 103 | background-color: var(--dracula-background); 104 | } 105 | 106 | .messagesPopout-eVzQcI { 107 | background-color: var(--dracula-background-alt); 108 | } 109 | 110 | .messageGroupWrapper-1jf_7C { 111 | background-color: var(--dracula-background); 112 | } 113 | 114 | .popout-3gby1q { 115 | background-color: var(--dracula-background); 116 | } 117 | 118 | .searchBarComponent-18D6hD { 119 | background-color: var(--dracula-background-alt); 120 | } 121 | 122 | .friendSelected-3cwmD7 { 123 | background-color: var(--dracula-selection); 124 | } 125 | 126 | .anchor-1MIwyf { 127 | background-color: var(--dracula-background); 128 | } 129 | 130 | .header-145e10, 131 | .header-1w9Q93 { 132 | background-color: var(--dracula-background); 133 | } 134 | 135 | .active-1grPyy { 136 | background-color: var(--dracula-background-alt); 137 | } 138 | 139 | .messagesPopout-eVzQcI { 140 | background-color: var(--dracula-background-alt); 141 | } 142 | 143 | .channelHeader-DFRX8q { 144 | background-color: var(--dracula-background-alt); 145 | } 146 | 147 | .container-iA3Qrz { 148 | background-color: var(--dracula-background-alt); 149 | } 150 | 151 | .messageContainer-3VTXBC { 152 | background-color: var(--dracula-background); 153 | } 154 | 155 | .scroller-145h9c { 156 | background-color: var(--dracula-background-alt); 157 | } 158 | 159 | .messages-23can0 { 160 | background-color: var(--dracula-background); 161 | } 162 | 163 | .container-1A0qQO { 164 | background-color: var(--dracula-background-alt); 165 | } 166 | 167 | code { 168 | color: var(--dracula-foreground) !important; 169 | } 170 | 171 | span.hljs-built_in { 172 | color: var(--dracula-purple) !important; 173 | } 174 | 175 | span.hljs-keyword { 176 | color: var(--dracula-pink) !important; 177 | } 178 | 179 | span.hljs-title { 180 | color: var(--dracula-cyan) !important; 181 | } 182 | 183 | span.hljs-attr { 184 | color: var(--dracula-foreground) !important; 185 | } 186 | 187 | span.hljs-string { 188 | color: var(--dracula-yellow) !important; 189 | } 190 | 191 | span.hljs-number { 192 | color: var(--dracula-purple) !important; 193 | } 194 | 195 | span.hljs-symbol { 196 | color: var(--dracula-orange) !important; 197 | } 198 | 199 | span.hljs-meta { 200 | color: var(--dracula-foreground) !important; 201 | } 202 | 203 | span.hljs-meta-keyword { 204 | color: var(--dracula-pink) !important; 205 | } 206 | 207 | span.hljs-meta-string { 208 | color: var(--dracula-orange) !important; 209 | } 210 | 211 | /* Current channel */ 212 | div[class*="modeSelected"] > div > a[data-list-item-id*="channels"]{ 213 | background-color: var(--dracula-comment) !important; 214 | } 215 | div[class*="modeSelected"] > div > a[data-list-item-id*="channels"] svg, div:hover > a[data-list-item-id*="channels"] svg { 216 | color: var(--dracula-white) !important; 217 | } 218 | --------------------------------------------------------------------------------