Skip to content

Instantly share code, notes, and snippets.

@Mijyuoon
Last active October 4, 2021 07:03
Show Gist options
  • Save Mijyuoon/ac1da4aeefc3209b5a62355f4dd4df55 to your computer and use it in GitHub Desktop.
Save Mijyuoon/ac1da4aeefc3209b5a62355f4dd4df55 to your computer and use it in GitHub Desktop.
Custom discord theme
/* -- Hide "Blocked Messages" frames -- */
.messageGroupBlocked-3wrQQX {
display: none !important;
}
/* -- Unfuck font sizes, fuck Discord -- */
.base-1x0h_U,
.title-eS5yk3,
.name-3YKhmS,
.username-1r0gCl,
.username-31C1TQ,
.nameCellText-1mpqtF {
font-weight: 500 !important;
}
.activity-E-0FeD {
font-size: 11px !important;
}
.markup-2BOw-j,
.textArea-2Spzkt,
.placeholder-37qJjk {
font-size: 14px !important;
font-weight: 400 !important;
}
.markup-2BOw-j code {
font-size: 12px !important;
line-height: 14px !important;
font-weight: 400 !important;
}
.username-_4ZSMR {
font-size: 15px !important;
}
.headerCozy-2N9HOL {
height: 20px !important;
}
.textArea-2Spzkt {
line-height: 18px !important;
}
.embedTitle-3OXDkz,
.embedDescription-1Cuq9a,
.embedFieldName-NFrena,
.embedFieldValue-nELq2s {
font-size: 13px !important;
font-weight: 400 !important;
}
.embedAuthorName-3mnTWj,
.embedFooterText-28V_Wb {
font-size: 12px !important;
font-weight: 400 !important;
}
/* -- Reduce context menu padding, fuck Discord -- */
.contextMenu-HLZMGh,
.menu-Sp6bN1 {
padding: 2px 0 !important;
}
.itemBase-tz5SeC,
.item-2J1YMK,
.itemBase-1Qj4z6 {
border-radius: 0 !important;
min-height: 28px !important;
font-size: 14px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* -- Reduce message input box margins -- */
.chat-3bRxxu form {
margin: 0px 10px !important;
}
.channelTextArea-1LDbYG {
margin-bottom: 30px !important;
padding-top: 6px !important;
}
.channelTextArea-rNsIhG {
margin-top: 4px !important;
}
/* -- Bring back blue tooltips -- */
.tooltipBlack-PPG47z {
color: #FFFFFF !important;
background-color: #728ADA !important;
padding: 6px 8px !important;
font-size: 14px !important;
font-weight: normal !important;
}
.tooltipBlack-PPG47z .tooltipPointer-3ZfirK {
border-top-color: #728ADA !important;
}
/* -- Fix for Japanese fonts -- */
/*
body, span, input, textarea, button {
font-family: Whitney,"Helvetica Neue",Helvetica,Arial,"Meiryo UI",sans-serif !important;
}
code, code span,
.codeLine-3qsZPQ span {
font-family: Menlo,Consolas,Monaco,monospace,Meiryo !important;
}
code.inline,
.inlineCode-jPZHTD span {
font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace,Meiryo !important;
}
*/
/* -- Unfuck word wrapping retardation -- */
code[class*="scrollbar-"] {
white-space: pre-wrap !important;
}
/* -- Reduce channel list spacing -- */
/* Stupid class name :( */
.containerDefault-3GGEv_ {
padding-top: 10px !important;
}
/* -- Reduce message group spacing -- */
.messages-3amgkR > .containerCozy-jafyvG {
padding: 6px 0px !important;
margin-bottom: 0 !important;
}
.messages-3amgkR > .containerCozy-jafyvG .divider-32i8lo {
margin: 6px 20px -6px !important;
}
/* -- Adjust spacing of message elements -- */
.messages-3amgkR > .containerCozy-jafyvG .avatar-17mtNa {
margin: -2px 15px 6px !important;
}
.messages-3amgkR > .containerCozy-jafyvG .contentCozy-3XX413 {
margin-left: 70px !important;
}
/* -- Reduce member list spacing -- */
.members-1998pB > .membersGroup-v9BXpm {
height: auto !important;
padding-top: 10px !important;
}
/* -- Reduce padding in file upload dialog -- */
.uploadModal-2ifh8j {
min-height: 240px !important;
}
.uploadModal-2ifh8j .footer-3mqk7D {
padding: 8px !important;
}
.uploadModal-2ifh8j .inner-3nWsbo .comment-4IWttf {
margin: 0 8px !important;
}
.uploadModal-2ifh8j .inner-3nWsbo .channelTextAreaUpload-3t7EIx {
margin-bottom: 0 !important;
}
/* -- Expand emoji picker height -- */
.popouts-2bnG9Z + div:empty + div:empty + div .layer-v9HyYc:only-child .emojiPicker-3m1S-j .scroller-3vODG7,
.popouts-2bnG9Z + div:empty + div:empty + div .layer-v9HyYc:only-child .emojiPicker-3m1S-j .noSearchResultsContainer-3Dee0U {
height: 500px !important;
}
/* -- Enlarge emoji preview icon in picker -- */
.infoBar-U6oBFk {
padding: 6px 10px !important;
}
.infoBar-U6oBFk .infoBarEmoji-3Ab8rZ,
.infoBar-U6oBFk .iconSizeSmaller-2whVAO {
width: 32px !important;
height: 32px !important;
}
/* -- Unfuck round icons -- */
.icon-27yU2q,
.avatar-VxgULZ,
.avatar-3bWpYy,
.avatarHint-1qgaV3,
.avatar-3elDyV,
.avatarDefault-35WC3R,
.avatarSpeaking-1wJCNq,
.container-2td-dC *,
.button-OhfaWu.wrapper-1BJsBx,
.iconInactive-98JN5i,
.avatarWrapperNormal-3wFMbf,
.avatarUploaderInner-3UNxY3,
.systemPad-3UxEGl > .listItem-2P_4kh:first-child .svg-1X37T1 {
border-radius: 15% !important;
}
.mask-3OgeRz,
/* .pointerEvents-2zdfdO, */
/* .mask-1l8v16 > foreignObject, */
.avatarHint-1qgaV3 > foreignObject,
.svg-1X37T1 > foreignObject,
.mask-1qbNWk > foreignObject,
.avatarContainerMasked-PIJ-3L > foreignObject {
mask: none !important;
-webkit-mask: none !important;
}
#app-mount > svg > mask[id^="svg-mask-avatar-"] > circle[fill="white"] {
r: 1.0 !important;
transform: translate(-50%, -50%) scale(2.0) !important;
}
svg.mask-1l8v16 > mask > circle[fill="white"] {
r: 100 !important;
transform: translate(-50%, -50%) scale(2.0) !important;
}
/* -- Add outlines to voice channel avatar chains -- */
.avatarContainer-3CQrif {
background-color: #2E3036 !important;
border: 1px solid #2E3036 !important;
border-radius: 15% !important;
}
.tooltipBlack-PPG47z .avatarContainer-3CQrif {
background-color: #728ADA !important;
border-color: #728ADA !important;
}
/* -- Unfuck role indicators -- */
li[class*="role-"],
button[class*="role-"] {
border-radius: 4px !important;
border-width: 2px !important;
}
div[class*="roleCircle-"],
button[class*="roleCircle-"] {
border-radius: 2px !important;
}
div[class*="roleName-"] {
font-weight: normal !important;
}
/* -- Unfuck mention badge -- */
.numberBadge-2s8kKX {
border-radius: 0 !important;
border: 1px solid black;
}
/* -- Fix bad emoji/text alignment, WTF -- */
.markup-2BOw-j .emoji {
margin: 0 1px !important;
}
/* -- Make status and ping icons look less crap -- */
.numberBadge-2s8kKX {
stroke: black;
stroke-width: 1px;
}
/* -- Unfuck status indicators in profile popup not having colors, thanks discord. -- */
.avatarWrapperNormal-3wFMbf {
background-color: #202225 !important;
}
.header-QKLPzZ .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-online"],
.header-2BwW8b .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-online"] {
fill: #43b581 !important;
}
.header-QKLPzZ .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-idle"],
.header-2BwW8b .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-idle"] {
fill: #faa61a !important;
}
.header-QKLPzZ .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-dnd"],
.header-2BwW8b .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-dnd"] {
fill: #f04747 !important;
}
.header-QKLPzZ .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-offline"],
.header-2BwW8b .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-offline"] {
fill: #747f8d !important;
}
.header-QKLPzZ .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-streaming"],
.header-2BwW8b .pointerEvents-2zdfdO[mask^="url(#svg-mask-status-streaming"] {
fill: #593695 !important;
}
/* -- Adjust blockquote container -- */
.blockquoteContainer-U5TVEi {
margin: 4px !important;
margin-left: 0 !important;
}
.blockquoteContainer-U5TVEi .blockquoteDivider-2hH8H6 {
margin: 0 !important;
width: 8px !important;
border-radius: 3px 0 0 3px !important;
}
.blockquoteContainer-U5TVEi blockquote {
padding: 4px 10px !important;
margin: 0 !important;
border-radius: 3px !important;
border: 1px solid rgba(46,48,54,0.75) !important;
background-color: rgba(46,48,54,0.33) !important;
}
/* -- Fix inconsistent <pre> margins -- */
.markup-2BOw-j pre {
margin: 6px 0 !important;
}
/* -- Prevent dumb stupid tall unicode characters in usernames from overflowing -- */
.headerCozyMeta-rdohGq {
overflow: hidden !important;
line-height: 1.2em !important;
margin-top: -0.15em !important;
}
/* -- Reduce gap between reactions and message text -- */
.reactions-1xb2Ex {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.containerCozy-B4noqO {
margin-bottom: 0px !important;
}
/*.containerCozy-B4noqO:not(:empty) .embed-IeVjo6:last-child,
.containerCozy-B4noqO:not(:empty) .reactions-1xb2Ex:last-child,*/
.containerCozy-B4noqO:not(:empty) > *:not(.reactions-1xb2Ex):last-child {
margin-bottom: 8px !important;
}
/* -- Hide idiotic "Gift Nitro" button from text entry -- */
/* Stupid selector */
.buttons-3JBrkn button[tabindex="2"] {
display: none !important;
}
/* -- Custom Theme™ -- */
.titleBar-AC4pGV,
.layers-3iHuyZ .layer-3QrUeG {
background-color: #444 !important;
/* https://cdn.discordapp.com/attachments/364362377501736961/364411286681026560/795415.png */
/* https://cdn.discordapp.com/attachments/364362377501736961/556165401260851212/UltraNNBV.jpg */
background-image: url("https://cdn.discordapp.com/attachments/364362377501736961/635674374946422805/unknown.png") !important;
background-size: cover !important;
background-blend-mode: multiply !important;
background-position: 0 -50px !important;
}
.typeWindows-1za-n7 {
margin-top: 0 !important;
padding-top: 4px !important;
border-bottom: 1px solid black !important;
}
/* Bullshit */
.root-1BQpZw,
.container-2lgZY8,
.channels-Ie2l6A,
.container-PNkimc,
.wrapper-1Rf91z,
.title-3qD0b-,
.headerBar-UHpsPw,
.channels-wrap,
.channels-wrap > div,
.chat-3bRxxu,
.chat-3bRxxu > .title-wrap,
.chat-3bRxxu > .content-yTz4x3,
.channel-members,
.members-1998pB,
.messagesWrapper-3lZDfY,
.activityFeed-28jde9,
.card-7JP0BX,
.chat-3bRxxu form,
.chat-3bRxxu form *[class*="typing-"],
.privateChannels-1nO12o,
.privateChannels-1nO12o .searchBar-2_Yu-C,
.container-3gCOGc,
.messageGroupBlockedBtn-1PBBh-,
div[class*="noChannel-"],
.gameLibrary-TTDw4Y,
.gameLibrary-TTDw4Y .header-39GIC8,
.gameUpdates-2GPqBU,
.applicationStore-1pNvnv,
.expandedFolderBackground-2sPsd-,
.panels-j1Uci_,
.messages-3amgkR,
.sidebar-2K8pFh,
.scroller-2TZvBN,
.scroller-1JbKMe,
.friendsTableBody-1ZhKif,
.container-1r6BKw.themed-ANHk51,
.scroller-1IIF0A,
.activityFeed-1C0EmJ,
.inner-zqa7da,
.container-1D34oG,
.container-1r6BKw,
.nowPlayingColumn-2sl4cE,
.peopleList-3c4jOR {
background-color: transparent !important;
}
.embedFull-2tM8-- {
background-color: rgba(46,48,54,0.33) !important;
border-top: 1px solid rgba(46,48,54,0.75) !important;
border-right: 1px solid rgba(46,48,54,0.75) !important;
border-bottom: 1px solid rgba(46,48,54,0.75) !important;
border-left-width: 8px !important;
}
.wrapper-35wsBm,
.blockquoteContainer-U5TVEi blockquote {
background-color: rgba(46,48,54,0.33) !important;
border: 1px solid rgba(46,48,54,0.75) !important;
}
.wrapper-1ucjTd.modeSelected-1zApJ_ .content-3at_AU,
.wrapper-1ucjTd.modeSelected-1zApJ_:hover .content-3at_AU,
.selected-aXhQR6 .layout-2DM8Md {
background-color: rgba(79,84,92,0.75) !important;
}
.card-7JP0BX .header-1RC2Wb {
background-color: rgba(79,84,92,0.33) !important;
}
.wrapper-39oAo3,
.searchBar-3dMhjb,
.searchBar-6Kv8R2 .searchBarComponent-32dTOx,
.wrapper-1ucjTd:hover .content-3at_AU,
.clickable-1JJAn8:hover .layout-2DM8Md,
.scrollableContainer-2NUZem,
.emptyCard-1RJw8n {
background-color: rgba(79,84,92,0.5) !important;
}
.inner-MADQqc .button-38aScr {
opacity: 0.5 !important;
}
.inner-MADQqc .button-38aScr:hover {
opacity: 1.0 !important;
}
.reactions-1xb2Ex .reactionBtn-2na4rd {
display: none !important;
}
.wrapper-1Rf91z,
.sidebar-2K8pFh {
border-right: 1px solid rgba(0,0,0,0.20) !important;
}
.container-2Thooq {
border-left: 1px solid rgba(0,0,0,0.20) !important;
}
.sidebar-2K8pFh > div:last-child {
border-top: 1px solid rgba(0,0,0,0.20) !important;
}
.markup-2BOw-j code,
.wrapper-2lTRaf,
/* .folder-21wGz3, */
.circleIconButton-jET_ig,
.actionButton-uPB8Fs,
.hasMore-3e72_v {
background-color: rgba(0,0,0,0.33) !important;
}
.actionButton-uPB8Fs {
transition: color .15s ease-out, background-color .15s ease-out;
}
/* .folder-21wGz3.hover-2ji_A7, */
.circleIconButton-jET_ig.selected-ugP_am,
.actionButton-uPB8Fs:hover {
background-color: rgba(67,181,129,0.33) !important;
}
.circleIconButton-jET_ig,
.actionButton-uPB8Fs,
.wrapper-21YSNc > .listItem-2P_4kh .svg-1X37T1,
.folderIconWrapper-226oVY {
border-radius: 15% !important;
}
.divider-3gKybi span {
border-radius: 6px !important;
}
.markup-2BOw-j code:not(.inline),
.circleIconButton-jET_ig,
.actionButton-uPB8Fs,
.wrapper-21YSNc > .listItem-2P_4kh .svg-1X37T1 {
border: 1px solid black !important;
}
.expandedFolderBackground-2sPsd-.hover-2ji_A7 {
outline: 2px dashed #728ADA !important;
min-height: 48px;
}
.invite-button,
.message-group .embed,
.messageGroupBlocked-3wrQQX,
.has-more > button,
.messages-3amgkR .divider-3gKybi span {
background-color: rgba(0,0,0,0.33) !important;
border-color: #000 !important;
}
/* Stupid class name :( */
div[class*="autocomplete-"] {
background-color: rgba(24,24,28,0.75) !important;
border-color: #000 !important;
}
/* Stupid class name :( */
.theme-brand div[class*="autocomplete-"] {
background-color: #fff !important;
}
.searchAnswer-3Dz2-q,
.searchFilter-2ESiM3 {
background-color: #506098 !important;
}
/* -- Reduce embed content padding -- */
.embedFull-2tM8-- .grid-1nZz7S {
padding: 6px 10px !important;
}
.embedFull-2tM8-- .embedMargin-UO5XwE,
.embedFull-2tM8-- .embedFields-2IPs5Z {
margin-top: 4px !important;
}
.embedFull-2tM8-- .embedMedia-1guQoW {
margin: 8px 0px !important;
}
.embedFull-2tM8-- .grid-1nZz7S > *:not(.embedSuppressButton-1FonMn):first-child,
.embedFull-2tM8-- .grid-1nZz7S > .embedSuppressButton-1FonMn + *:nth-child(2) {
margin-top: 0px !important;
}
/* -- Toolbar adjustments -- */
.container-1r6BKw {
height: 40px !important;
}
.searchBar-3dMhjb {
min-width: 160px !important;
padding: 2px 4px !important;
height: 28px !important;
}
/* -- Reduce padding in user info popup -- */
.headerTop-3C2Zn0 {
padding: 10px !important;
padding-top: 20px !important;
}
/* -- Remove useless shit -- */
.children-19S4PO:after,
.toolbar-1t6TWx > a.anchor-3Z-8Bb {
display: none !important;
}
/* -- Add fancy outlines to spoiler blocks -- */
.spoilerText-3p6IlD:not(.hidden-HHr2R9) {
cursor: text !important;
background-color: transparent !important;
}
.spoilerText-3p6IlD:not(.hidden-HHr2R9) .inlineContent-3ZjPuv {
opacity: 1.0 !important;
}
.spoilerText-3p6IlD:not(.hidden-HHr2R9) .inline-2bgipb {
visibility: visible !important;
}
.spoilerContainer-331r0R:not(.hidden-HHr2R9) .spoiler-1PPAUc {
filter: none !important;
-webkit-filter: none !important;
}
.spoilerText-3p6IlD:not(.hidden-HHr2R9),
.spoilerContainer-331r0R:not(.hidden-HHr2R9) {
border: 1px solid #728ADA !important;
}
.spoilerContainer-331r0R.hidden-HHr2R9 {
border: 1px solid #FF7070 !important;
}
/* -- Fix non-transparent scrollbars and tall textbox on Firefox -- */
.firefoxFixScrollFlex-cnI2ix + .scrollbar-2rkZSL,
.firefoxFixScrollFlex-cnI2ix + .scrollbar-2rkZSL > .pad-29zQak {
background-color: transparent !important;
}
.firefoxFixScrollFlex-cnI2ix,
.scrollbarGhostHairline-1mSOM1 {
scrollbar-color: transparent transparent !important;
}
@Hardikanand1st
Copy link

Thanks but Can i use it in my own theme with your permissions ?

@Mijyuoon
Copy link
Author

Thanks but Can i use it in my own theme with your permissions ?

Most of this is gonna be obsolete and broken by now, but if you care enough to salvage working bits from it I wouldn't mind.

@Hardikanand1st
Copy link

Ok Thanks

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