Flat Dark Discord Theme

discord-custom.css

/*
Flat Dark Theme
		by @katabame#3778

LICENSE: WTFPL
*/
/* Mini Server icons */
.guilds-wrapper {
  width: 60px;
}
.guilds-wrapper .guilds .friends-icon {
  background-size: 25px 23px;
}
.guilds-wrapper .guilds .guild,
.guilds-wrapper .guilds .friends-icon,
.guilds-wrapper .guilds .guild .guild-inner a,
.guilds-wrapper .guilds .guild .avatar-small {
  width: 36px;
  height: 36px;
}
.guilds-wrapper .guilds .guild .avatar-small {
  background-size: 36px 36px;
}
.guilds-wrapper .guilds .guild .guild-inner {
  line-height: 36px;
}
.guilds-wrapper .guilds .guilds-add {
  font-size: 26px;
}
/*
Support Twemoji Plugin
https://gist.github.com/allanf181/5f49b7e5732009b6225624e99045a4ba
*/
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  min-height: 0;
  min-width: 0;
}
/* Remove non usable components */
.footer,
.notes {
  display: none !important;
}
/* Make square */
.avatar-small,
.avatar-large,
.avatar-xxlarge,
.avatar-popout,
.avatar-profile,
.user-popout,
.popout header,
.search-bar,
.member-role,
.bot-tag,
.channel-textarea-inner,
.new-messages-bar,
.markdown-modal,
.changelog-added-secondary,
.embed,
.embed-color-pill,
.tooltip,
.connected-account,
.message-text,
.markup pre,
.upload-modal,
.icon.image,
#user-profile-modal,
.btn-close,
button,
.ui-tab-bar-item.selected,
.ui-tab-bar-item:hover,
.popout-menu,
.ui-checkbox,
.radio-item,
.slider-bar,
.slider-grabber,
.connection,
.connection-header,
.friends-action,
.friends-row:hover,
.tab-bar-item,
.quickswitcher,
.big-input,
.result,
.avatar-uploader-inner,
.avatar-uploader-indicator,
.input,
.user-info-viewing,
img,
.emoji-picker,
.emoji-picker>.header>.search-bar>.search-bar-inner {
  border-radius: 0 !important;
}
/* light dark */
.messages-wrapper,
.divider span,
.chat,
.chat>.content,
.search-bar,
.channel-textarea-inner,
.typing,
#friends,
.friends-header,
.friends-table {
  background-color: #434343 !important;
}
/* heavy dark */
.channel-members,
.ui-scroller-wrap,
.channels-wrap>div,
.upload-modal,
.quickswitcher {
  background-color: #323232 !important;
}
/* black */
.guilds,
.emoji-picker,
.emoji-picker>.header>.search-bar {
  background-color: #212121 !important;
}
/* cool blue */
.user-popout>.header,
.new-messages-bar,
.ui-tab-bar-item.selected,
.radio-item.checked {
  background: #17b !important;
}
/* bright white */
.connected-account,
.emoji-picker>.sticky-header {
  background-color: #f5f5f5 !important;
}
/* remove line */
.upload-modal .inner,
.icon.image,
.radio-item {
  border: none !important;
}
.sprite-item {
  background-repeat: no-repeat !important;
}

discord-custom.styl

/*
Flat Dark Theme
		by @katabame#3778

LICENSE: WTFPL
*/

/* Mini Server icons */
.guilds-wrapper
	width: 60px

.guilds-wrapper .guilds .friends-icon
	background-size: 25px 23px

.guilds-wrapper .guilds .guild,
.guilds-wrapper .guilds .friends-icon,
.guilds-wrapper .guilds .guild .guild-inner a,
.guilds-wrapper .guilds .guild .avatar-small
	width: 36px
	height: 36px

.guilds-wrapper .guilds .guild .avatar-small
	background-size: 36px 36px

.guilds-wrapper .guilds .guild .guild-inner
	line-height: 36px

.guilds-wrapper .guilds .guilds-add
	font-size: 26px

/*
Support Twemoji Plugin
https://gist.github.com/allanf181/5f49b7e5732009b6225624e99045a4ba
*/
img.emoji
	height: 1em
	width: 1em
	margin: 0 .05em 0 .1em
	vertical-align: -0.1em
	min-height: 0
	min-width: 0

/* Remove non usable components */
.footer, .notes
	display: none !important

/* Make square */
.avatar-small, .avatar-large, .avatar-xxlarge, .avatar-popout, .avatar-profile,
.user-popout, .popout header,
.search-bar, .member-role, .bot-tag
.channel-textarea-inner, .new-messages-bar
.markdown-modal, .changelog-added-secondary,
.embed, .embed-color-pill,
.tooltip, .connected-account,
.message-text, .markup pre,
.upload-modal, .icon.image,
#user-profile-modal,
.btn-close, button,
.ui-tab-bar-item.selected, .ui-tab-bar-item:hover,
.popout-menu, .ui-checkbox, .radio-item,
.slider-bar, .slider-grabber, .connection, .connection-header,
.friends-action, .friends-row:hover, .tab-bar-item,
.quickswitcher, .big-input, .result,
.avatar-uploader-inner, .avatar-uploader-indicator, .input,
.user-info-viewing, img, .emoji-picker, .emoji-picker>.header>.search-bar>.search-bar-inner
	border-radius: 0 !important

/* light dark */
.messages-wrapper, .divider span, .chat, .chat>.content,
.search-bar, .channel-textarea-inner, .typing, #friends, .friends-header, .friends-table
	background-color: #434343 !important

/* heavy dark */
.channel-members, .ui-scroller-wrap, .channels-wrap>div, .upload-modal, .quickswitcher
	background-color: #323232 !important

/* black */
.guilds, .emoji-picker, .emoji-picker>.header>.search-bar
	background-color: #212121 !important

/* cool blue */
.user-popout>.header, .new-messages-bar, .ui-tab-bar-item.selected,
.radio-item.checked
	background: #1177bb !important

/* bright white */
.connected-account, .emoji-picker>.sticky-header
	background-color: #f5f5f5 !important

/* remove line */
.upload-modal .inner, .icon.image, .radio-item
	border: none !important

.sprite-item
	background-repeat: no-repeat !important