Discord Custom CSS

!-discord-custom-css.md

Custom CSS for Discord

This is my personal custom CSS file for Discord Canary/Development that should be used with Chromium Local Overrides, which can be accessed within the Electron client.

• Using custom CSS files may constitute a breach of ToS - I'm not responsible if your Discord account magically disappears one day
• This might break your Discord client - again I'm not responsible if your Discord client breaks or if your computer blows up
• I'm not here to provide support - if you have issues you can put them below but please don't expect a speedy response - use at your own risk
• The Fire Emblem box art is supposed to be there - I think it looks cool

Basically, only use this local CSS file if you know what you're doing.

License

BSD-3 - https://opensource.org/licenses/BSD-3-Clause for the section written by me Proprietary content for all other CSS

custom.css

/* Custom CSS for Discord */
/* aidswidjaja.github.io */

/* Begin CSS Local Overrides */

.peopleColumn-29fq28 {
	background-color: #000000 !important;
	background-image: url('https://i.imgur.com/ICumCaf.png') !important;
    background-position: bottom 10px right 40px !important; 
    background-repeat: no-repeat !important; 
}

.nowPlayingColumn-2sl4cE, .scroller-2ZPeAD, .container-lRFx4q {
    background-color: #0d1117 !important;
}

.container-1r6BKw {
    background-color: #0d1117 !important;
}

.divider-3zoCmA {
   display: none !important;
   margin: 0px 0px 0px 0px !important;
}

.itemCard-v9viV7,.private-1mt6w1, .instructions-O3OCc7{
    background-color: #0d1117 !important;
}

.tabBarItem-1bnCUj {
    margin: 20px;
}

.section-2gLsgF, {
    background-color: #161b22 !important;
}

.itemCard-v9viV7:hover {
    background-color: #1158c7 !important;
}

.section-2gLsgF:hover {
    background-color: #0d419d !important;
}

.children-19S4PO::after {
    display: none;
}

.icon-22AiRD {
    color: #34d058 !important;
}

.button-1ZiXG9, [aria-label="Add Reaction"], [aria-label="Reply"], [aria-label="Edit"], [aria-label="Create thread"], [aria-label="Mark Unread"], [aria-label="Pin Message"], [aria-label="Copy Link"], [aria-label="Copy ID"] {
    color: #34d058 !important;

}
#private-channels {
    background-color: #0d1117 !important;
}

.resultsGroup-r_nuzN {
    background-color: #0d1117 !important;
}

.option-96V44q::after {
    display: none;
}

.headerText-2F0828 {
    color: #ea4a5a;
}

.numberBadge-2s8kKX {
    background-color: #f66a0a !important;
}

.linkButtonIcon-Mlm5d6 {
    color: #34d058; !important;
}

.title-30qZAO {
    color: #ea4a5a !important;
}

.actionButton-uPB8Fs {
    background-color: #0d1117 !important;
}

.header-2SF4Nh {
    display: none;
}

.peopleListItem-2nzedh {
    border: none !important;
}

.searchBar-6Kv8R2 {
    background-color: #0d1117 !important;
}

.scroller-1Bvpku, .macButtons-2MuSAC {
    background-color: #000000 !important;
}

.childWrapper-anI2G9 {
    background-color: #cb2431  !important;
}

.expandedFolderBackground-1cujaW {
    background-color: #000000 !important;
}

.expandedFolderIconWrapper-Huv7rA {
    background-color: #0d1117 !important;
}

.container-3baos1 {
    background-color: #000000 !important;
    height: 64px !important;
}

.title-eS5yk3 {
    color: #bc8cff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 2px;
}

[aria-label="Mute"] {
    color: #58a6ff !important;
}

[aria-label="Deafen"] {
    color: #ffa657 !important;
}

[aria-label="User Settings"] {
    color: #7ee787 !important;
}

.scroller-2LSbBU, .lookFilled-22uAsw, .wrapper-3vR61M, .wrapper-1F5TKx, .scroller-9moviB, .container-24CyRY, .message-1Ng5AR, .body-r6_QPy, .uploadModal-2ifh8j, .form-2fGMdU, .messageContainer-gbhlwo, .contentRegionScroller-26nc1e, .messages-3G3erD, .messageGroupWrapper-o-Zw7G {
    background-color: #161b22 !important;
}

.form-2fGMdU::before {
    display: none;
}

