☰

Dark Discord

dark theme discord for browser :)

  1. // ==UserScript==
  2. // @name         Dark Discord
  3. // @version      0.1 
  4. // @namespace    rnss
  5. // @description  dark theme discord for browser :)
  6. // @author       You
  7. // @match        https://discord.com/*
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.     'use strict';
  12.  
  13.     var css = `/* Webkit Scrollers */
  14. .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-thumb,
  15. .auto-Ge5KZx.scrollerBase-289Jih::-webkit-scrollbar-thumb,
  16. .thin-1ybCId.scrollerBase-289Jih::-webkit-scrollbar-thumb {
  17.     background-color: var(--background-secondary-alt) !important;
  18. }
  19. .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-track,
  20. .auto-Ge5KZx.scrollerBase-289Jih::-webkit-scrollbar-track {
  21.     background-color: var(--background-secondary) !important;
  22. }
  23.  
  24.  
  25. .modal-1k91nT.root-1gCeng,
  26. .modalSize-cqUaws.root-1gCeng,
  27. .modalRoot-1Kx4Hb.root-1gCeng,
  28. .main-3auUui.root-1gCeng,
  29. .modalRoot-LW89o7.root-1gCeng,
  30. .modal-yWgWj-.fullscreenOnMobile-1aglG_,
  31. .root-1gCeng.small-3iVZYw,
  32. .root-1gCeng.medium-2RE1hE { /* All Modals */
  33.     background-color: var(--background-primary);
  34.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2);
  35. }
  36. .modal-1k91nT.root-1gCeng > .header-1TKi98 {
  37.     background-color: var(--background-primary);
  38.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2);
  39. }
  40. .modal-1k91nT.root-1gCeng > .footer-1FPmkC,
  41. .modalSize-cqUaws.root-1gCeng > form > .footer-2gL1pp,
  42. .root-1gCeng.small-3iVZYw > form > .footer-2gL1pp,
  43. .modalRoot-1Kx4Hb.root-1gCeng > .footer-2gL1pp,
  44. .modalRoot-LW89o7.root-1gCeng > .footer-2gL1pp,
  45. .modal-yWgWj-.fullscreenOnMobile-1aglG_ > .footer-2gL1pp,
  46. .root-1gCeng.small-3iVZYw > .footer-2gL1pp,
  47. .root-1gCeng.medium-2RE1hE > .footer-2gL1pp,
  48. .root-1gCeng.medium-2RE1hE > .modal-1O3czN > .footer-2gL1pp {
  49.     background-color: var(--background-tertiary);
  50.     box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, .2);
  51. }
  52. .settingsGroup-2NaPKC > .group-2dAfBy > .selectorButton-EEUWed {
  53.     border-color: var(--background-secondary) !important;
  54. }
  55.  
  56. .colorPickerCustom-2CWBn2 { /* Color Picker */
  57.     background-color: var(--background-secondary-alt) !important;
  58.     border-color: var(--background-secondary) !important;
  59. }
  60.  
  61. .emojiPicker-3PwZFl > .inspector-S2gM3e { /* Emoji Picker */
  62.     background-color: var(--background-tertiary);
  63. }
  64. .emptyHintCard-2mUdMe {
  65.     background-color: var(--background-secondary-alt) !important;
  66. }
  67.  
  68. .contentWrapper-3WC1ID { /* Invite Splash */
  69.     background-color: var(--background-secondary-alt) !important;
  70. }
  71.  
  72. .userPopout-3XzG_A { /* User Modal and Popouts */
  73.     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary);
  74. }
  75. .userPopout-3XzG_A > .headerNormal-T_seeN {
  76.     background-color: var(--background-tertiary);
  77. }
  78. .userPopout-3XzG_A > .body-3iLsc4,
  79. .userPopout-3XzG_A > .footer-1fjuF6 {
  80.     background-color: var(--background-secondary);
  81. }
  82.  
  83. .phoneFieldPopout-7PzjOO { /* Add a Phone Number */
  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.  
  88. .regionSelectPopout-p9-0_W { /* Call Region Selector */
  89.     background-color: var(--background-primary) !important;
  90.     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary);
  91. }
  92.  
  93. .container-VSDcQc > .header-2bNvm4 { /* Add Role */
  94.     background-color: var(--background-tertiary) !important;
  95. }
  96. .container-VSDcQc > .autocompleteShadow-iiGWFU {
  97.     background-color: var(--background-primary) !important;
  98.     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary);
  99. }
  100. .container-VSDcQc > .autocompleteArrowWrapper-3Z7OuM > .autocompleteArrow-Zxoy9H {
  101.     background-color: var(--background-primary) !important;
  102.     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary);
  103. }
  104.  
  105. .keyboardShortcutsModal-3piNz7 { /* Keyboard Shortcut */
  106.     background-color: var(--background-primary) !important;
  107.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2);
  108. }
  109. .keyboardShortcutsModal-3piNz7 > .modalSubtitle-1Pj5nv {
  110.     border-bottom: 1px solid var(--background-tertiary) !important;
  111. }
  112. .keybindShortcut-1BD6Z1 > span {
  113.     background-color: var(--background-secondary-alt) !important;
  114.     box-shadow: inset 0 -4px 0 var(--background-secondary) !important;
  115.     border-color: var(--background-tertiary) !important;
  116. }
  117.  
  118. .modal-yWgWj-.fullscreenOnMobile-1aglG_ > .reactors-Blmlhw { /* Reactions */
  119.     background-color: var(--background-primary);
  120. }
  121. .modal-yWgWj-.fullscreenOnMobile-1aglG_ > .scroller-1-nKid {
  122.     background-color: var(--background-tertiary);
  123. }
  124.  
  125. .everyonePopout-nEbJY3 > .body-2iXqIL { /* Mention Everyone Warning */
  126.     box-shadow: 0 2px 10px 0 var(--background-secondary-alt);
  127. }
  128. .everyonePopout-nEbJY3 > .body-2iXqIL {
  129.     background-color: var(--background-primary);
  130. }
  131. .everyonePopout-nEbJY3 > .footer-2aTx0s {
  132.     background-color: var(--background-tertiary);
  133. }
  134.  
  135. .streamPreview-2-WUWT > .previewContainer-12UlHl { /* Stream Preview */
  136.     background: var(--background-secondary);
  137. }
  138. .streamPreview-2-WUWT > .body-Ogsp8i {
  139.     background: var(--background-tertiary);
  140. }
  141.  
  142. .uploadModal-2ifh8j { /* Upload Modal */
  143.     background-color: var(--background-primary) !important;
  144.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 var(--background-secondary) !important;
  145. }
  146. .uploadModal-2ifh8j > .footer-3mqk7D {
  147.     background-color: var(--background-tertiary);
  148.     box-shadow: inset 0 1px 0 var(--background-secondary);
  149. }
  150.  
  151. .wrapperAudio-1jDe0Q,
  152. .attachment-33OFj0 { /* Uploading/Uploaded Files */
  153.     border-color: var(--background-primary) !important;
  154. }
  155.  
  156.  
  157. /* Dropdowns */
  158. .css-gvi9bl-control,
  159. .css-6fzn47-control {
  160.     border-color: var(--background-tertiary);
  161. }
  162. .css-3vaxre-menu,
  163. .css-dwar6a-menu {
  164.     background-color: var(--background-secondary);
  165.     box-shadow: var(--background-tertiary) 0px 1px 5px 0px;
  166.     border-color: var(--background-tertiary);
  167. }
  168.  
  169.  
  170. /* User Settings Related */
  171. .codeRedemptionRedirect-1wVR4b { /* Redeem Code Redirect */
  172.     background-color: var(--background-secondary) !important;
  173.     border-color: var(--background-tertiary) !important;
  174. }
  175.  
  176. .subscriptionDetails-1dUmjl ~ .featureGrid-3-fNl- > .feature-2w65J5 { /* Features */
  177.     background-color: var(--background-secondary-alt);
  178. }
  179.  
  180. .stickerImageSection-7EUs8E { /* Stickers */
  181.     background-color: var(--background-secondary) !important;
  182. }
  183.  
  184. .inputSensitivityToggle-2LKb8o > .slider-1PF9SW > .bar-2Qqk5Z.sliderBar-3DezvM:not(.speaking-2bFhO4):not(.microphone-2rtdHw) { /* Automatic Input Sensitivity */
  185.     background-color: var(--background-secondary-alt);
  186. }
  187.  
  188. .media-engine-video ~ .previewOverlay-2O7_KC { /* Camera Preview */
  189.     background-color: var(--background-secondary) !important;
  190.     border-color: var(--background-tertiary) !important;
  191. }
  192.  
  193. .option-n0icdO { /* Overlay Positioning */
  194.     background-color: var(--background-modifier-accent);
  195. }
  196.  
  197. .keybindGroup-JQs9x_.card-FDVird::before { /* Keybinds */
  198.     background-color: var(--background-secondary-alt) !important;
  199.     border-color: var(--background-secondary) !important;
  200. }
  201. .removeKeybind-39dSFj {
  202.     background-color: var(--background-tertiary) !important;
  203.     box-shadow: 0 0 0 1px var(--background-secondary), 0 1px 5px 0 rgba(0,0,0,.3) !important;
  204. }
  205.  
  206. .activeGame-14JI7o.notDetected-33MY4s { /* Game Acitivty */
  207.     background-color: var(--background-secondary-alt);
  208. }
  209. .game-1ipmAa {
  210.     box-shadow: 0 1px 0 0 var(--background-modifier-accent) !important;
  211. }
  212. .game-1ipmAa::before {
  213.     background-color: var(--background-secondary-alt) !important;
  214.     border-color: var(--background-secondary) !important;
  215. }
  216. .gameName-1RiWHm.gameNameInput-385LoS:hover,
  217. .gameName-1RiWHm.gameNameInput-385LoS:focus {
  218.     background-color: var(--background-secondary);
  219.     border-color: var(--background-modifier-accent);
  220. }
  221.  
  222. .addGamePopout-2RY8Ju {
  223.     background-color: var(--background-primary) !important;
  224.     box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2) !important;
  225. }
  226.  
  227. .title-3sZWYQ ~ div > .item-3eFBNF {
  228.     box-shadow: inset 0 -1px 0 0 var(--background-modifier-accent);
  229. }
  230. .title-3sZWYQ ~ div > .item-3eFBNF.selected-2DeaDa {
  231.     background-color: var(--background-modifier-selected);
  232. }
  233.  
  234.  
  235. /* Server Settings Related */
  236. .emojiRow-zIc7ZX::before { /* Emojis */
  237.     background-color: var(--background-secondary-alt) !important;
  238.     border-color: var(--background-secondary) !important;
  239. }
  240. .emojiInput-1aLNse {
  241.     background-color: var(--background-secondary) !important;
  242.     border-color: var(--background-modifier-accent) !important;
  243. }
  244.  
  245. .default-3oAQTF.emojiRemove-1k6MlJ {
  246.     background-color: var(--background-secondary) !important;
  247.     box-shadow: 0 0 0 1px var(--background-tertiary), 0 1px 5px 0 rgba(0,0,0,.3) !important;
  248. }
  249.  
  250. .auditLog-3jNbM6 { /* Aduit Log */
  251.     border-color: var(--background-modifier-accent) !important;
  252. }
  253. .auditLog-3jNbM6 > .header-GwIGlr {
  254.     background-color: var(--background-secondary);
  255. }
  256. .auditLog-3jNbM6 > .headerExpanded-CUEwZ5 {
  257.     background-color: var(--background-secondary-alt);
  258. }
  259. .changeDetails-bk98pu {
  260.     background-color: var(--background-secondary) !important;
  261. }
  262.  
  263. .upsellFooter-ZYsio_ { /* Overview */
  264.     background-color: var(--background-tertiary);
  265. }
  266.  
  267. .tierHeaderLocked-1a2opw { /* Boost Status */
  268.     background-color: var(--background-tertiary) !important;
  269. }
  270. .tierBody-x9kBBp {
  271.     background-color: var(--background-secondary-alt) !important;
  272. }
  273.  
  274. .progressWithSubscriptions-2AEPyo > svg > g > .background-3xPPFc {
  275.     color: var(--background-tertiary);
  276. }
  277. .tierInProgress-3mBoXq.tier-2c9-hT {
  278.     background-color: var(--background-tertiary);
  279. }
  280.  
  281. .member-1q7VfX.card-FDVird::before { /* Members */
  282.     background-color: var(--background-secondary-alt) !important;
  283.     border-color: var(--background-secondary) !important;
  284. }
  285. .overflowRolesPopout-140n9i,
  286. .overflowRolesPopoutArrow-2O66oH {
  287.     background-color: var(--background-primary) !important;
  288.     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary) !important;
  289. }
  290.  
  291. .membersFilterPopout-URUUD- {
  292.     background-color: var(--background-primary) !important;
  293.     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px var(--background-secondary) !important;
  294. }
  295. .membersFilterPopout-URUUD- > .scroller-2CvAgC > .selectableItem-1MP3MQ:hover {
  296.     background-color: var(--background-modifier-selected) !important;
  297. }
  298.  
  299. .inviteSettingsInviteRow-3p2O-N.card-FDVird::before { /* Invites */
  300.     background-color: var(--background-secondary-alt) !important;
  301.     border-color: var(--background-secondary) !important;
  302. }
  303.  
  304. .group-2dAfBy > .box-gRofIO { /* Permissions Changer */
  305.     border-color: var(--background-tertiary)
  306. }
  307. .group-2dAfBy > .passthroughSelected-1Eq0Kl {
  308.     background-color: var(--background-modifier-selected);
  309. }
  310.  
  311.  
  312. /* Message Search and Quickswitcher */
  313. .searchFilter-2ESiM3, /* Message Search */
  314. .searchAnswer-3Dz2-q {
  315.     background-color: var(--background-secondary-alt) !important;
  316. }
  317. #search-results {
  318.     background-color: var(--background-secondary) !important;
  319.     box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  320. }
  321. #search-results > .focused-2bY0OD {
  322.     background-color: var(--background-secondary) !important;
  323. }
  324. .option-96V44q.selected-rZcOL- {
  325.     background-color: var(--background-modifier-hover) !important;
  326. }
  327. .option-96V44q::after {
  328.     background: transparent !important;
  329. }
  330. .option-96V44q.selected-rZcOL-::after {
  331.     background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-secondary-alt) 50%) !important;
  332. }
  333. .option-96V44q.selected-rZcOL-::before {
  334.     background: linear-gradient(90deg,rgba(0, 0, 0, 0),var(--background-secondary-alt) 80%) !important;
  335.     padding-left: 10px;
  336. }
  337.  
  338. .react-datepicker, /* Date Picker */
  339. .react-datepicker__header {
  340.     background-color: var(--background-secondary) !important;
  341. }
  342. .react-datepicker__day:not(:hover):not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month) {
  343.     background-color: var(--background-secondary-alt) !important;
  344. }
  345. .react-datepicker__day {
  346.     border-color: var(--background-tertiary) !important;
  347. }
  348. .react-datepicker__day--disabled,
  349. .react-datepicker__day--outside-month {
  350.     background-color: var(--background-primary) !important;
  351. }
  352.  
  353. .quickswitcher-3JagVE { /* Quick Switcher */
  354.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  355. }
  356. .quickswitcher-3JagVE > .input-2VB9rf {
  357.     background-color: var(--channeltextarea-background)
  358. }
  359.  
  360.  
  361. /* Friends Page */
  362. .peopleColumn-29fq28 { /* Friend Page */
  363.     background-color: var(--background-primary);
  364. }
  365.  
  366. .itemCard-v9viV7 > div > .inset-3sAvek { /* Item Cards */
  367.     background-color: var(--background-secondary);
  368. }
  369. .itemCard-v9viV7.active-1xchHY,
  370. .itemCard-v9viV7:hover {
  371.     background-color: var(--background-modifier-accent) !important;
  372. }
  373. .popout-38lTFE {
  374.     background-color: var(--background-floating) !important;
  375. }
  376. .popout-38lTFE > div > .wrapper-3Rixsz.enabled-1t_Gxm:hover,
  377. .popout-38lTFE > .memberListContainer-13tNU9 > .memberListItem-31QoHj:hover {
  378.     background-color: var(--background-modifier-hover);
  379. }
  380.  
  381.  
  382. /* Guild/Server Related */
  383. .regionSelectModal-12e-57 { /* Region Selector */
  384.     background-color: var(--background-primary) !important;
  385.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2) !important;
  386. }
  387. .regionSelectModalOption-2DSIZ3 {
  388.     background-color: var(--background-secondary) !important;
  389.     border-color: var(--background-secondary-alt) !important;
  390. }
  391.  
  392. .perksModal-fSYqOq { /* Server Boost */
  393.     background-color: var(--background-secondary-alt) !important;
  394.     color: white;
  395. }
  396. .perksModalContentWrapper-2HU6uL > div > .progressBarWrapper-15RqAy > div > .barBackground-2EEiLw {
  397.     background: var(--background-tertiary);
  398. }
  399. .tierMarkerBackground-3q29am {
  400.     background: var(--background-secondary-alt) !important;
  401. }
  402. .tierMarkerInProgress-24LMzJ {
  403.     background: var(--background-tertiary) !important;
  404. }
  405.  
  406. .tierHeaderLocked-1s2JJz {
  407.     background-color: var(--background-tertiary) !important;
  408. }
  409. .tierIcon-2qSKGj > path,
  410. .tierLock-3CSxSX > path,
  411. .tierTitle-y7BLPl,
  412. .tierRequirements-dGesMA {
  413.     color: white;
  414.     fill: white !important;
  415. }
  416. .tierBody-16Chc9 {
  417.     background-color: var(--background-secondary) !important;
  418. }
  419. .perks-3OsGy8 > .perk-2WeBWW {
  420.     background-color: var(--background-tertiary) !important;
  421. }
  422.  
  423. .applicationStore-1pNvnv > .listingWrapper-329f74 > .scroller-1JpcIc { /* Store Pages */
  424.     background-color: var(--background-secondary-alt);
  425. }
  426. .purchaseUnit-2lxci3 > .bodySection-jqkkIP,
  427. .whyYouMightLikeIt-2zZIIj,
  428. .features-_IOqVv > .row-1bU71H {
  429.     background-color: var(--background-tertiary) !important;
  430. }
  431.  
  432. .pageWrapper-1PgVDX { /* Server Discovery */
  433.     background-color: var(--background-primary) !important;
  434. }
  435.  
  436. .css-12hk9yc-control,
  437. .css-1adxh11-control,
  438. .css-ix84ef-menu {
  439.     background-color: var(--background-tertiary);
  440. }
  441.  
  442.  
  443. /* Auotcomplete */
  444. .autocomplete-1vrmpx {
  445.     background-color: var(--background-secondary) !important;
  446. }
  447. .autocompleteRow-2OthDa > .selected-1Tbx07 {
  448.     background-color: var(--background-modifier-hover) !important;
  449. }
  450. .autocompleteRowVertical-q1K4ky > .base-1pYU8j > .divider-23swzi {
  451.     background-color: var(--background-secondary-alt) !important;
  452. }
  453.  
  454.  
  455. /* Voice Call Buttons */
  456. .primaryDark-3mSFDl.button-38aScr {
  457.     background-color: var(--background-secondary) !important;
  458. }
  459. .contextMenuNub-3yOOYo.primaryDark-3mSFDl {
  460.     background-color: var(--background-secondary) !important;
  461. }
  462.  
  463.  
  464. /* Unsorted */
  465. .panels-j1Uci_ > div { /* User Area */
  466.     background-color: var(--background-tertiary);
  467. }
  468.  
  469. .invite-18yqGF.container-o3RxSG,
  470. .invite-18yqGF.preview-yX6Nx7 { /* Invites */
  471.     background-color: var(--background-secondary-alt);
  472.     border-color: var(--background-secondary);
  473. }
  474.  
  475. .lookFilled-1Gx00P.colorPrimary-3b3xI6,
  476. .lookFilled-1Gx00P.colorGrey-2DXtkV { /* Buttons With No Color */
  477.     background-color: var(--background-modifier-accent) !important;
  478. }
  479.  
  480. .bar-2Qqk5Z:not(.sliderBar-3DezvM):not([style="background: rgb(105, 196, 154);"]) { /* Slider Bars */
  481.     background-color: var(--background-secondary-alt) !important;
  482. }
  483.  
  484. .content-1LAB8Z > .message-2qRu38:not(.cozyMessage-3V1Y8y) { /* Delete Message */
  485.     background-color: var(--background-primary);
  486.     box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2);
  487. }
  488.  
  489. .applicationStreamingPreviewSize-3NIvhL, /* Streaming */
  490. .previewImage-RxVzkZ {
  491.    background-color: var(--background-secondary-alt);
  492. }
  493.  
  494. .layer-v9HyYc > .animatorTop-2Y7x2r > div > .white-3xi-nx { /* RTC Connection */
  495.     background-color: var(--background-secondary-alt);
  496. }
  497. .layer-v9HyYc > .animatorTop-2Y7x2r > div > section {
  498.     background-color: var(--background-primary);
  499. }
  500.  
  501. .friend-3KALPe.friendSelected-1sa4bG { /* Friend Selected */
  502.     background-color: var(--background-modifier-selected);
  503. }
  504.  
  505. .result-3w1ZcL[style*="background-color: rgb(24, 25, 28);"] { /* Loading Gifs */
  506.     background-color: var(--background-tertiary) !important;
  507. }
  508.  
  509. .imageWrapper-2p5ogY.embedWrapper-lXpS3L > .wrapper-2TxpI8 { /* Video Backgrounds */
  510.     background-color: var(--background-tertiary);
  511. }
  512.  
  513. .categoryHeader-O1zU94 { /* Slash Command */
  514.     background-color: var(--background-tertiary);
  515. }
  516. html.theme-dark .theme-light {
  517.     --header-primary: #fff;
  518.     --header-secondary: #b9bbbe;
  519.     --text-normal: #dcddde;
  520.     --background-primary: #141414 !important;
  521.     --background-secondary: #111111 !important;
  522.     --background-secondary-alt: #292929 !important;
  523.     --background-tertiary: black !important;
  524.     --background-modifier-accent: rgb(15, 15, 15) !important;
  525.     --background-modifier-hover: rgb(15, 15, 15) !important;
  526. }
  527. html.theme-dark .theme-light .root-1gCeng {
  528.     background-color: #141414 !important;
  529.     box-shadow: 0 0 0 1px var(--background-secondary), 0 2px 10px 0 rgba(0, 0, 0, .2) !important;
  530. }
  531. html.theme-dark .theme-light .footer-2gL1pp {
  532.     background-color: #0c0c0c !important;
  533.     box-shadow: inset 0 1px 0 var(--background-tertiary) !important;
  534.     color: var(--text-normal) !important;
  535. }
  536. .footerButton-ayFTfX.colorGrey-2DXtkV {
  537.     background-color: #242424 !important;
  538. }
  539.  
  540.  
  541. @keyframes flash {
  542.     100% {
  543.         border-color: white;
  544.         box-shadow: 0 1px 5px rgba(255, 255, 255, 0.452);
  545.     }
  546.     50% {
  547.         border-color: #c21616;
  548.         box-shadow: 0 2px 10px rgba(240, 71, 71, 0.452);
  549.     }
  550.     0% {
  551.         border-color: white;
  552.         box-shadow: 0 1px 5px rgba(255, 255, 255, 0.452);
  553.     }
  554. }
  555.  
  556. .theme-light .layer-3QrUeG:first-of-type::before {
  557.     content: "This theme is intended to be used with Dark Mode. In order to enable it, head to User Settings -> Appearance Tab -> Under THEME, select Dark.";
  558.     z-index: 2;
  559.     background: var(--background-primary);
  560.     color: #fff;
  561.     position: fixed;
  562.     display: block;
  563.     padding: 20px;
  564.     width: 500px;
  565.     height: 35px;
  566.     top: 15%;
  567.     left: 50%;
  568.     transform: translate(-50%, -50%);
  569.     border-radius: 5px;
  570.     box-shadow: 0 2px 10px rgba(240, 71, 71, 0.452);
  571.     border: 3px solid #c21616;
  572. }
  573. .theme-light [aria-label="User Settings"],
  574. .theme-light .sidebar-CFHs9e > .side-8zPYf6 > .item-PXvHYJ:nth-child(20),
  575. .theme-light #user-settings-cog-Appearance,
  576. .theme-light #user-settings-cog-Appearance--theme {
  577.     animation: flash 1s ease infinite;
  578.     box-shadow: 0 1px 5px rgba(240, 71, 71, 0.452);
  579.     border: 2px solid #c21616;
  580. }
  581. .theme-light .preview-2nSL_2 + .marginTop40-i-78cZ > .radioGroup-1GBvlr > .item-26Dhrx:nth-child(1) {
  582.     color: #fff;
  583.     animation: flash 1s ease infinite;
  584.     box-shadow: 0 1px 5px rgba(240, 71, 71, 0.452);
  585. }
  586. .theme-light .preview-2nSL_2 + .marginTop40-i-78cZ > .radioGroup-1GBvlr > .item-26Dhrx:nth-child(1)::before {
  587.     content: "";
  588.     animation: flash 1s ease infinite;
  589.     border: 2px solid #c21616;
  590.     position: absolute;
  591.     height: 100%;
  592.     width: 100%;
  593.     top: 0;
  594.     left: 0;
  595. }
  596.  
  597. /* BD PLUGIN SUPPORT */
  598. #MemberCount{
  599.  background: transparent !important;
  600. }
  601.  
  602. .theme-dark,
  603. .theme-light,
  604. :root {
  605.     --background-primary: #141414 !important;
  606.     --background-secondary: #111111 !important;
  607.     --background-secondary-alt: #292929 !important;
  608.     --background-tertiary: #0c0c0c !important;
  609.     --background-accent: #242424 !important;
  610.     --background-floating: black !important;
  611.     --background-modifier-hover: rgba(255,255,255,0.01) !important;
  612.     --background-modifier-active: rgba(255,255,255,0.03) !important;
  613.     --background-modifier-selected: rgba(255,255,255,0.04) !important;
  614.     --background-modifier-accent: hsla(0,0%,100%,0.06) !important;
  615.     --channeltextarea-background: var(--background-accent) !important;
  616.     --deprecated-card-bg: rgba(0, 0, 0, 0.2) !important;
  617.     --deprecated-card-editable-bg: rgba(0,0,0,0.1) !important;
  618.     --deprecated-text-input-border-disabled: var(--background-tertiary) !important;
  619.     --activity-card-background: var(--background-primary) !important;
  620.     --channels-default: #9f9f9f !important;
  621.     --text-muted: #b6b6b6 !important;
  622.     --text-normal: #fbfbfb !important;
  623.     --interactive-normal: #c8c8c8 !important;
  624.     --interactive-hover: #dcddde !important;
  625.     --interactive-active: #fff !important;
  626.     --interactive-muted: #747474 !important;
  627.     --header-secondary: #c9c9c9 !important;
  628.     --toast-background: var(--background-primary) !important;
  629.     --toast-header: var(--background-tertiary) !important;
  630.     --toast-contents: var(--background-secondary) !important;
  631.     --toast-box-shadow: rgba(0, 0, 0, .2) !important;
  632.     --toast-border: var(--background-tertiary) !important;
  633.     --offline-color: rgb(60, 60, 60) !important;
  634. }
  635.  
  636.  
  637. `,
  638.     head = document.head || document.getElementsByTagName('head')[0],
  639.     style = document.createElement('style');
  640.  
  641. head.appendChild(style);
  642.  
  643. style.type = 'text/css';
  644. if (style.styleSheet){
  645.   // This is required for IE8 and below.
  646.   style.styleSheet.cssText = css;
  647. } else {
  648.   style.appendChild(document.createTextNode(css));
  649. }
  650. })();