Skip to content

Instantly share code, notes, and snippets.

@Awlexus
Last active January 30, 2021 11:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Awlexus/0e0a4d703d34e6505233b3a93fdc6c74 to your computer and use it in GitHub Desktop.
Save Awlexus/0e0a4d703d34e6505233b3a93fdc6c74 to your computer and use it in GitHub Desktop.
transparent betterdiscord theme with a nice megumin background
#app-mount {
/* Shinobu */
/* background-image: url("https://www.walldevil.com/wallpapers/a91/shinobu-oshino-bakemonogatari.jpg"); */
/* Megumin */
background-image: url('https://images3.alphacoders.com/704/704387.png');
background-size: cover;
}
/* transparent */
div[class^="layer"], /* Needs to be transparent */
.da-activity > .da-body, /* Currently Playing text*/
.da-category, /* Emoji selector category aka server emojis*/
/*.da-channels, Where the channels are listed */
.da-channels .da-scrollerThemed, /* Discord channels */
.container-2Thooq,.container-2lgZY8, .container-PNkimc,/* Needs to be transparent */
.da-content, /* Messages and member list */
.da-chat, /* Chat and everything to it's right */
.da-flex div[class^="chat"],
.da-headerBar,
.da-markup:not(.da-isMention), /* Message contents */
.da-scroller, /* All Scrollables */
.da-scrollerFade div[class^="scroller-"], /* All Scrollables */
.da-searchBarLight, /* Emoji searchbar */
.da-recentMentionsPopout .da-header, /* Header inside the recent mentions popup */
.da-themedPopout > .da-header, /* Header inside the pinned messages popup, could have sideeffects. Blame discord */
.da-unread, /* Tell you in which direction you can find new, unread messages */
.stop-animation,
.da-wrapper .da-flexChild,
.da-typing,
div[class^="typing"],
#friends
{
background-color: transparent !important;
}
/* Everthing else */
div[class^="contentHoveredText"], /* Channel entry hovered*/
.da-activityFeed,
.applicationStore-1pNvnv, /*.da-applicationStore, */
.gameLibrary-TTDw4Y, /*.da-library, */
.channels-Ie2l6A,
.da-content form, /* Message Textfield */
.da-divider span, /* Divider between days */
.da-gameLibrary,
.guildsWrapper-5TJh6A, /* .da-guildsWrapper, Sidebar where the discord servers are displayed */
.da-members, /* Memberlist */
.da-membersWrap,
.da-messagesWrapper, /* Contains the messages */
.da-noChannel,
.da-recentMentionsPopout .da-messageGroupWrapper, /* Message inside recent mentions */
.da-privateChannels .search-bar,
.da-themedPopout .da-messageGroupWrapper,
.friends-table
{
background-color: RGBA(0, 0, 0, 0.6) !important;
}
/* Appbar */
.da-chat .da-title, /* App bar */
.da-titleWrapper .da-title,
.da-flexChild .da-container,
#friends .da-headerBar {
background-color: RGBA(0, 0, 0, 0.9) !important;
}
/* 0.6 (Popups) */
.da-menu, /* online status popup*/
.da-embedInner, /* Embeds */
.da-emojiPicker, /* Emoji picker */
.da-popout section, /* Popup when modifying roles */
.da-themedPopout /* Mentions popup */
{
background-color: RGBA(0, 0, 0, 0.6) !important;
}
/* 0.7 Darker popups*/
.da-headerNormal, /* User info Popup header*/
.da-headerPlaying, /* User info Popup content*/
.da-userPopout .da-body:not(.da-bodyNormal), /* User info Popup content*/
.da-footer, /* User info Popup footer*/
.da-markup pre, /* Markup */
.da-markup pre code /* Markup */
{
background-color: RGBA(0, 0, 0, 0.7) !important;
}
/* 0.8 (Popup hover, focus, etc.) */
.da-menu .da-item:hover /* online status popup*/
{
background-color: RGBA(0, 0, 0, 0.8) !important;
}
/* Make things brighter */
/* 0.2 */
form .da-innerNoAutocomplete, /* main Textfield */
.da-privateChannels .search-bar .da-searchBarInner,
.da-member .da-content:hover /* Hover over a member inside the memberslist */
{
background-color: RGBA(255, 255, 255, 0.2) !important;
}
/* 0.4 */
.da-footer .da-quickMessage /* Popup Textfield*/
{
background-color: RGBA(255, 255, 255, 0.4) !important;
}
/* Mention fix */
.da-isMentioned /* The whole markup that contains the message */
{
background-color: RGBA(100, 100, 50, 0.7) !important;
}
.da-isMentioned .da-markup .da-mention /* The text that mentioned you. E.g. @You */
{
background-color: RGBA(40, 40, 80, 0.5) !important;
}
/* Fix indent*/
.da-popout header h3 /* Fixes indentation for the textfield where you can search for roles to assign */
{
margin-left: 4.5em;
}
.da-popout .da-scroller /* indents the roles inside the popup where you can assign roles */
{
margin-left: 1em;
}
.friends-table {
margin-top: 0 !important;
padding-top: 8px;
}
/* main textfield container fix*/
.da-content form {
margin: 0 !important;
padding: 0 20px;
}
/* Emoji select buttons */
#bda-qem, /* The container for the emoji tabs */
#bda-qem-emojis, /* pure discord emojis tab/button */
#bda-qem-favourite, /* ... */
#bda-qem-twitch, /* You can already guess it */
#bda-qem-twitch-container, /* Where the twitch emojis are displayed. Might have broken it */
#bda-qem-favourite-container /* Where the favourites are displayed */
{
background-color: RGBA(0, 0, 0, 0.5) !important;
}
/* Emoji select buttons */
#bda-qem > .active /* Active category when selecting an emoji */
{
background-color: black !important;
}
/* Scrollbar */
.theme-dark .messagesWrapper-3lZDfY .scroller-wrap ::-webkit-scrollbar-track-piece,
.bda-dark .emojiPicker-3m1S-j .scroller-3vODG7::-webkit-scrollbar-track-piece
{
border-color: transparent;
background-color: RGBA(50, 50, 50, 0.7);
}
/* Undo border radius */
.da-guildsWrapper,
.da-base {
border-radius: 0;
}
/* Scrollbar tracker*/
.theme-dark .messagesWrapper-3lZDfY .scroller-wrap ::-webkit-scrollbar-thumb {
border-color: RGBA(255, 255, 255, 0.0);
background-color: RGBA(20, 20, 20, 0.7);
}
.stickyHeader-1pqx0j, /* .da-stickyHeader, Sticky header that tells you the current servers for the emojis */
.da-messageGroupBlocked
{
display: none !important;
}
div[class*="innerNoAutocomplete-"] {
background-color: rgba(114,118,125,.15) !important;
}
.guilds {
background: red !important;
}
/* Custom app headers */
/* Spotify */
.headerSpotify-zpWxgT {
background-color: RGBA(29, 185, 84, 0.8) !important;
}
/* Xbox */
.headerXbox-3G-4PF {
background-color: rgba(16, 124, 16, 0.8);
}
.headerXbox-3G-4PF .da-activity .da-body {
background-color: transparent !important;
}
@discordosource
Copy link

how tf do u download

@marcustut
Copy link

doesnt work

@Skillessplyr
Copy link

It works fine you just have to input it as custom css, you can do it with any

@Awlexus
Copy link
Author

Awlexus commented Jan 30, 2021

Discord changes their layout all the time, so it would not surprise me if the layout only works partially, if at all. It has been over a year since I've updated this, but I don't use BD nowadays

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment