├── .gitignore ├── CHANGELOG.md ├── README.md ├── assets ├── banner-temp.png ├── banner.png └── icon.png ├── index.scss ├── manifest.json ├── old-theme-source.css ├── powercord_manifest.json └── src ├── _base.scss ├── _root.scss ├── application ├── _app-import.scss ├── _title-bar.scss ├── _user-area.scss └── _webkit-scrollbars.scss ├── chat ├── _chat-import.scss └── _content.scss ├── css-compile ├── ThemeSource-Compiled.css └── ThemeSource-Root.css ├── modals ├── _generic.scss ├── _join-create-server.scss ├── _keyboard-combos.scss ├── _modals-import.scss ├── _msg-delete.scss ├── _quick-switcher.scss ├── _reactions.scss └── _upload.scss ├── pages ├── _friends.scss ├── _library.scss ├── _pages-import.scss ├── _server-boost.scss ├── _stages.scss └── _store.scss ├── popouts ├── _auto-complete.scss ├── _box-select.scss ├── _color-picker.scss ├── _date-picker.scss ├── _dm-create.scss ├── _message-search.scss ├── _now-playing.scss ├── _popouts-import.scss ├── _rtc-connection.scss ├── _screensharing.scss └── _user-info.scss └── settings ├── _guild.scss ├── _settings-import.scss └── _user.scss /.gitignore: -------------------------------------------------------------------------------- 1 | prepros.config 2 | index.css -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.1 2 | Themed some unthemed areas. 3 | - Themed Stages, you know that nice new beaned Discord feature? Had to do it a very scuffed way though, but it works! 4 | - Themed RTC connection, tho I couldn't really get it close to original cause it used some different colors that aren't used by variables to begin with. The graph may look off, nothing I can really do about that though. 5 | - Added a variable that was missing in the root and a missing semi-colon..oops. 6 | 7 | # v1.0.0 8 | Welp, third times a charm I guess? A lot has changed, so here's information on all of that. 9 | - Version has been reset to v1.0.0. This may not make sense at first, but because of the unncessary version jumps, I feel like this is a good idea. It'll also help me (and you guys) better keep track of updates. Technically, this *would* be v3, but as I said, unnecessary version jumps are big bad bad. 10 | - Source has been ENTIRELY redone ***again***, but this time it's a bit nicer compared to before. There's an actual file structure now, and it's done in SCSS. For those who still need the CSS version / prefer that, you can find the source for it in `src/css-compile/`. 11 | - Repo has been redone entirely along with everything else to look nicer. **Variables for Noobs:tm** will be unavaible as it needs to be slightly redone. I don't know when I'll get to working on it, if ever. (someone is welcome to do it for me tho c:) 12 | - Not really an update, but hopefully BetterDiscord & Web support will be coming in the near future when I get everything with the rework sorted out. 13 | 14 | Please note (as this is a complete rewrite), I most likely missed themeing over a few things that I've themed in the past. If you notice anything that isn't themed, please make an issue request pointing it out. Note that it may take some time to push these updates, as I want to do small ones like that in bulk (unless something very noticeable breaks). -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Banner](./assets/banner-temp.png) 2 | 3 | # Theme Source 4 | A simple source to change Discord's colors. 5 | 6 | ## What is Theme Source about? 7 | The main purpsoe of Theme Source is to help new theme developers (or just users in general) to have an easier way changing all of Discord's colors, since using :root{**insert native variables here**} only themes Discord partially because Discord doesn't really use their variables everywhere that they should. Theme Source adds support for that. 8 | - Remember, this is currently a work in progress. Some things may not be finished (most nticeable things should be done tho), or may not be done perfectly. Note that this will never be *exactly* perfect, but it will be done as close to perfect as it can be. 9 | - Everything is coded in SCSS and sorted, but there will be a compiled CSS version for those who want to use it. You can find it in `./src/ThemeSorce-Compiled.css`. 10 | - You have permission to use this, however I ask that you credit this repo for it. It's really up to you if you want to or don't want to. (crediting really isnt that hard but, oh well?) 11 | - Theme Source is done entirely with Dark Theme in mind. If you're using this on light theme / plan making a light theme using this, please keep in mind that light theme will (most likely) have done things differently, so it may look off in some areas. 12 | 13 | If you're looking for something that more than likely recolors Discord better than this, and is less confusing, I recommend using [Devilbro's Discord Recolor](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Themes/DiscordRecolor), as it may be less confusing for those who are *really new* to this. 14 | 15 | ## Issues & Pull Requests 16 | As I've stated above: since this is currently a WIP, there ***will be issues with it***. Some of these issues may already be known, or you may have found something that isn't. Before submitting an issue request, please make sure that there isnt' one submitted already pointing that specific issue out. If you know how to fix what's broken, you may make a pull request fixing said issue. Please remember to include the compiled version, otherwise it'll just be dismissed. 17 | 18 | ## Variables for Noobs:tm: 19 | **Currently a WIP** -------------------------------------------------------------------------------- /assets/banner-temp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/theme-source/6e5996467a5b0fd29a5b6bc9343921e25727abb2/assets/banner-temp.png -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/theme-source/6e5996467a5b0fd29a5b6bc9343921e25727abb2/assets/banner.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/theme-source/6e5996467a5b0fd29a5b6bc9343921e25727abb2/assets/icon.png -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | @import "./src/base"; -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Theme Source", 3 | "description": "A source to simply change Discord's colors.", 4 | "version": "1.0.1", 5 | "author": "LuckFire#4800", 6 | "theme": "index.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /old-theme-source.css: -------------------------------------------------------------------------------- 1 | /* Webkit Scrollers */ 2 | .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-thumb, 3 | .auto-Ge5KZx.scrollerBase-289Jih::-webkit-scrollbar-thumb, 4 | .thin-1ybCId.scrollerBase-289Jih::-webkit-scrollbar-thumb { 5 | background-color: var(--background-secondary-alt) !important; 6 | } 7 | .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-track, 8 | .auto-Ge5KZx.scrollerBase-289Jih::-webkit-scrollbar-track { 9 | background-color: var(--background-secondary) !important; 10 | } 11 | 12 | .modal-1k91nT.root-1gCeng, 13 | .modalSize-cqUaws.root-1gCeng, 14 | .modalRoot-1Kx4Hb.root-1gCeng, 15 | .main-3auUui.root-1gCeng, 16 | .modalRoot-LW89o7.root-1gCeng, 17 | .modal-yWgWj-.fullscreenOnMobile-1aglG_, 18 | .root-1gCeng.small-3iVZYw, 19 | .root-1gCeng.medium-2RE1hE { /* All Modals */ 20 | background-color: var(--background-primary); 21 | box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2); 22 | } 23 | .modal-1k91nT.root-1gCeng > .header-1TKi98 { 24 | background-color: var(--background-primary); 25 | box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2); 26 | } 27 | .modal-1k91nT.root-1gCeng > .footer-1FPmkC, 28 | .modalSize-cqUaws.root-1gCeng > form > .footer-2gL1pp, 29 | .root-1gCeng.small-3iVZYw > form > .footer-2gL1pp, 30 | .modalRoot-1Kx4Hb.root-1gCeng > .footer-2gL1pp, 31 | .modalRoot-LW89o7.root-1gCeng > .footer-2gL1pp, 32 | .modal-yWgWj-.fullscreenOnMobile-1aglG_ > .footer-2gL1pp, 33 | .root-1gCeng.small-3iVZYw > .footer-2gL1pp, 34 | .root-1gCeng.medium-2RE1hE > .footer-2gL1pp, 35 | .root-1gCeng.medium-2RE1hE > .modal-1O3czN > .footer-2gL1pp { 36 | background-color: var(--background-tertiary); 37 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, .2); 38 | } 39 | .settingsGroup-2NaPKC > .group-2dAfBy > .selectorButton-EEUWed { 40 | border-color: var(--background-secondary) !important; 41 | } 42 | 43 | .colorPickerCustom-2CWBn2 { /* Color Picker */ 44 | background-color: var(--background-secondary-alt) !important; 45 | border-color: var(--background-secondary) !important; 46 | } 47 | 48 | .emojiPicker-3PwZFl > .inspector-S2gM3e { /* Emoji Picker */ 49 | background-color: var(--background-tertiary); 50 | } 51 | .emptyHintCard-2mUdMe { 52 | background-color: var(--background-secondary-alt) !important; 53 | } 54 | 55 | .contentWrapper-3WC1ID { /* Invite Splash */ 56 | background-color: var(--background-secondary-alt) !important; 57 | } 58 | 59 | .userPopout-3XzG_A { /* User Modal and Popouts */ 60 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary); 61 | } 62 | .userPopout-3XzG_A > .headerNormal-T_seeN { 63 | background-color: var(--background-tertiary); 64 | } 65 | .userPopout-3XzG_A > .body-3iLsc4, 66 | .userPopout-3XzG_A > .footer-1fjuF6 { 67 | background-color: var(--background-secondary); 68 | } 69 | 70 | .phoneFieldPopout-7PzjOO { /* Add a Phone Number */ 71 | background-color: var(--background-primary) !important; 72 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary); 73 | } 74 | 75 | .regionSelectPopout-p9-0_W { /* Call Region Selector */ 76 | background-color: var(--background-primary) !important; 77 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary); 78 | } 79 | 80 | .container-VSDcQc > .header-2bNvm4 { /* Add Role */ 81 | background-color: var(--background-tertiary) !important; 82 | } 83 | .container-VSDcQc > .autocompleteShadow-iiGWFU { 84 | background-color: var(--background-primary) !important; 85 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary); 86 | } 87 | .container-VSDcQc > .autocompleteArrowWrapper-3Z7OuM > .autocompleteArrow-Zxoy9H { 88 | background-color: var(--background-primary) !important; 89 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary); 90 | } 91 | 92 | .keyboardShortcutsModal-3piNz7 { /* Keyboard Shortcut */ 93 | background-color: var(--background-primary) !important; 94 | box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2); 95 | } 96 | .keyboardShortcutsModal-3piNz7 > .modalSubtitle-1Pj5nv { 97 | border-bottom: 1px solid var(--background-tertiary) !important; 98 | } 99 | .keybindShortcut-1BD6Z1 > span { 100 | background-color: var(--background-secondary-alt) !important; 101 | box-shadow: inset 0 -4px 0 var(--background-secondary) !important; 102 | border-color: var(--background-tertiary) !important; 103 | } 104 | 105 | .modal-yWgWj-.fullscreenOnMobile-1aglG_ > .reactors-Blmlhw { /* Reactions */ 106 | background-color: var(--background-primary); 107 | } 108 | .modal-yWgWj-.fullscreenOnMobile-1aglG_ > .scroller-1-nKid { 109 | background-color: var(--background-tertiary); 110 | } 111 | 112 | .everyonePopout-nEbJY3 > .body-2iXqIL { /* Mention Everyone Warning */ 113 | box-shadow: 0 2px 10px 0 var(--background-secondary-alt); 114 | } 115 | .everyonePopout-nEbJY3 > .body-2iXqIL { 116 | background-color: var(--background-primary); 117 | } 118 | .everyonePopout-nEbJY3 > .footer-2aTx0s { 119 | background-color: var(--background-tertiary); 120 | } 121 | 122 | .streamPreview-2-WUWT > .previewContainer-12UlHl { /* Stream Preview */ 123 | background: var(--background-secondary); 124 | } 125 | .streamPreview-2-WUWT > .body-Ogsp8i { 126 | background: var(--background-tertiary); 127 | } 128 | 129 | .uploadModal-2ifh8j { /* Upload Modal */ 130 | background-color: var(--background-primary) !important; 131 | box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 var(--background-secondary) !important; 132 | } 133 | .uploadModal-2ifh8j > .footer-3mqk7D { 134 | background-color: var(--background-tertiary); 135 | box-shadow: inset 0 1px 0 var(--background-secondary); 136 | } 137 | 138 | .wrapperAudio-1jDe0Q, 139 | .attachment-33OFj0 { /* Uploading/Uploaded Files */ 140 | border-color: var(--background-primary) !important; 141 | } 142 | 143 | 144 | /* Dropdowns */ 145 | .css-gvi9bl-control, 146 | .css-6fzn47-control { 147 | border-color: var(--background-tertiary); 148 | } 149 | .css-3vaxre-menu, 150 | .css-dwar6a-menu { 151 | background-color: var(--background-secondary); 152 | box-shadow: var(--background-tertiary) 0px 1px 5px 0px; 153 | border-color: var(--background-tertiary); 154 | } 155 | 156 | 157 | /* User Settings Related */ 158 | .codeRedemptionRedirect-1wVR4b { /* Redeem Code Redirect */ 159 | background-color: var(--background-secondary) !important; 160 | border-color: var(--background-tertiary) !important; 161 | } 162 | 163 | .subscriptionDetails-1dUmjl ~ .featureGrid-3-fNl- > .feature-2w65J5 { /* Features */ 164 | background-color: var(--background-secondary-alt); 165 | } 166 | 167 | .stickerImageSection-7EUs8E { /* Stickers */ 168 | background-color: var(--background-secondary) !important; 169 | } 170 | 171 | .inputSensitivityToggle-2LKb8o > .slider-1PF9SW > .bar-2Qqk5Z.sliderBar-3DezvM:not(.speaking-2bFhO4):not(.microphone-2rtdHw) { /* Automatic Input Sensitivity */ 172 | background-color: var(--background-secondary-alt); 173 | } 174 | 175 | .media-engine-video ~ .previewOverlay-2O7_KC { /* Camera Preview */ 176 | background-color: var(--background-secondary) !important; 177 | border-color: var(--background-tertiary) !important; 178 | } 179 | 180 | .option-n0icdO { /* Overlay Positioning */ 181 | background-color: var(--background-modifier-accent); 182 | } 183 | 184 | .keybindGroup-JQs9x_.card-FDVird::before { /* Keybinds */ 185 | background-color: var(--background-secondary-alt) !important; 186 | border-color: var(--background-secondary) !important; 187 | } 188 | .removeKeybind-39dSFj { 189 | background-color: var(--background-tertiary) !important; 190 | box-shadow: 0 0 0 1px var(--background-secondary), 0 1px 5px 0 rgba(0,0,0,.3) !important; 191 | } 192 | 193 | .activeGame-14JI7o.notDetected-33MY4s { /* Game Acitivty */ 194 | background-color: var(--background-secondary-alt); 195 | } 196 | .game-1ipmAa { 197 | box-shadow: 0 1px 0 0 var(--background-modifier-accent) !important; 198 | } 199 | .game-1ipmAa::before { 200 | background-color: var(--background-secondary-alt) !important; 201 | border-color: var(--background-secondary) !important; 202 | } 203 | .gameName-1RiWHm.gameNameInput-385LoS:hover, 204 | .gameName-1RiWHm.gameNameInput-385LoS:focus { 205 | background-color: var(--background-secondary); 206 | border-color: var(--background-modifier-accent); 207 | } 208 | 209 | .addGamePopout-2RY8Ju { 210 | background-color: var(--background-primary) !important; 211 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2) !important; 212 | } 213 | 214 | .title-3sZWYQ ~ div > .item-3eFBNF { 215 | box-shadow: inset 0 -1px 0 0 var(--background-modifier-accent); 216 | } 217 | .title-3sZWYQ ~ div > .item-3eFBNF.selected-2DeaDa { 218 | background-color: var(--background-modifier-selected); 219 | } 220 | 221 | 222 | /* Server Settings Related */ 223 | .emojiRow-zIc7ZX::before { /* Emojis */ 224 | background-color: var(--background-secondary-alt) !important; 225 | border-color: var(--background-secondary) !important; 226 | } 227 | .emojiInput-1aLNse { 228 | background-color: var(--background-secondary) !important; 229 | border-color: var(--background-modifier-accent) !important; 230 | } 231 | 232 | .default-3oAQTF.emojiRemove-1k6MlJ { 233 | background-color: var(--background-secondary) !important; 234 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 1px 5px 0 rgba(0,0,0,.3) !important; 235 | } 236 | 237 | .auditLog-3jNbM6 { /* Aduit Log */ 238 | border-color: var(--background-modifier-accent) !important; 239 | } 240 | .auditLog-3jNbM6 > .header-GwIGlr { 241 | background-color: var(--background-secondary); 242 | } 243 | .auditLog-3jNbM6 > .headerExpanded-CUEwZ5 { 244 | background-color: var(--background-secondary-alt); 245 | } 246 | .changeDetails-bk98pu { 247 | background-color: var(--background-secondary) !important; 248 | } 249 | 250 | .upsellFooter-ZYsio_ { /* Overview */ 251 | background-color: var(--background-tertiary); 252 | } 253 | 254 | .tierHeaderLocked-1a2opw { /* Boost Status */ 255 | background-color: var(--background-tertiary) !important; 256 | } 257 | .tierBody-x9kBBp { 258 | background-color: var(--background-secondary-alt) !important; 259 | } 260 | 261 | .progressWithSubscriptions-2AEPyo > svg > g > .background-3xPPFc { 262 | color: var(--background-tertiary); 263 | } 264 | .tierInProgress-3mBoXq.tier-2c9-hT { 265 | background-color: var(--background-tertiary); 266 | } 267 | 268 | .member-1q7VfX.card-FDVird::before { /* Members */ 269 | background-color: var(--background-secondary-alt) !important; 270 | border-color: var(--background-secondary) !important; 271 | } 272 | .overflowRolesPopout-140n9i, 273 | .overflowRolesPopoutArrow-2O66oH { 274 | background-color: var(--background-primary) !important; 275 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary) !important; 276 | } 277 | 278 | .membersFilterPopout-URUUD- { 279 | background-color: var(--background-primary) !important; 280 | box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary) !important; 281 | } 282 | .membersFilterPopout-URUUD- > .scroller-2CvAgC > .selectableItem-1MP3MQ:hover { 283 | background-color: var(--background-modifier-selected) !important; 284 | } 285 | 286 | .inviteSettingsInviteRow-3p2O-N.card-FDVird::before { /* Invites */ 287 | background-color: var(--background-secondary-alt) !important; 288 | border-color: var(--background-secondary) !important; 289 | } 290 | 291 | .group-2dAfBy > .box-gRofIO { /* Permissions Changer */ 292 | border-color: var(--background-tertiary) 293 | } 294 | .group-2dAfBy > .passthroughSelected-1Eq0Kl { 295 | background-color: var(--background-modifier-selected); 296 | } 297 | 298 | 299 | /* Message Search and Quickswitcher */ 300 | .searchFilter-2ESiM3, /* Message Search */ 301 | .searchAnswer-3Dz2-q { 302 | background-color: var(--background-secondary-alt) !important; 303 | } 304 | #search-results { 305 | background-color: var(--background-secondary) !important; 306 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 307 | } 308 | #search-results > .focused-2bY0OD { 309 | background-color: var(--background-secondary) !important; 310 | } 311 | .option-96V44q.selected-rZcOL- { 312 | background-color: var(--background-modifier-hover) !important; 313 | } 314 | .option-96V44q::after { 315 | background: transparent !important; 316 | } 317 | .option-96V44q.selected-rZcOL-::after { 318 | background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-secondary-alt) 50%) !important; 319 | } 320 | .option-96V44q.selected-rZcOL-::before { 321 | background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-secondary-alt) 80%) !important; 322 | padding-left: 10px; 323 | } 324 | 325 | .react-datepicker, /* Date Picker */ 326 | .react-datepicker__header { 327 | background-color: var(--background-secondary) !important; 328 | } 329 | .react-datepicker__day:not(:hover):not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month) { 330 | background-color: var(--background-secondary-alt) !important; 331 | } 332 | .react-datepicker__day { 333 | border-color: var(--background-tertiary) !important; 334 | } 335 | .react-datepicker__day--disabled, 336 | .react-datepicker__day--outside-month { 337 | background-color: var(--background-primary) !important; 338 | } 339 | 340 | .quickswitcher-3JagVE { /* Quick Switcher */ 341 | box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 342 | } 343 | .quickswitcher-3JagVE > .input-2VB9rf { 344 | background-color: var(--channeltextarea-background) 345 | } 346 | 347 | 348 | /* Friends Page */ 349 | .peopleColumn-29fq28 { /* Friend Page */ 350 | background-color: var(--background-primary); 351 | } 352 | 353 | .itemCard-v9viV7 > div > .inset-3sAvek { /* Item Cards */ 354 | background-color: var(--background-secondary); 355 | } 356 | .itemCard-v9viV7.active-1xchHY, 357 | .itemCard-v9viV7:hover { 358 | background-color: var(--background-modifier-accent) !important; 359 | } 360 | .popout-38lTFE { 361 | background-color: var(--background-floating) !important; 362 | } 363 | .popout-38lTFE > div > .wrapper-3Rixsz.enabled-1t_Gxm:hover, 364 | .popout-38lTFE > .memberListContainer-13tNU9 > .memberListItem-31QoHj:hover { 365 | background-color: var(--background-modifier-hover); 366 | } 367 | 368 | 369 | /* Guild/Server Related */ 370 | .regionSelectModal-12e-57 { /* Region Selector */ 371 | background-color: var(--background-primary) !important; 372 | box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2) !important; 373 | } 374 | .regionSelectModalOption-2DSIZ3 { 375 | background-color: var(--background-secondary) !important; 376 | border-color: var(--background-secondary-alt) !important; 377 | } 378 | 379 | .perksModal-fSYqOq { /* Server Boost */ 380 | background-color: var(--background-secondary-alt) !important; 381 | color: white; 382 | } 383 | .perksModalContentWrapper-2HU6uL > div > .progressBarWrapper-15RqAy > div > .barBackground-2EEiLw { 384 | background: var(--background-tertiary); 385 | } 386 | .tierMarkerBackground-3q29am { 387 | background: var(--background-secondary-alt) !important; 388 | } 389 | .tierMarkerInProgress-24LMzJ { 390 | background: var(--background-tertiary) !important; 391 | } 392 | 393 | .tierHeaderLocked-1s2JJz { 394 | background-color: var(--background-tertiary) !important; 395 | } 396 | .tierIcon-2qSKGj > path, 397 | .tierLock-3CSxSX > path, 398 | .tierTitle-y7BLPl, 399 | .tierRequirements-dGesMA { 400 | color: white; 401 | fill: white !important; 402 | } 403 | .tierBody-16Chc9 { 404 | background-color: var(--background-secondary) !important; 405 | } 406 | .perks-3OsGy8 > .perk-2WeBWW { 407 | background-color: var(--background-tertiary) !important; 408 | } 409 | 410 | .applicationStore-1pNvnv > .listingWrapper-329f74 > .scroller-1JpcIc { /* Store Pages */ 411 | background-color: var(--background-secondary-alt); 412 | } 413 | .purchaseUnit-2lxci3 > .bodySection-jqkkIP, 414 | .whyYouMightLikeIt-2zZIIj, 415 | .features-_IOqVv > .row-1bU71H { 416 | background-color: var(--background-tertiary) !important; 417 | } 418 | 419 | .pageWrapper-1PgVDX { /* Server Discovery */ 420 | background-color: var(--background-primary) !important; 421 | } 422 | 423 | .css-12hk9yc-control, 424 | .css-1adxh11-control, 425 | .css-ix84ef-menu { 426 | background-color: var(--background-tertiary); 427 | } 428 | 429 | 430 | /* Auotcomplete */ 431 | .autocomplete-1vrmpx { 432 | background-color: var(--background-secondary) !important; 433 | } 434 | .autocompleteRow-2OthDa > .selected-1Tbx07 { 435 | background-color: var(--background-modifier-hover) !important; 436 | } 437 | .autocompleteRowVertical-q1K4ky > .base-1pYU8j > .divider-23swzi { 438 | background-color: var(--background-secondary-alt) !important; 439 | } 440 | 441 | 442 | /* Voice Call Buttons */ 443 | .primaryDark-3mSFDl.button-38aScr { 444 | background-color: var(--background-secondary) !important; 445 | } 446 | .contextMenuNub-3yOOYo.primaryDark-3mSFDl { 447 | background-color: var(--background-secondary) !important; 448 | } 449 | 450 | 451 | /* Unsorted */ 452 | .panels-j1Uci_ > div { /* User Area */ 453 | background-color: var(--background-tertiary); 454 | } 455 | 456 | .invite-18yqGF.container-o3RxSG, 457 | .invite-18yqGF.preview-yX6Nx7 { /* Invites */ 458 | background-color: var(--background-secondary-alt); 459 | border-color: var(--background-secondary); 460 | } 461 | 462 | .lookFilled-1Gx00P.colorPrimary-3b3xI6, 463 | .lookFilled-1Gx00P.colorGrey-2DXtkV { /* Buttons With No Color */ 464 | background-color: var(--background-modifier-accent) !important; 465 | } 466 | 467 | .bar-2Qqk5Z:not(.sliderBar-3DezvM):not([style="background: rgb(105, 196, 154);"]) { /* Slider Bars */ 468 | background-color: var(--background-secondary-alt) !important; 469 | } 470 | 471 | .content-1LAB8Z > .message-2qRu38:not(.cozyMessage-3V1Y8y) { /* Delete Message */ 472 | background-color: var(--background-primary); 473 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2); 474 | } 475 | 476 | .applicationStreamingPreviewSize-3NIvhL, /* Streaming */ 477 | .previewImage-RxVzkZ { 478 | background-color: var(--background-secondary-alt); 479 | } 480 | 481 | .layer-v9HyYc > .animatorTop-2Y7x2r > div > .white-3xi-nx { /* RTC Connection */ 482 | background-color: var(--background-secondary-alt); 483 | } 484 | .layer-v9HyYc > .animatorTop-2Y7x2r > div > section { 485 | background-color: var(--background-primary); 486 | } 487 | 488 | .friend-3KALPe.friendSelected-1sa4bG { /* Friend Selected */ 489 | background-color: var(--background-modifier-selected); 490 | } 491 | 492 | .result-3w1ZcL[style*="background-color: rgb(24, 25, 28);"] { /* Loading Gifs */ 493 | background-color: var(--background-tertiary) !important; 494 | } 495 | 496 | .imageWrapper-2p5ogY.embedWrapper-lXpS3L > .wrapper-2TxpI8 { /* Video Backgrounds */ 497 | background-color: var(--background-tertiary); 498 | } 499 | 500 | .categoryHeader-O1zU94 { /* Slash Command */ 501 | background-color: var(--background-tertiary); 502 | } -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Theme Source", 3 | "description": "A source to simply change Discord's colors.", 4 | "version": "1.0.1", 5 | "author": "LuckFire#4800", 6 | "theme": "index.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /src/_base.scss: -------------------------------------------------------------------------------- 1 | @import './root'; 2 | 3 | @import './application/app-import'; 4 | @import './chat/chat-import'; 5 | @import './modals/modals-import'; 6 | @import './pages/pages-import'; 7 | @import './popouts/popouts-import'; 8 | @import './settings/settings-import'; -------------------------------------------------------------------------------- /src/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // base 3 | --blurple-replace: #7289da; 4 | --background-primary: #36393f; 5 | --background-secondary: #2f3136; 6 | --background-secondary-alt: #292B2F; 7 | --background-tertiary: #202225; 8 | --background-accent: #4f545c; 9 | --background-floating: #18191c; 10 | --userarea-background: var(--background-tertiary); 11 | --header-primary: #fff; 12 | --header-secondary: #b9bbbe; 13 | --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); 14 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); 15 | --channels-default: #8e9297; 16 | --channeltextarea-background: #40444b; 17 | --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 18 | --activity-card-background: #18191C; 19 | 20 | // interactive 21 | --interactive-normal: #b9bbbe; 22 | --interactive-hover: #dcddde; 23 | --interactive-active: #fff; 24 | --interactive-muted: #4f545c; 25 | 26 | // bg modifiers 27 | --background-modifier-hover: rgba(79, 84, 92, 0.16); 28 | --background-modifier-active: rgba(79, 84, 92, 0.24); 29 | --background-modifier-selected: rgba(79, 84, 92, 0.32); 30 | --background-modifier-accent: hsla(0, 0%, 100%, 0.06); 31 | 32 | // text 33 | --text-link: #00b0f4; 34 | --text-normal: #dcddde; 35 | --text-muted: #72767d; 36 | 37 | // deprecated - old, unused stuffs 38 | --deprecated-panel-background: #292b2f; 39 | --deprecated-card-bg: rgba(32, 34, 37, 0.6); 40 | --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3); 41 | --deprecated-store-bg: #36393f; 42 | --deprecated-quickswitcher-input-background: #72767d; 43 | --deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3); 44 | --deprecated-text-input-bg: rgba(0, 0, 0, 0.1); 45 | --deprecated-text-input-border: rgba(0, 0, 0, 0.3); 46 | --deprecated-text-input-border-hover: #040405; 47 | --deprecated-text-input-border-disabled: #202225; 48 | --deprecated-text-input-prefix: #dcddde; 49 | 50 | // scuffed transparency 51 | --background-accent-1: rgb(80, 85, 94, 0.1); 52 | --background-accent-3: rgb(80, 85, 94, 0.3); 53 | --background-floating-2: rgba(24, 25, 28, 0.2); 54 | } -------------------------------------------------------------------------------- /src/application/_app-import.scss: -------------------------------------------------------------------------------- 1 | @import './title-bar'; 2 | @import './user-area'; 3 | @import './webkit-scrollbars'; -------------------------------------------------------------------------------- /src/application/_title-bar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .title-3qD0b- { 2 | .searchFilter-2ESiM3, 3 | .searchAnswer-3Dz2-q { 4 | background-color: var(--background-primary); 5 | } 6 | } -------------------------------------------------------------------------------- /src/application/_user-area.scss: -------------------------------------------------------------------------------- 1 | #app-mount .panels-j1Uci_ { 2 | background-color: var(--userarea-background); 3 | } -------------------------------------------------------------------------------- /src/application/_webkit-scrollbars.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .scrollerBase-289Jih { 3 | &.disableScrollAnchor-3V9UtP, 4 | &.auto-Ge5KZx { 5 | &::-webkit-scrollbar { 6 | &-thumb { 7 | background-color: var(--background-tertiary); 8 | } 9 | 10 | &-track { 11 | background-color: var(--background-secondary); 12 | } 13 | } 14 | } 15 | 16 | &.thin-1ybCId::-webkit-scrollbar-thumb { 17 | background-color: var(--background-secondary-alt); 18 | } 19 | } 20 | 21 | .rolesList-22qj2L::-webkit-scrollbar-thumb { 22 | background-color: var(--background-tertiary); 23 | 24 | } 25 | } -------------------------------------------------------------------------------- /src/chat/_chat-import.scss: -------------------------------------------------------------------------------- 1 | @import './content' -------------------------------------------------------------------------------- /src/chat/_content.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .invite-18yqGF { 3 | background-color: var(--background-secondary-6); 4 | border-color: var(--background-secondary); 5 | } 6 | 7 | .tile-2OwFgW { 8 | background-color: var(--background-tertiary); 9 | 10 | &:hover { 11 | background-color: var(--background-floating); 12 | } 13 | } 14 | 15 | .spoilerText-3p6IlD { 16 | background-color: var(--background-tertiary); 17 | } 18 | } -------------------------------------------------------------------------------- /src/css-compile/ThemeSource-Compiled.css: -------------------------------------------------------------------------------- 1 | #app-mount .title-3qD0b- .searchFilter-2ESiM3, 2 | #app-mount .title-3qD0b- .searchAnswer-3Dz2-q { 3 | background-color: var(--background-primary); 4 | } 5 | 6 | #app-mount .panels-j1Uci_ { 7 | background-color: var(--userarea-background); 8 | } 9 | 10 | #app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-thumb, #app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-thumb { 11 | background-color: var(--background-tertiary); 12 | } 13 | #app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-track, #app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-track { 14 | background-color: var(--background-secondary); 15 | } 16 | #app-mount .scrollerBase-289Jih.thin-1ybCId::-webkit-scrollbar-thumb { 17 | background-color: var(--background-secondary-alt); 18 | } 19 | #app-mount .rolesList-22qj2L::-webkit-scrollbar-thumb { 20 | background-color: var(--background-tertiary); 21 | } 22 | 23 | #app-mount .invite-18yqGF { 24 | background-color: var(--background-secondary-6); 25 | border-color: var(--background-secondary); 26 | } 27 | #app-mount .tile-2OwFgW { 28 | background-color: var(--background-tertiary); 29 | } 30 | #app-mount .tile-2OwFgW:hover { 31 | background-color: var(--background-floating); 32 | } 33 | #app-mount .spoilerText-3p6IlD { 34 | background-color: var(--background-tertiary); 35 | } 36 | 37 | #app-mount .root-1gCeng:not(.popout-103y-5) { 38 | background-color: var(--background-primary); 39 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 40 | } 41 | #app-mount .root-1gCeng:not(.popout-103y-5) .header-1TKi98.separator-2-RRj_ { 42 | box-shadow: 0 1px 0 0 var(--background-tertiary), 0 1px 2px 0 rgba(24, 25, 28, 0.3); 43 | } 44 | #app-mount .root-1gCeng:not(.popout-103y-5) .footer-2gL1pp { 45 | background-color: var(--background-secondary); 46 | box-shadow: inset 0 1px 0 var(--background-tertiary); 47 | } 48 | 49 | :root { 50 | --jcs-background-primary: var(--background-primary); 51 | --jcs-background-secondary: var(--background-secondary); 52 | --jcs-background-secondary-alt: var(--background-secondary-alt); 53 | --jcs-background-tertiary: var(--background-tertiary); 54 | --jcs-text-normal: var(--text-normal); 55 | --jcs-header-primary: var(--header-primary); 56 | --jcs-header-secondary: var(--header-secondary); 57 | --jcs-background-modifier-accent: var(--background-modifier-accent); 58 | --jcs-background-modifier-hover: var(--background-modifier-hover); 59 | --jcs-deprecated-text-input-bg: var(--deprecated-text-input-bg); 60 | --jcs-deprecated-text-input-border: var(--deprecated-text-input-border); 61 | } 62 | 63 | #app-mount .theme-light .root-1gCeng { 64 | background-color: var(--jcs-background-primary); 65 | box-shadow: 0 0 0 1px var(--jcs-background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 66 | } 67 | #app-mount .theme-light .root-1gCeng .colorStandard-2KCXvj { 68 | color: var(--jcs-text-normal); 69 | } 70 | #app-mount .theme-light .root-1gCeng .colorHeaderPrimary-26Jzh- { 71 | color: var(--jcs-header-primary); 72 | } 73 | #app-mount .theme-light .root-1gCeng .colorHeaderSecondary-3Sp3Ft { 74 | color: var(--jcs-header-secondary); 75 | } 76 | #app-mount .theme-light .root-1gCeng .lookBlank-3eh9lL div, 77 | #app-mount .theme-light .root-1gCeng .lookLink-9FtZy- div { 78 | color: var(--jcs-text-normal); 79 | } 80 | #app-mount .theme-light .root-1gCeng .scrollerBase-289Jih::-webkit-scrollbar-thumb { 81 | background-color: var(--jcs-background-secondary-alt); 82 | } 83 | #app-mount .theme-light .root-1gCeng .container-UC8Ug1 { 84 | background-color: var(--jcs-background-primary); 85 | border: 1px solid var(--jcs-background-modifier-accent); 86 | } 87 | #app-mount .theme-light .root-1gCeng .container-UC8Ug1:hover { 88 | background-color: var(--jcs-background-modifier-hover); 89 | border: 1px solid var(--jcs-background-modifier-accent); 90 | } 91 | #app-mount .theme-light .root-1gCeng .inputWrapper-31_8H8.input--jS-j2 { 92 | background-color: var(--jcs-background-tertiary); 93 | border-radius: 3px; 94 | } 95 | #app-mount .theme-light .root-1gCeng .sampleLink-2NLvZg { 96 | color: var(--jcs-header-primary); 97 | } 98 | #app-mount .theme-light .root-1gCeng .input-cIJ7To { 99 | background-color: var(--jcs-deprecated-text-input-bg); 100 | color: var(--jcs-text-normal); 101 | border: 1px solid var(--jcs-deprecated-text-input-border); 102 | } 103 | #app-mount .theme-light .root-1gCeng .footer-2gL1pp { 104 | background-color: var(--jcs-background-secondary); 105 | box-shadow: inset 0 1px 0 var(--jcs-background-tertiary); 106 | } 107 | 108 | #app-mount .keyboardShortcutsModal-3piNz7 { 109 | background-color: var(--background-primary); 110 | } 111 | #app-mount .keyboardShortcutsModal-3piNz7 .modalTitle-37O4n6 { 112 | color: var(--header-primary); 113 | } 114 | #app-mount .keyboardShortcutsModal-3piNz7 .modalSubtitle-1Pj5nv { 115 | color: var(--text-normal); 116 | opacity: 0.8; 117 | } 118 | #app-mount .keyboardShortcutsModal-3piNz7 .keybindGroup--6Qp-w .keybindDescription-2RDbC2 { 119 | color: var(--header-secondary); 120 | opacity: 0.9; 121 | } 122 | 123 | #app-mount .content-1LAB8Z .message-2qRu38 { 124 | background-color: var(--background-primary); 125 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 126 | } 127 | 128 | #app-mount .quickswitcher-3JagVE .input-2VB9rf { 129 | background-color: var(--background-modifier-accent); 130 | } 131 | 132 | #app-mount .container-1If-HZ.root-1gCeng .scroller-1-nKid { 133 | background-color: var(--background-secondary); 134 | } 135 | #app-mount .container-1If-HZ.root-1gCeng .scroller-1-nKid .reactionSelected-1pqISm { 136 | background-color: var(--background-accent-3); 137 | } 138 | #app-mount .container-1If-HZ.root-1gCeng .scroller-1-nKid .reactionDefault-GBA58K:hover { 139 | background-color: var(--background-accent-1); 140 | } 141 | #app-mount .container-1If-HZ.root-1gCeng .reactors-Blmlhw { 142 | background-color: var(--background-primary); 143 | } 144 | #app-mount .container-1If-HZ.root-1gCeng .reactors-Blmlhw .reactor-3UBcOI { 145 | box-shadow: inset 0 -1px 0 var(--background-accent-3); 146 | } 147 | 148 | #app-mount .uploadModal-2ifh8j { 149 | background-color: var(--background-primary); 150 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 151 | } 152 | #app-mount .uploadModal-2ifh8j .footer-3mqk7D { 153 | background-color: var(--background-secondary); 154 | box-shadow: inset 0 1px 0 var(--background-tertiary); 155 | } 156 | 157 | #app-mount .tabBody-3YRQ8W .peopleColumn-29fq28 { 158 | background-color: var(--background-primary); 159 | } 160 | #app-mount .tabBody-3YRQ8W .nowPlayingColumn-2sl4cE .itemCard-v9viV7:hover { 161 | background-color: var(--activity-card-background); 162 | } 163 | #app-mount .tabBody-3YRQ8W .nowPlayingColumn-2sl4cE .itemCard-v9viV7 .body-1ld4H7 { 164 | background-color: var(--background-secondary); 165 | } 166 | 167 | #app-mount .installationPath-3cStrB { 168 | box-shadow: 0 1px 0 0 var(--background-accent); 169 | } 170 | #app-mount .hiddenLibraryApplication-T6N3U1 { 171 | border-bottom-color: var(--background-accent-3); 172 | } 173 | #app-mount .hiddenLibraryApplication-T6N3U1::before { 174 | background-color: var(--background-secondary); 175 | border-color: var(--background-tertiary); 176 | } 177 | 178 | :root { 179 | --stage-background-primary: var(--background-primary); 180 | --stage-background-tertiary: var(--background-tertiary); 181 | --stage-background-floating: var(--background-floating); 182 | } 183 | 184 | #app-mount .callContainer-3UuV6S { 185 | --background-primary: var(--stage-background-primary); 186 | --background-tertiary: var(--stage-background-tertiary); 187 | --background-floating: var(--stage-background-floating); 188 | } 189 | 190 | #app-mount .perksModal-fSYqOq { 191 | background-color: var(--background-primary); 192 | } 193 | #app-mount .perksModal-fSYqOq .tierMarkerBackground-3q29am { 194 | background-color: var(--background-primary); 195 | } 196 | #app-mount .perksModal-fSYqOq .barBackground-2EEiLw, #app-mount .perksModal-fSYqOq .tierMarkerInProgress-24LMzJ { 197 | background-color: var(--background-tertiary); 198 | } 199 | #app-mount .perksModal-fSYqOq .tierHeaderLocked-1s2JJz.tierHeader---JJFb { 200 | background-color: var(--background-floating); 201 | } 202 | #app-mount .perksModal-fSYqOq .tierBody-16Chc9 { 203 | background-color: var(--background-tertiary); 204 | } 205 | #app-mount .perksModal-fSYqOq .perks-3OsGy8 li { 206 | background-color: var(--background-secondary); 207 | } 208 | 209 | #app-mount .applicationStore-1pNvnv .scroller-1JpcIc { 210 | background-color: var(--background-primary); 211 | } 212 | #app-mount .applicationStore-1pNvnv .purchaseUnit-2lxci3 .bodySection-jqkkIP { 213 | background-color: var(--background-tertiary); 214 | } 215 | #app-mount .applicationStore-1pNvnv .purchaseUnit-2lxci3 .label-13UUcd { 216 | color: var(--text-muted); 217 | } 218 | 219 | #app-mount .autocomplete-1vrmpx { 220 | background-color: var(--background-secondary); 221 | } 222 | #app-mount .autocomplete-1vrmpx .categoryHeader-O1zU94 { 223 | background-color: var(--background-secondary); 224 | } 225 | #app-mount .autocomplete-1vrmpx .base-1pYU8j.selected-1Tbx07 { 226 | background-color: var(--background-primary); 227 | } 228 | 229 | #app-mount .css-3vaxre-menu { 230 | background-color: var(--background-secondary); 231 | border-color: var(--background-tertiary); 232 | } 233 | 234 | #app-mount .colorPickerCustom-2CWBn2 { 235 | background-color: var(--background-primary); 236 | border-color: var(--background-tertiary); 237 | } 238 | 239 | #app-mount .calendarPicker-2yf6Ci .react-datepicker { 240 | background-color: var(--background-primary); 241 | } 242 | #app-mount .calendarPicker-2yf6Ci .react-datepicker .react-datepicker__navigation { 243 | border-color: var(--background-floating); 244 | } 245 | #app-mount .calendarPicker-2yf6Ci .react-datepicker .react-datepicker__header { 246 | background-color: var(--background-primary); 247 | border-color: var(--background-floating-2); 248 | } 249 | #app-mount .calendarPicker-2yf6Ci .react-datepicker .react-datepicker__header .react-datepicker__current-month { 250 | border-bottom-color: var(--background-floating-2); 251 | } 252 | #app-mount .calendarPicker-2yf6Ci .react-datepicker .react-datepicker__day { 253 | border-top-color: var(--background-floating); 254 | border-left-color: var(--background-floating); 255 | } 256 | #app-mount .calendarPicker-2yf6Ci .react-datepicker .react-datepicker__day--outside-month, 257 | #app-mount .calendarPicker-2yf6Ci .react-datepicker .react-datepicker__day--disabled { 258 | background-color: var(--background-secondary); 259 | } 260 | 261 | #app-mount .popout-103y-5 { 262 | background-color: var(--background-primary); 263 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 264 | } 265 | #app-mount .popout-103y-5 .friendSelected-1sa4bG { 266 | background-color: var(--background-modifier-selected); 267 | } 268 | 269 | #app-mount .container-3ayLPN#search-results { 270 | background-color: var(--background-secondary); 271 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 272 | } 273 | #app-mount .container-3ayLPN#search-results .focused-2bY0OD { 274 | background-color: var(--background-secondary); 275 | } 276 | #app-mount .container-3ayLPN#search-results .option-96V44q::after { 277 | background: transparent; 278 | } 279 | #app-mount .container-3ayLPN#search-results .option-96V44q.selected-rZcOL- { 280 | background-color: var(--background-tertiary); 281 | } 282 | #app-mount .container-3ayLPN#search-results .option-96V44q.selected-rZcOL-::before { 283 | background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--background-tertiary) 80%); 284 | padding-left: 10px; 285 | } 286 | #app-mount .container-3ayLPN#search-results .option-96V44q.selected-rZcOL-::after { 287 | background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--background-tertiary) 50%); 288 | } 289 | 290 | #app-mount [data-list-id=now-playing-popout] .popout-38lTFE { 291 | background-color: var(--background-floating); 292 | } 293 | #app-mount [data-list-id=now-playing-popout] .popout-38lTFE .memberListHeader-543n-J { 294 | color: var(--header-secondary); 295 | opacity: 0.89; 296 | } 297 | #app-mount [data-list-id=now-playing-popout] .popout-38lTFE .separator-XqIyoz { 298 | background-color: var(--background-modifier-accent); 299 | } 300 | 301 | #app-mount .container-2x5lvQ .header-2C89wJ { 302 | background-color: var(--background-secondary-alt); 303 | } 304 | #app-mount .container-2x5lvQ section { 305 | background-color: var(--background-secondary); 306 | } 307 | 308 | #app-mount .streamPreview-2-WUWT { 309 | background-color: var(--background-tertiary); 310 | } 311 | #app-mount .streamPreview-2-WUWT .previewContainer-12UlHl { 312 | background-color: var(--deprecated-panel-background); 313 | } 314 | 315 | #app-mount .userPopout-3XzG_A { 316 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--background-tertiary); 317 | } 318 | #app-mount .userPopout-3XzG_A .headerNormal-T_seeN { 319 | background-color: var(--background-tertiary); 320 | } 321 | #app-mount .userPopout-3XzG_A .body-3iLsc4 { 322 | background-color: var(--background-secondary); 323 | } 324 | #app-mount .userPopout-3XzG_A .footer-1fjuF6 { 325 | background-color: var(--background-secondary); 326 | border-color: var(--background-tertiary); 327 | } 328 | 329 | #app-mount [aria-label=GUILD_SETTINGS] .inputMini-2xQV9P { 330 | background-color: var(--background-secondary); 331 | } 332 | #app-mount [aria-label=GUILD_SETTINGS] .auditLog-3jNbM6 { 333 | color: var(--text-muted); 334 | border-color: var(--background-tertiary); 335 | } 336 | #app-mount [aria-label=GUILD_SETTINGS] .auditLog-3jNbM6 .headerExpanded-CUEwZ5 { 337 | background-color: var(--background-secondary-alt); 338 | } 339 | #app-mount [aria-label=GUILD_SETTINGS] .auditLog-3jNbM6 .header-GwIGlr:not(.headerExpanded-CUEwZ5), #app-mount [aria-label=GUILD_SETTINGS] .auditLog-3jNbM6 .changeDetails-bk98pu { 340 | background-color: var(--background-secondary); 341 | } 342 | #app-mount [aria-label=GUILD_SETTINGS] .auditLog-3jNbM6 .divider-1pnAR2 { 343 | background-color: var(--background-tertiary); 344 | } 345 | #app-mount [aria-label=GUILD_SETTINGS] .tierHeader-rlkkJd { 346 | background-color: var(--background-tertiary); 347 | } 348 | #app-mount [aria-label=GUILD_SETTINGS] .tierHeader-rlkkJd .tierHeaderContent-2-YfvN { 349 | color: var(--interactive-normal); 350 | } 351 | #app-mount [aria-label=GUILD_SETTINGS] .tierBody-x9kBBp { 352 | background-color: var(--background-secondary); 353 | } 354 | #app-mount [aria-label=GUILD_SETTINGS] .card-FDVird::before { 355 | background-color: var(--background-secondary); 356 | border-color: var(--background-tertiary); 357 | } 358 | #app-mount [aria-label=GUILD_SETTINGS] .elevationHigh-1PneE4 { 359 | background-color: var(--background-tertiary) !important; 360 | } 361 | 362 | #app-mount [aria-label=USER_SETTINGS] .stickerImageSection-7EUs8E { 363 | background-color: var(--background-secondary); 364 | } 365 | #app-mount [aria-label=USER_SETTINGS] .gemIndicatorContainer-2jdECl { 366 | background-color: var(--background-floating); 367 | } 368 | #app-mount [aria-label=USER_SETTINGS] .paymentPane-3bwJ6A { 369 | background-color: var(--background-secondary); 370 | } 371 | #app-mount [aria-label=USER_SETTINGS] .paymentPane-3bwJ6A .paginator-166-09, #app-mount [aria-label=USER_SETTINGS] .paymentPane-3bwJ6A .bottomDivider-1K9Gao { 372 | background-color: var(--background-secondary); 373 | } 374 | #app-mount [aria-label=USER_SETTINGS] .paymentPane-3bwJ6A .bottomDivider-1K9Gao { 375 | border-bottom-color: var(--background-primary); 376 | } 377 | #app-mount [aria-label=USER_SETTINGS] .codeRedemptionRedirect-1wVR4b { 378 | background-color: var(--background-secondary); 379 | border-color: var(--background-tertiary); 380 | } 381 | #app-mount [aria-label=USER_SETTINGS] .previewOverlay-2O7_KC { 382 | background-color: var(--background-secondary); 383 | border-color: var(--background-tertiary); 384 | } 385 | #app-mount [aria-label=USER_SETTINGS] .game-1ipmAa.card-FDVird { 386 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 387 | } 388 | #app-mount [aria-label=USER_SETTINGS] .game-1ipmAa.card-FDVird .removeGame-2JFGPn { 389 | background-color: var(--background-primary); 390 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 1px 5px 0 rgba(0, 0, 0, 0.3); 391 | } 392 | #app-mount [aria-label=USER_SETTINGS] .card-FDVird::before { 393 | background-color: var(--background-secondary); 394 | border-color: var(--background-tertiary); 395 | } -------------------------------------------------------------------------------- /src/css-compile/ThemeSource-Root.css: -------------------------------------------------------------------------------- 1 | @import url('https://luckfire.github.io/theme-source/src/css-compile/ThemeSource-Compiled.css'); 2 | 3 | :root { 4 | /* base */ 5 | --blurple-replace: #7289da; 6 | --background-primary: #36393f; 7 | --background-secondary: #2f3136; 8 | --background-tertiary: #202225; 9 | --background-accent: #4f545c; 10 | --background-floating: #18191c; 11 | --userarea-background: var(--background-tertiary); 12 | --header-primary: #fff; 13 | --header-secondary: #b9bbbe; 14 | --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); 15 | --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); 16 | --channels-default: #8e9297; 17 | --channeltextarea-background: #40444b; 18 | --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 19 | --activity-card-background: #202225; 20 | 21 | /* interactive */ 22 | --interactive-normal: #b9bbbe; 23 | --interactive-hover: #dcddde; 24 | --interactive-active: #fff; 25 | --interactive-muted: #4f545c; 26 | 27 | /* bg modifiers */ 28 | --background-modifier-hover: rgba(79, 84, 92, 0.16); 29 | --background-modifier-active: rgba(79, 84, 92, 0.24); 30 | --background-modifier-selected: rgba(79, 84, 92, 0.32); 31 | --background-modifier-accent: hsla(0, 0%, 100%, 0.06); 32 | 33 | /* text */ 34 | --text-link: #00b0f4; 35 | --text-normal: #dcddde; 36 | --text-muted: #72767d; 37 | 38 | /* deprecated - old, unused stuffs */ 39 | --deprecated-panel-background: #292b2f; 40 | --deprecated-card-bg: rgba(32, 34, 37, 0.6); 41 | --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3); 42 | --deprecated-store-bg: #36393f; 43 | --deprecated-quickswitcher-input-background: #72767d; 44 | --deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3); 45 | --deprecated-text-input-bg: rgba(0, 0, 0, 0.1); 46 | --deprecated-text-input-border: rgba(0, 0, 0, 0.3); 47 | --deprecated-text-input-border-hover: #040405; 48 | --deprecated-text-input-border-disabled: #202225; 49 | --deprecated-text-input-prefix: #dcddde; 50 | 51 | /* scuffed trasnparency */ 52 | --background-accent-1: rgb(80, 85, 94, 0.1); 53 | --background-accent-3: rgb(80, 85, 94, 0.3); 54 | --background-floating-2: rgba(24, 25, 28, 0.2); 55 | } -------------------------------------------------------------------------------- /src/modals/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .root-1gCeng:not(.popout-103y-5) { 3 | background-color: var(--background-primary); 4 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 5 | 6 | .header-1TKi98.separator-2-RRj_ { 7 | box-shadow: 0 1px 0 0 var(--background-tertiary), 0 1px 2px 0 rgba(24, 25, 28, 0.3); 8 | } 9 | 10 | .footer-2gL1pp { 11 | background-color: var(--background-secondary); 12 | box-shadow: inset 0 1px 0 var(--background-tertiary); 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /src/modals/_join-create-server.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --jcs-background-primary: var(--background-primary); 3 | --jcs-background-secondary: var(--background-secondary); 4 | --jcs-background-secondary-alt: var(--background-secondary-alt); 5 | --jcs-background-tertiary: var(--background-tertiary); 6 | --jcs-text-normal: var(--text-normal); 7 | --jcs-header-primary: var(--header-primary); 8 | --jcs-header-secondary: var(--header-secondary); 9 | --jcs-background-modifier-accent: var(--background-modifier-accent); 10 | --jcs-background-modifier-hover: var(--background-modifier-hover); 11 | --jcs-deprecated-text-input-bg: var(--deprecated-text-input-bg); 12 | --jcs-deprecated-text-input-border: var(--deprecated-text-input-border); 13 | } 14 | 15 | #app-mount .theme-light { 16 | .root-1gCeng { 17 | background-color: var(--jcs-background-primary); 18 | box-shadow: 0 0 0 1px var(--jcs-background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 19 | 20 | .colorStandard-2KCXvj { 21 | color: var(--jcs-text-normal) 22 | } 23 | .colorHeaderPrimary-26Jzh- { 24 | color: var(--jcs-header-primary); 25 | } 26 | .colorHeaderSecondary-3Sp3Ft { 27 | color: var(--jcs-header-secondary); 28 | } 29 | .lookBlank-3eh9lL div, 30 | .lookLink-9FtZy- div { 31 | color: var(--jcs-text-normal); 32 | } 33 | 34 | .scrollerBase-289Jih::-webkit-scrollbar-thumb { 35 | background-color: var(--jcs-background-secondary-alt); 36 | } 37 | 38 | .container-UC8Ug1 { 39 | background-color: var(--jcs-background-primary); 40 | border: 1px solid var(--jcs-background-modifier-accent); 41 | 42 | &:hover { 43 | background-color: var(--jcs-background-modifier-hover);; 44 | border: 1px solid var(--jcs-background-modifier-accent); 45 | } 46 | } 47 | 48 | .inputWrapper-31_8H8.input--jS-j2 { 49 | background-color: var(--jcs-background-tertiary); 50 | border-radius: 3px; 51 | } 52 | .sampleLink-2NLvZg { 53 | color: var(--jcs-header-primary); 54 | } 55 | 56 | .input-cIJ7To { 57 | background-color: var(--jcs-deprecated-text-input-bg); 58 | color: var(--jcs-text-normal); 59 | border: 1px solid var(--jcs-deprecated-text-input-border); 60 | } 61 | 62 | .footer-2gL1pp { 63 | background-color: var(--jcs-background-secondary); 64 | box-shadow: inset 0 1px 0 var(--jcs-background-tertiary); 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /src/modals/_keyboard-combos.scss: -------------------------------------------------------------------------------- 1 | #app-mount .keyboardShortcutsModal-3piNz7 { 2 | background-color: var(--background-primary); 3 | 4 | .modalTitle-37O4n6 { 5 | color: var(--header-primary); 6 | } 7 | 8 | .modalSubtitle-1Pj5nv { 9 | color: var(--text-normal); 10 | opacity: 0.80; 11 | } 12 | 13 | .keybindGroup--6Qp-w { 14 | .keybindDescription-2RDbC2 { 15 | color: var(--header-secondary); 16 | opacity: 0.9; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/modals/_modals-import.scss: -------------------------------------------------------------------------------- 1 | @import './generic'; 2 | @import './join-create-server'; 3 | @import './keyboard-combos'; 4 | @import './msg-delete'; 5 | @import './quick-switcher'; 6 | @import './reactions'; 7 | @import './upload'; -------------------------------------------------------------------------------- /src/modals/_msg-delete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .content-1LAB8Z .message-2qRu38 { 2 | background-color: var(--background-primary); 3 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2); 4 | } -------------------------------------------------------------------------------- /src/modals/_quick-switcher.scss: -------------------------------------------------------------------------------- 1 | #app-mount .quickswitcher-3JagVE { 2 | .input-2VB9rf { 3 | background-color: var(--background-modifier-accent); 4 | } 5 | } -------------------------------------------------------------------------------- /src/modals/_reactions.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-1If-HZ.root-1gCeng { 2 | .scroller-1-nKid { 3 | background-color: var(--background-secondary); 4 | 5 | .reactionSelected-1pqISm { 6 | background-color: var(--background-accent-3); 7 | } 8 | 9 | .reactionDefault-GBA58K:hover{ 10 | background-color: var(--background-accent-1); 11 | } 12 | } 13 | 14 | .reactors-Blmlhw { 15 | background-color: var(--background-primary); 16 | 17 | .reactor-3UBcOI { 18 | box-shadow: inset 0 -1px 0 var(--background-accent-3); 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/modals/_upload.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal-2ifh8j { 2 | background-color: var(--background-primary); 3 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0 ,0, 0, 0.2); 4 | 5 | .footer-3mqk7D { 6 | background-color: var(--background-secondary); 7 | box-shadow: inset 0 1px 0 var(--background-tertiary); 8 | } 9 | } -------------------------------------------------------------------------------- /src/pages/_friends.scss: -------------------------------------------------------------------------------- 1 | #app-mount .tabBody-3YRQ8W { 2 | .peopleColumn-29fq28 { 3 | background-color: var(--background-primary); 4 | } 5 | 6 | .nowPlayingColumn-2sl4cE { 7 | .itemCard-v9viV7 { 8 | &:hover { 9 | background-color: var(--activity-card-background); 10 | } 11 | 12 | .body-1ld4H7 { 13 | background-color: var(--background-secondary); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /src/pages/_library.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .installationPath-3cStrB { 3 | box-shadow: 0 1px 0 0 var(--background-accent); 4 | } 5 | 6 | .hiddenLibraryApplication-T6N3U1 { 7 | border-bottom-color: var(--background-accent-3); 8 | 9 | &::before { 10 | background-color: var(--background-secondary); 11 | border-color: var(--background-tertiary); 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/pages/_pages-import.scss: -------------------------------------------------------------------------------- 1 | @import './friends'; 2 | @import './library'; 3 | @import './stages'; 4 | @import './server-boost'; 5 | @import './store'; -------------------------------------------------------------------------------- /src/pages/_server-boost.scss: -------------------------------------------------------------------------------- 1 | #app-mount .perksModal-fSYqOq { 2 | background-color: var(--background-primary); 3 | 4 | .tierMarkerBackground-3q29am { 5 | background-color: var(--background-primary); 6 | } 7 | 8 | .barBackground-2EEiLw, .tierMarkerInProgress-24LMzJ { 9 | background-color: var(--background-tertiary); 10 | } 11 | 12 | .tierHeaderLocked-1s2JJz.tierHeader---JJFb { 13 | background-color: var(--background-floating); 14 | } 15 | .tierBody-16Chc9 { 16 | background-color: var(--background-tertiary); 17 | } 18 | 19 | .perks-3OsGy8 li { 20 | background-color: var(--background-secondary); 21 | } 22 | } -------------------------------------------------------------------------------- /src/pages/_stages.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --stage-background-primary: var(--background-primary); 3 | --stage-background-tertiary: var(--background-tertiary); 4 | --stage-background-floating: var(--background-floating); 5 | } 6 | 7 | #app-mount .callContainer-3UuV6S { 8 | --background-primary: var(--stage-background-primary); 9 | --background-tertiary: var(--stage-background-tertiary); 10 | --background-floating: var(--stage-background-floating); 11 | } -------------------------------------------------------------------------------- /src/pages/_store.scss: -------------------------------------------------------------------------------- 1 | #app-mount .applicationStore-1pNvnv { 2 | .scroller-1JpcIc { 3 | background-color: var(--background-primary); 4 | } 5 | 6 | .purchaseUnit-2lxci3 { 7 | .bodySection-jqkkIP { 8 | background-color: var(--background-tertiary); 9 | } 10 | 11 | .label-13UUcd { 12 | color: var(--text-muted) 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /src/popouts/_auto-complete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .autocomplete-1vrmpx { 2 | background-color: var(--background-secondary); 3 | 4 | .categoryHeader-O1zU94 { 5 | background-color: var(--background-secondary); 6 | } 7 | 8 | .base-1pYU8j.selected-1Tbx07 { 9 | background-color: var(--background-primary); 10 | } 11 | } -------------------------------------------------------------------------------- /src/popouts/_box-select.scss: -------------------------------------------------------------------------------- 1 | #app-mount .css-3vaxre-menu { 2 | background-color: var(--background-secondary); 3 | border-color: var(--background-tertiary); 4 | } -------------------------------------------------------------------------------- /src/popouts/_color-picker.scss: -------------------------------------------------------------------------------- 1 | #app-mount .colorPickerCustom-2CWBn2 { 2 | background-color: var(--background-primary); 3 | border-color: var(--background-tertiary); 4 | } -------------------------------------------------------------------------------- /src/popouts/_date-picker.scss: -------------------------------------------------------------------------------- 1 | #app-mount .calendarPicker-2yf6Ci .react-datepicker { 2 | background-color: var(--background-primary); 3 | 4 | .react-datepicker__navigation { 5 | border-color: var(--background-floating); 6 | } 7 | 8 | .react-datepicker__header { 9 | background-color: var(--background-primary); 10 | border-color: var(--background-floating-2); 11 | 12 | .react-datepicker__current-month { 13 | border-bottom-color: var(--background-floating-2); 14 | } 15 | } 16 | 17 | .react-datepicker__day { 18 | border-top-color: var(--background-floating); 19 | border-left-color: var(--background-floating); 20 | } 21 | 22 | .react-datepicker__day--outside-month, 23 | .react-datepicker__day--disabled { 24 | background-color: var(--background-secondary); 25 | } 26 | } -------------------------------------------------------------------------------- /src/popouts/_dm-create.scss: -------------------------------------------------------------------------------- 1 | #app-mount .popout-103y-5 { 2 | background-color: var(--background-primary); 3 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 4 | 5 | .friendSelected-1sa4bG { 6 | background-color: var(--background-modifier-selected); 7 | } 8 | } -------------------------------------------------------------------------------- /src/popouts/_message-search.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-3ayLPN#search-results { 2 | background-color: var(--background-secondary); 3 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2); 4 | 5 | .focused-2bY0OD { 6 | background-color: var(--background-secondary); 7 | } 8 | 9 | .option-96V44q { 10 | &::after { 11 | background: transparent; 12 | } 13 | 14 | &.selected-rZcOL- { 15 | background-color: var(--background-tertiary); 16 | 17 | &::before { 18 | background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-tertiary) 80%); 19 | padding-left: 10px; 20 | } 21 | 22 | &::after { 23 | background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-tertiary) 50%); 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /src/popouts/_now-playing.scss: -------------------------------------------------------------------------------- 1 | #app-mount [data-list-id="now-playing-popout"] .popout-38lTFE { 2 | background-color: var(--background-floating); 3 | 4 | .memberListHeader-543n-J { 5 | color: var(--header-secondary); 6 | opacity: 0.89; 7 | } 8 | 9 | .separator-XqIyoz { 10 | background-color: var(--background-modifier-accent); 11 | } 12 | } -------------------------------------------------------------------------------- /src/popouts/_popouts-import.scss: -------------------------------------------------------------------------------- 1 | @import './auto-complete'; 2 | @import './box-select'; 3 | @import './color-picker'; 4 | @import './date-picker'; 5 | @import './dm-create'; 6 | @import './message-search'; 7 | @import './now-playing'; 8 | @import './rtc-connection'; 9 | @import './screensharing'; 10 | @import './user-info'; -------------------------------------------------------------------------------- /src/popouts/_rtc-connection.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-2x5lvQ { 2 | .header-2C89wJ { 3 | background-color: var(--background-secondary-alt); 4 | } 5 | 6 | section { 7 | background-color: var(--background-secondary); 8 | } 9 | } -------------------------------------------------------------------------------- /src/popouts/_screensharing.scss: -------------------------------------------------------------------------------- 1 | #app-mount .streamPreview-2-WUWT { 2 | background-color: var(--background-tertiary); 3 | 4 | .previewContainer-12UlHl { 5 | background-color: var(--deprecated-panel-background); 6 | } 7 | } -------------------------------------------------------------------------------- /src/popouts/_user-info.scss: -------------------------------------------------------------------------------- 1 | #app-mount .userPopout-3XzG_A { 2 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--background-tertiary); 3 | 4 | .headerNormal-T_seeN { 5 | background-color: var(--background-tertiary); 6 | } 7 | 8 | .body-3iLsc4 { 9 | background-color: var(--background-secondary); 10 | } 11 | 12 | .footer-1fjuF6 { 13 | background-color: var(--background-secondary); 14 | border-color: var(--background-tertiary); 15 | } 16 | } -------------------------------------------------------------------------------- /src/settings/_guild.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label="GUILD_SETTINGS"] { 2 | // Emoji 3 | .inputMini-2xQV9P { 4 | background-color: var(--background-secondary); 5 | } 6 | 7 | // Aduit Log 8 | .auditLog-3jNbM6 { 9 | color: var(--text-muted); 10 | border-color: var(--background-tertiary); 11 | 12 | .headerExpanded-CUEwZ5 { 13 | background-color: var(--background-secondary-alt); 14 | } 15 | .header-GwIGlr:not(.headerExpanded-CUEwZ5), .changeDetails-bk98pu { 16 | background-color: var(--background-secondary); 17 | } 18 | .divider-1pnAR2 { 19 | background-color: var(--background-tertiary); 20 | } 21 | } 22 | 23 | // Server Boost Status 24 | .tierHeader-rlkkJd { 25 | background-color: var(--background-tertiary); 26 | 27 | .tierHeaderContent-2-YfvN { 28 | color: var(--interactive-normal); 29 | } 30 | } 31 | .tierBody-x9kBBp { 32 | background-color: var(--background-secondary); 33 | } 34 | 35 | // Cards 36 | .card-FDVird::before { 37 | background-color: var(--background-secondary); 38 | border-color: var(--background-tertiary); 39 | } 40 | 41 | .elevationHigh-1PneE4 { 42 | background-color: var(--background-tertiary) !important; 43 | } 44 | } -------------------------------------------------------------------------------- /src/settings/_settings-import.scss: -------------------------------------------------------------------------------- 1 | @import "./guild"; 2 | @import "./user"; -------------------------------------------------------------------------------- /src/settings/_user.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label="USER_SETTINGS"] { 2 | // Subscriptions 3 | .stickerImageSection-7EUs8E { 4 | background-color: var(--background-secondary); 5 | } 6 | .gemIndicatorContainer-2jdECl { 7 | background-color: var(--background-floating); 8 | } 9 | 10 | // Billing 11 | .paymentPane-3bwJ6A { 12 | background-color: var(--background-secondary); 13 | 14 | .paginator-166-09, .bottomDivider-1K9Gao { 15 | background-color: var(--background-secondary); 16 | } 17 | 18 | .bottomDivider-1K9Gao { 19 | border-bottom-color: var(--background-primary); 20 | } 21 | } 22 | .codeRedemptionRedirect-1wVR4b { 23 | background-color: var(--background-secondary); 24 | border-color: var(--background-tertiary); 25 | } 26 | 27 | // Voice & Video 28 | .previewOverlay-2O7_KC { 29 | background-color: var(--background-secondary); 30 | border-color: var(--background-tertiary); 31 | } 32 | 33 | // Game Activity 34 | .game-1ipmAa.card-FDVird { 35 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 36 | 37 | .removeGame-2JFGPn { 38 | background-color: var(--background-primary); 39 | box-shadow: 0 0 0 1px var(--background-tertiary), 0 1px 5px 0 rgba(0, 0, 0, 0.3); 40 | } 41 | } 42 | 43 | // Cards 44 | .card-FDVird::before { 45 | background-color: var(--background-secondary); 46 | border-color: var(--background-tertiary); 47 | } 48 | } --------------------------------------------------------------------------------