.scroller-3GIiMh,  .threadSidebar-1o3BTy, .scroller-lynW5A, .feature-2w65J5, .container-S9SaVf, .topSection-y3p-_D, .scroller-zPkAnE, .quickswitcher-3JagVE, .userPopout-xaxa6l, .bodyInnerWrapper-26fQXj, .channelName-1JRO3C, .container-2Pjhx-, .footer-3mqk7D, .offline-3nJYBR, .layout-2DM8Md, .scroller-tlc3kG, .channelHeader-3Gd2xq, .messagesPopout-24nkyi, .contentWrapper-SvZHNd, .wrapper-1-Fsb8, .members-1998pB, .header-2V-4Sw, .membersWrap-2h-GB4, .membersGroup-v9BXpm, [aria-label="Members"], [aria-label="Channels"], .layout-2DM8Md, .sidebarRegionScroller-3MXcoP , .member-3-YXUe, .scroller-3BxosC {
    background-color: #0d1117 !important;
} 

.scrollableContainer-2NUZem {
    background-color: #000000 !important;
}


.username-1A8OIy {
    font-weight: 600 !important;
    font-size: 17px !important;
}

.member-3-YXUe {
    margin-left: 0px !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    border-radius: 0px !important;
}

.member-3-YXUe:hover, .layout-2DM8Md:hover, .input-2VB9rf {
    background-color: #161b22 !important;
}

.modeSelected-346R90 {
    background-color: #0d419d !important;
    border-radius: 0px 8px 8px 0px;

}

.wrapper-2jXpOf:hover {
    background-color: #1f6feb !important;
    border-radius: 0px 8px 8px 0px;
}

.item-2hkk8m {
    background-color: #34d058 !important;
}

.avatar-1BDn8e {
    height: 50px !important;
    width: 50px !important;
}

.contents-2mQqc9, .embedWrapper-lXpS3L {
    margin-left: 8px !important;
}

.mentioned-xhSam7 {
    background-color: #101d2b !important;
}

.mentioned-xhSam7::before {
    background-color: #2188ff !important;
}

.membersGroup-v9BXpm {
    color: #cb2431 !important;
}

.offline-3nJYBR {
    opacity: 1 !important;
}

.lookFilled-1Gx00P.colorBrand-3pXr91 {
    background-color: #8957e5	 !important;
}

.embedFull-2tM8-- {
    background: #000000 !important;
}

.grid-1nZz7S, .searchHeader-2XoQg7{
    background-color: #000000 !important;
    border-radius: 8px;
}

.wrapper-35wsBm {
    margin-left: 8px !important;
    background-color: #000000 !important;
}


.wrapper-2aW0bm, .scroller-36cuUh, .submitContainer-g72mF-, .emptyCard-1RJw8n {
    background-color: #0d1117 !important; 
}

a.anchor-3Z-8Bb, .fakeLink-26oLcc {
    color: #34d058 !important;
}

.button-1ZixG9 {
    color: #28a745 !important;
}
.container-1giJp5 {
    background-color: #000000 !important;
}

[aria-label="Noise Suppression powered by Krisp"] {
    color: #ffd33d !important;
}

[aria-label="Disconnect"] {
    color: #ea4a5a !important;
}

.container-2ax-kl {
    color: #cb2431 !important;
}

.content-1o0f9g {
    background: none !important;
}

.timestamp-3ZCmNB {
    font-weight: 600 !important;
    font-size: 13px !important;
}

.customStatusText-1vtUsN {
    font-size: 17px;
    font-weight: 600;
}

.spoilerText-3p6IlD  {
    background-color: #000000 !important;
}

code, .root-1gCeng, .footer-2gL1pp, .footer-3UKYOU {
    background-color: #0d1117 !important;
}

.embedMedia-1guQoW, .imageWrapper-2p5ogY {
    border-radius: 8px;
}

.avatar-3Heyg_, .avatarContainer-2LLZwy {
    width: 32px !important;
    height: 32px !important;
}

.voiceUsers-2V7vuh {
    gap: 15px !important;
    grid-template-columns: repeat(5, 24px) !important;
}
.avatarIconOverlay-2nbU5G {
    width: 24px !important;
    height: 24px !important;
}

.activityPanel-28dQGo{
    background-color: #000000 !important;
}

.container-2Pjhx-:hover {
    background-color: #0d1117 !important;
}

.wrapperAudio-1jDe0Q {
    background-color: #000000 !important;
}

/* End Local CSS Overrides */

I should have used css variables for this but, eh