├── GitHub-Dark.theme.css ├── README.md └── source.css /GitHub-Dark.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name GitHub Dark 3 | * @version 1.2.1 4 | * @description A theme based off of the GitHub Dark theme. 5 | * @author Sango 6 | * @source https://github.com/moistp1ckle/GitHub_Dark 7 | * @website https://github.com/moistp1ckle 8 | **/ 9 | 10 | @import url('https://cdn.jsdelivr.net/gh/moistp1ckle/GitHub_Dark/source.css'); 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GitHub Dark 2 | A theme for BetterDiscord based off of the GitHub Dark theme. 3 | 4 | ![image](https://i.imgur.com/KJEvX3y.png) 5 | 6 | ![image](https://i.imgur.com/JkT4rQP.png) 7 | 8 | ![image](https://i.imgur.com/vk50RVE.png) 9 | 10 | ![image](https://i.imgur.com/ZUGZqSa.png) 11 | 12 | Link/Embed Preview: https://i.imgur.com/KcvjVHH.png 13 | -------------------------------------------------------------------------------- /source.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* --------- BASE THEME --------- */ 3 | --blurple-replace: #7289DA; 4 | --background-primary: rgb(9, 12, 16); 5 | --background-secondary: rgb(13, 17, 23); 6 | --background-floating: rgb(22, 27, 34); 7 | --background-secondary-alt: var(--background-floating); 8 | --background-tertiary: rgb(7, 10, 16); 9 | --background-accent: rgb(17, 29, 46); 10 | --userarea-background: var(--background-tertiary); 11 | --header-primary: rgb(240, 246, 252); 12 | --header-secondary: rgb(139, 148, 158); 13 | --elevation-low: 0 1px 0 rgba(40, 40, 50, 0.2), 0 1.5px 0 rgba(60, 60, 70, 0.05), 0 2px 0 rgba(40, 40, 50, 0.05); 14 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); 15 | --channels-default: rgb(139, 148, 158); 16 | --channeltextarea-background: rgb(7, 10, 16); 17 | --voice-color: var(--brand-experiment); 18 | --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 19 | --activity-card-background: #0f0f0f; 20 | --interactive-normal: rgb(139, 148, 158); 21 | --interactive-hover: #dcddde; 22 | --interactive-active: #fff; 23 | --interactive-muted: rgb(76, 82, 88); 24 | --background-modifier-hover: rgba(33, 38, 45, 0.26); 25 | --background-modifier-active: rgba(33, 38, 45, 0.44); 26 | --background-modifier-selected: rgba(33, 38, 45, 0.52); 27 | --background-modifier-accent: rgb(33, 38, 45); 28 | --text-link: rgb(88, 166, 255); 29 | --text-normal: rgb(201, 209, 217); 30 | --text-muted: rgb(139, 148, 158); 31 | --deprecated-panel-background: #2a2f29; 32 | --deprecated-card-bg: var(--background-secondary); 33 | --deprecated-card-editable-bg: var(--background-secondary); 34 | --deprecated-store-bg: #36393f; 35 | --deprecated-quickswitcher-input-background: #72767d; 36 | --deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3); 37 | --deprecated-text-input-bg: var(--channeltextarea-background); 38 | --deprecated-text-input-border: var(--border-color); 39 | --deprecated-text-input-border-hover: #040405; 40 | --deprecated-text-input-border-disabled: #202225; 41 | --deprecated-text-input-prefix: #dcddde; 42 | --background-accent-1: rgba(15, 15, 15, 0.1); 43 | --background-accent-3: rgba(15, 15, 15, 0.3); 44 | --background-floating-2: rgba(0, 0, 0, 0.2); 45 | --border: 1px solid rgb(48, 54, 61); 46 | --border-color: rgb(48, 54, 61); 47 | --blurple-border: 1px solid rgb(31, 47, 71); 48 | --border-radius: 5px; 49 | --divide-color: var(--brand-experiment); 50 | --brand-experiment: rgb(88, 101, 242); 51 | --deprecated-quickswitcher-input-background: var(--channeltextarea-background); 52 | } 53 | 54 | .theme-light { 55 | --background-secondary: rgb(13, 17, 23); 56 | --header-primary: rgb(240, 246, 252); 57 | --header-secondary: rgb(139, 148, 158); 58 | --background-primary: rgb(22, 27, 34); 59 | --text-normal: rgb(201, 209, 217); 60 | --background-floating: rgb(22, 27, 34); 61 | --background-tertiary: transparent; 62 | --deprecated-text-input-bg: rgb(7, 10, 16); 63 | } 64 | 65 | .theme-dark { 66 | --text-positive: hsl(139, calc(var(--saturation-factor, 1)*66.8%), 58.6%); 67 | --text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%); 68 | --text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%); 69 | --info-positive-text: #fff; 70 | --info-warning-text: #fff; 71 | --info-danger-text: #fff; 72 | --info-help-background: hsla(197, calc(var(--saturation-factor, 1)*100%), 47.8%, 0.1); 73 | --info-help-foreground: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%); 74 | --info-help-text: #fff; 75 | --status-warning-text: #000; 76 | --scrollbar-thin-thumb: rgb(22, 27, 34); 77 | --scrollbar-thin-track: transparent; 78 | --scrollbar-auto-thumb: rgb(22, 27, 34); 79 | --scrollbar-auto-track: rgba(17, 19, 24, 0.308); 80 | --scrollbar-auto-scrollbar-color-thumb: rgb(22, 27, 34); 81 | --scrollbar-auto-scrollbar-color-track: rgba(17, 19, 24, 0.308); 82 | --elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15); 83 | --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05); 84 | --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16); 85 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); 86 | --logo-primary: rgb(240, 246, 252); 87 | --control-brand-foreground: hsl(227, calc(var(--saturation-factor, 1)*57.9%), 77.6%); 88 | --control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%); 89 | --background-mentioned: rgba(13, 17, 23, 0.466); 90 | --background-mentioned-hover: rgba(20, 33, 53, 0.233); 91 | --background-message-hover: rgba(4, 4, 5, 0.07); 92 | --activity-card-background: #202225; 93 | --textbox-markdown-syntax: rgb(82, 89, 95); 94 | --background-primary: rgb(9, 12, 16); 95 | --background-secondary: rgb(13, 17, 23); 96 | --background-floating: rgb(22, 27, 34); 97 | --background-secondary-alt: var(--background-floating); 98 | --background-tertiary: rgb(7, 10, 16); 99 | --background-accent: rgb(17, 29, 46); 100 | --userarea-background: var(--background-tertiary); 101 | --background-modifier-accent: var(--border-color); 102 | --deprecated-text-input-border-hover: var(--border-color); 103 | --primary-700: var(--border-color); 104 | --activity-card-background: var(--background-secondary-alt); 105 | --input-background: var(--background-primary); 106 | --modal-background: var(--background-floating); 107 | --modal-footer-background: var(--background-secondary); 108 | --home-background: var(--background-primary); 109 | --bg-overlay-chat: var(--background-primary); 110 | } 111 | 112 | 113 | .interactive_bf202d, .interactive__972a0 { 114 | border: 1px solid transparent; 115 | } 116 | .searchBar__5ec2f, .background__1fed1, .badgeList__1fed1, .container_fea832, .iconContainer__0624f, .circle__8cc9a, .stepNumber_d9914b, .box_d9914b, .container_a45028, .cardPrimary_a298b, .perkCard_b62c4e,.guildContainer__5dba5, .wrapper__5b98e, .container_c50183, .paymentPane__01014, .outer_c0bea0, .overlay__24502, .messageContainer__95796, .searchBar__97492, .tutorial__2692d, .messages__1ccd1, .button__06eda, .friendRequestsButton__523aa, .searchBox_d9c882, .inner_a99829, .searchBar_c0e32c.container_a45028, .contentWrapper__08434, .container_cb32c7, #undiscord .multiInput, #undiscord.container, .searchResult__02a39, .emojiErrorItem__67954, .tiers_f15dca > .tier_f15dca:not(:first-child), .descriptionBox__981f7, .theme-dark .card_dc2e44, .cardPrimary__73069.editable__73069, .card_ea91d1, .avatarCard_da92c3, .viewServerButton_adff39, .button__71c22, .otherRoles__71c22, .copyInput_fffc15, .emptyChannelIcon__00de6, .button_f563df, .wrapper_f7ecac, .button_e131a9 .buttonColor_e131a9, .button_e131a9.buttonColor_e131a9, .bd-search-wrapper, .bd-modal-root, .bd-addon-error, .modeSelected__2ea32 .link__2ea32, .modeSelected__2ea32:hover .link__2ea32, .prompt__5d7c9, .perks__30359, .perksList__3bf54, .upsellFooter__5e07c, .input_ac6cb0, .interactiveSelected__972a0, .prompt_fe70ca, .optionButtonWrapper__270d7, .mainCard_f369db, .addReactButton__34c2c, .buttonInner__34c2c, .reaction_f8896c, .wrapper__44df5, .reactionBtn__23977.forceShow__23977 { 117 | border: var(--border); 118 | } 119 | 120 | .sidebarRegion__23e6b, .categoryList_c0e32c, .categoryList__3ad28, #undiscord .sidebar, .container__551b0, .wrapper_b1e4f3, .contentWrapper__9b0f4 { 121 | border-right: var(--border); 122 | } 123 | .searchResultsWrap_a9e706, .container__551b0, .container_c8ffbb { 124 | border-left: var(--border); 125 | } 126 | .connectionHeader_c7f964, .header_d9c882, .header_c0e32c, .header__8ef02, #undiscord .header, #undiscord .tbar, .searchHeader_f3b986, .tierHeader_f15dca, .howItWorksImageContainer_aa72d6, .theme-dark .separator__49fc1, .bar__84522, .replyBar__841c8 { 127 | border-bottom: var(--border); 128 | box-shadow: none; 129 | } 130 | .footer__45690, .inspector_aeaaeb, #undiscord .footer, .theme-dark .footerSeparator__49fc1, .contentSection_b6bcee, .rewardDescriptionContainer__956c6, .bd-modal-footer, .container__9293f, .clipContainer__841c8, .navButtons_fe70ca { 131 | border-top: var(--border); 132 | box-shadow: none; 133 | } 134 | 135 | .container__9293f, .container_c8ffbb { 136 | background: var(--background-secondary) !important; 137 | } 138 | 139 | .container__37e49, .privateChannels__35e86, .theme-dark .container__2637a, .container_e131a9 { 140 | border: var(--border); 141 | border-bottom: none; 142 | } 143 | 144 | .privateChannels__35e86, .container__2637a, .header_f37cb1, .sidebar_c48ade { 145 | border-top-left-radius: 10px !important; 146 | } 147 | 148 | .title_f75fb0, .searchBar__35e86, .container__9293f, .header_f37cb1 { 149 | border-bottom: var(--border); 150 | background: var(--background-secondary); 151 | box-shadow: none; 152 | } 153 | 154 | .title_f75fb0.container__9293f { 155 | border-bottom: var(--border); 156 | border-top: var(--border); 157 | background: var(--background-secondary) !important; 158 | } 159 | 160 | .resultsGroup-r_nuzN { 161 | background-color: var(--background-secondary); 162 | border-radius: var(--border-radius); 163 | border-left: var(--border); 164 | border-right: var(--border); 165 | } 166 | 167 | .bd-modal-root, .bd-addon-error { 168 | border-radius: var(--border-radius); 169 | } 170 | .bd-addon-error, .prompt__5d7c9 { 171 | border-color: var(--border-color) !important; 172 | } 173 | 174 | .actionButton_f8fa06, .bioTextArea__6a919, .input__0f084, .popout__3f413, .container__5b321, .container__8cc9a, .container__5dbf8, .accountButtonInner_c7f964 { 175 | border: var(--border); 176 | background-color: var(--background-secondary); 177 | transition: .3s; 178 | } .actionButton_f8fa06:hover, .embedFull__623de, .option__3f413[aria-selected="true"]:not(.option__3f413.multi__3f413), .circle__8cc9a, .stepNumber_d9914b, .theme-dark .bottomDivider__01014, .inner_c0bea0.fullSize_c0bea0, .header__45690, .header_d9c882, #undiscord .header, .searchHeader_f3b986, .tierInProgress_c44edb, .cardHeader_b44011, .clickableContainer_e5c5d5, .theme-dark .headerExpanded__43dab, .categoryHeader_d1405b { 179 | background: var(--background-secondary-alt); 180 | } 181 | .circleIconButton__5bc7e, .nowPlayingColumn__133bf, .container__7d20c, .members_c8ffbb, .theme-dark .tierHeaderLocked_f15dca, .itemBodyInner__5dac8, .theme-dark .headerDefault__43dab, .theme-dark .headerClickable__43dab, .theme-dark .changeDetails__43dab, .footer__49fc1, .member_c8ffbb, .optionButtonWrapper__270d7, .mainCard_f369db, .banner__183e8, .wrapper__44df5 { 182 | background: var(--background-secondary); 183 | } 184 | 185 | .lookBlank-3eh9lL { 186 | color: var(--text-normal); 187 | } 188 | 189 | .footer-2gL1pp .lookFilled-1Gx00P.colorGrey-2DXtkV { 190 | background-color: rgb(43, 50, 59) !important; 191 | } 192 | 193 | .background_c44edb { 194 | color: var(--border-color); 195 | } 196 | 197 | .mentioned-xhSam7:before { 198 | background-color: var(--brand-experiment); 199 | } 200 | 201 | .theme-dark .emptyHintCard-2mUdMe, .channelTextArea_f75fb0, .channelTextArea__74017, .button_e6e74f, .searchBarComponent__35e86, .inset_bf1984, .menu_c1e9c4, .container__9271d, .reaction__23977, .reactionBtn__23977.forceShowLook_ec6b19, .accountProfileCard__1fed1, .inner_c0bea0.biteSize_c0bea0, .container_fcf29c, .lookFilled__3f413.select__3f413, .row__0624f, .connectContainer_c7f964, .connection_c7f964, .metadataContainer_c7f964, .connectedAccountContainer_e6abe8, .card__39ec2, .popoverReactionHoverBar_f84418, .panel_c0bea0, .skuSelectModalHeader_e50a4d, .skuSelectModalContent_e50a4d, .contentWrapper__9c62c, .avatarUploaderInnerSquare_e04502, .avatarUploadIcon_e04502.hideDefaultIcon_e04502, .container_d8f25b, .root__49fc1, .tierHeaderUnlocked_f15dca, .editCard_a25a68, .featureCard_bebc5b, .howItWorksContainer_aa72d6, .mainTableContainer_dd2627, .movedTable_dd2627, .theme-dark .card__84e3e, .container_cec934, .autocomplete__13533, .upload_aa605f, .wrapper_f7ecac { 202 | background-color: var(--background-secondary-alt); 203 | border: var(--border); 204 | border-radius: var(--border-radius); 205 | } 206 | 207 | .overlay_fe70ca { 208 | background: linear-gradient(to top, var(--background-floating), transparent) !important; 209 | } 210 | 211 | .theme-dark .container_faa96b.isOpen_faa96b, .addReactButton__34c2c, .buttonInner__34c2c, .reaction_f8896c { 212 | background: var(--background-floating); 213 | } 214 | 215 | .skuSelectModalHeader_e50a4d, .clipContainer__841c8 { 216 | border-radius: var(--border-radius) var(--border-radius) 0 0; 217 | border-bottom: none; 218 | } 219 | .skuSelectModalContent_e50a4d { 220 | border-radius: 0 0 var(--border-radius) var(--border-radius); 221 | border-top: none; 222 | } 223 | 224 | .placeholderCard_d87d30, .cardPrimary__73069.editable__73069, .optionButtonWrapper__270d7.selected__270d7 { 225 | border-color: var(--border-color); 226 | } 227 | 228 | .theme-dark .contentWrapper-3WC1ID, .connection_c7f964, .overlay__24502, .panel_c0bea0.inner_c0bea0, .container_cb32c7, .button_f563df { 229 | background-color: var(--background-secondary); 230 | } 231 | 232 | .theme-dark .message-2qRu38, .searchBarComponent__35e86, .iconContainer__0624f, .searchBox_d9c882.container_a45028, .inner_a99829, .container_a45028 { 233 | background-color: var(--background-primary); 234 | } 235 | 236 | .divider-JfaTT5 { 237 | --divider-color: var(--divide-color); 238 | } 239 | 240 | .children-19S4PO:after { 241 | content: none; 242 | } 243 | 244 | .theme-dark .outer-1AjyKL.interactive-3B9GmY:hover, .theme-dark .outer-1AjyKL.active-1xchHY { 245 | background-color: var(--background-modifier-selected); 246 | } 247 | 248 | .theme-light .footer-2 { 249 | background-color: var(--background-primary); 250 | color: var(--text-normal); 251 | border-top: var(--border); 252 | padding: 10px; 253 | text-align: center; 254 | font-size: 0.9rem; 255 | } 256 | 257 | 258 | 259 | /* BD Styles */ 260 | .bd-addon-list .bd-addon-header { 261 | border: var(--border); 262 | border-radius: var(--border-radius) var(--border-radius) 0 0; 263 | } 264 | .bd-description-wrap { 265 | border-left: var(--border); 266 | border-right: var(--border); 267 | } 268 | .bd-footer { 269 | border: var(--border); 270 | border-top: none; 271 | border-radius: 0 0 var(--border-radius) var(--border-radius); 272 | } 273 | 274 | #bd-editor-controls { 275 | border: var(--border); 276 | border-radius: var(--border-radius) var(--border-radius) 0 0; 277 | } 278 | .monaco-editor .margin { 279 | background: var(--background-secondary-alt); 280 | border-right: var(--border); 281 | } 282 | .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input, .minimap-decorations-layer, .vs-dark .monaco-scrollable-element>.scrollbar>.slider { 283 | background-color: var(--background-secondary); 284 | } 285 | .monaco-editor { 286 | border: var(--border); 287 | border-top: none; 288 | border-radius: 0 0 var(--border-radius) var(--border-radius); 289 | } 290 | .codeContainer__75297 svg { 291 | color: var(--interactive-normal); 292 | cursor: pointer; 293 | } 294 | .bd-addon-error-stack code { 295 | background: var(--background-primary); 296 | border: var(--border); 297 | border-radius: var(--border-radius); 298 | } 299 | --------------------------------------------------------------------------------