☰

Discord darker dark mode

Improved dark mode for Discord.

  1. // ==UserScript==
  2. // @name         Discord darker dark mode
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.7
  5. // @description  Improved dark mode for Discord.
  6. // @author       github.com/akuankka128
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. /* jshint esversion: 6 */
  12.  
  13. // console.info("Starting injection script");
  14.  
  15. let d = Date.now();
  16. let injection =
  17. `[class$="comment"] { color: rgba(33,33,33,1) !important; }
  18. [class^="contents-"]>div, [class^="name-"] { color: darkmagenta !important; }
  19. #popout_1>div>div>h4 { background:rgba(0,0,0,0)!important; }
  20. #popout_1>div :nth-child(1) { background:rgba(11,11,11,.85); }
  21. [class^="embedWrapper-"], [class^="grid-"], [class^="searchHeader-"], [class*=categoryWrapper-], div[class^=inspector-], div[class^=container-]>[class*=userSelectNone-] { background-color: rgb(12,12,12) !important; }
  22. [class^="expandedFolderBackground-"], [class^="actionButton-"], [class*="fixClipping-"], #popout_1>div>div[class*=footer-] { background: rgba(11,11,11, .85) !important; }
  23. [class^=option-]::after, [class^="resultsGroup-"] { background: rgb(11,11,11) !important; }
  24. [class^="scrollableContainer-"] { background: rgba(5,5,5, 1) !important; }
  25. [class^="scroller"], [aria-label="User area"], [class^="form"],[class^="form"]::before, [aria-label="Channel header"], [class^="searchBar"], [class^="spacer-"]::after, header[class^="header-"], [class^="uploadModal-"], [class^="userPopout-"] :nth-child(1), [class^="footer-"] { background: rgba(0,0,0, 1) !important; }
  26. [data-ref-id^="messages"] { font-size: .75rem !important; }
  27. [data-ref-id^="private-channels-"], [class^="uploadModal-"] > div[class^="footer-"], [class^="topSectionNormal-"] > div[class] > div[class^="activity-"], [class^="tabBarContainer-"], textarea[maxlength="256"], [class^="drawerSizingWrapper-"]>*, section[class^="container-"] { background: rgba(7,7,7, 1) !important; }
  28. [class^="headerFill-"] { background: rgba(0,0,0,.95) !important; }
  29. code { background: rgba(12,12,12,1) !important; }
  30. body * { font-family: Consolas, Inconsolata !important; }
  31. [class^="searchHeader"] { background: rgba(2,2,2,.95) !important; }
  32. [class^="resultsGroup"] { background: rgba(0,0,0,.75) !important; }
  33. [class^=option]::after { display:none!important }
  34. [class*="botTagRegular-"] { background:rgba(0,0,0,1)!important; }
  35. div[class*="fullscreenOnMobile-"]>div[class*="alignCenter-"], div[class*="fullscreenOnMobile-"]>div[class*="directionRowReverse-"] { background:rgba(0,0,0,.75)!important; }
  36. [class*=slideBody-]>header[class*=header] { color:rgb(230,230,230)!important; }
  37. [class^="autocompleteInner-"] { background:rgba(0,0,0,.71)!important; }
  38. section[class^=title]>[class^=children-]::after { display:none!important; }
  39. [class*=gridItem-] { opacity:0.8!important; }
  40. [class*=gridItem-]>* { background:rgba(0,0,0,.875)!important; }
  41. [class*=channelNotice-] { background:rgba(0,0,0,.9)!important; }
  42. [class*=channelNotice-]>svg { z-Index:999999999!important; }
  43. [class*=channelNotice-]>div {
  44. 	position:absolute!important;
  45. 	translateY(50%)!important;
  46. 	top:0%!important;
  47. }
  48. div[class*=join], div[class*=create] {
  49. 	background-color:rgba(12,12,12,.8);
  50. 	color:rgb(230,230,230);
  51. }`;
  52.  
  53. (function() {
  54. //    console.info("In main function at " + Date.now());
  55.     'use strict';
  56.  
  57.     if(!/.*?(www\.)?discord(app)?\.com\/channels\/(@me|\d{17,19})(\/\d{17,19})?/.test(document.location.href)) return console.info(`Did not match a Discord message channel URL. Stopping execution at: ${Date.now()}, execution time: ${Date.now() - d}ms`);
  58.  
  59. //    console.info("Discord message channel URL detected. Proceeding with injection...");
  60.     let injector = document.createElement('style');
  61.     injector.innerHTML = injection;
  62. //    console.info("Injection tag made, injecting into HTML content...");
  63.  
  64.     document.body.appendChild(injector);
  65. //    console.info(`Injection completed at ${Date.now()}. Total execution time: ${Date.now() - d}ms`);
  66. })();