Skip to content

Instantly share code, notes, and snippets.

@TheEvilSkeleton
Last active September 12, 2025 22:21
Show Gist options
  • Select an option

  • Save TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db to your computer and use it in GitHub Desktop.

Select an option

Save TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db to your computer and use it in GitHub Desktop.
Make Discord Usable Again
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
/**
* Adds an outline in profile pictures
*/
[class*="scrollerInner_"] img[class*="avatar_"] {
outline: 3px solid var(--search-popout-option-non-text-color);
outline-offset: -2px;
}
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
/**
* Include everything
*/
@import 'https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/remove-annoying-nitro-distractions.css';
@import 'https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/add-outline-in-user-profiles.css';
@import 'https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/scrolled-preformatted-text.css';
@import 'https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/font-improvements.css';
@import 'https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/clamp-width.css';
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
/**
* Sets maximum width of the main contents to 800px
*/
[data-list-id="chat-messages"],
div > main > form,
div[class*="peopleColumn_"] > [class*="searchBar_"],
div[class*="sectionTitle_"],
div[class*="peopleList_"][class*="auto_"][class*="scrollerBase_"] > div,
div[class*="jumpToPresentBar_"],
div[class*="newMessagesBar_"]
{
width: min(800px, 90%);
margin-inline: auto;
}
li[class*="messageListItem_"]:hover > div {
border-radius: var(--radius-sm);
}
div[class*="userPopoutOverlayBackground_"] {
margin-top: 3rem;
}
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
/**
* Use system UI and monospace fonts
*/
html {
--font-primary: system-ui !important;
--font-display: system-ui !important;
--font-headline: system-ui !important;
/* Based on https://tailwindcss.com/docs/font-family */
--font-code:
ui-monospace,
'Adwaita Mono Ligatures',
'Adwaita Mono',
SFMono-Regular,
Menlo,
Monaco,
Consolas,
'Liberation Mono',
'Courier New',
monospace
!important;
}
div[class*="markup_"] code.inline {
font-size: 0.8825em;
}
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
/**
* Remove annoying Nitro distractions
*/
div.custom-user-profile-theme {
background: var(--background-base-lower) !important;
}
[class*="banner_"],
[class*="backgroundImage"] {
background-image: none !important;
}
[data-layer="USER_SETTINGS"] [class*="container_"]:has([class*="bannerImage_"]),
[class*="colorThemesBackground_"],
[class*="selectionGroup_"]:has([class*="tryItOutButtonsV2_"]),
#cash-app-pay-container,
[class*="richTooltipContent_"],
[class*="appAsidePanelWrapper_"] > :not([class*="notAppAsidePanel_"]),
[class*="membersWrap_c8ffbb"] div:not([class]):has([class*="badgesContainer"]),
[class*="membersGroup_"]:has([class*="headerContainer"]),
[class*="channel_"]:has(:is([data-list-item-id*="_nitro"], [data-list-item-id*="_shop"])),
[class*="nameplated__"] > [class*="container__"],
div[class*="wrapper__"]:has([class*="hiddenWhileNotHovered__"]),
div[class*="container_"]:has(> div[class*="artContainer_"]),
div[class*="upsellContainer_"],
div[class*="stormContainer"],
div[class*="upsellOverlayContainer_"],
#message-add-reaction-1,
[aria-label="Send a gift"],
button[class*="shinyButton_"],
[aria-label="Add Super Reaction"],
[aria-label="User Badges"],
button[id="super-reaction-picker-tab"],
button[id="sticker-picker-tab"],
[class*="userPopoutInner"] [class*="wrapper"] [class*="banner"],
[class*="avatarDecoration"],
[mask*="url(#svg-mask-avatar-decoration-status"],
[class*="bannerSVGWrapper"] mask image,
[class*="premiumFeatureBorder_"],
[class*="shopForAllBackgroundImage_"],
[class*="premiumIconWrapper_"],
div[class*="gifTag_"],
div[class*="profileEffects"],
div[class*="channelAppLauncher_"]
{
all: unset !important;
display: none !important;
}
[mask="url(#svg-mask-avatar-decoration-profile-status-square-80)"] {
mask: url("#svg-mask-avatar-status-round-80") !important;
}
[mask="url(#svg-mask-avatar-decoration-profile-status-mobile-square-80)"] {
mask: url("#svg-mask-avatar-status-mobile-80") !important;
}
/* "Add Friend" button */
[class*="lookFilled_"][class*="colorBrand_"] {
background-color: var(--button-filled-brand-background) !important;
border: 1px solid var(--button-filled-brand-border) !important;
color: var(--button-filled-brand-text) !important;
}
[class*="lookFilled_"][class*="colorBrand_"]:hover {
background-color: var(--button-filled-brand-background-hover) !important;
}
[class*="lookFilled_"][class*="colorBrand_"]:focus {
background-color: var(--button-filled-brand-background-active) !important;
}
/*
* Step 1: In the inspector (Ctrl+Shift+I), right click the `html` element,
* and then select "Copy" -> "Copy styles"
*
* Step 2: Paste the text inside a text editor, then search every string matching
* the following regular expression and replace it with nothing:
*
* ^((?!(-profile|-theme)).|.*: \d)*$\n
*
* Step 3: Search every string matching the following regular expression:
*
* :.*
*
* and replace with:
*
* : inherit !important;
*
* Step 4: Finally, paste it inside the following selector:
*
* body * {}
*/
[class*="custom-user-profile-theme"] {
--custom-client-themes-editor-content-width: inherit !important;
--activity-card-background: inherit !important;
--activity-card-icon-overlay: inherit !important;
--app-background-frame: inherit !important;
--app-border-frame: inherit !important;
--app-message-embed-secondary-text: inherit !important;
--autocomplete-bg: inherit !important;
--background-accent: inherit !important;
--background-base-low: inherit !important;
--background-base-lower: inherit !important;
--background-base-lowest: inherit !important;
--background-code: inherit !important;
--background-code-addition: inherit !important;
--background-code-deletion: inherit !important;
--background-feedback-critical: inherit !important;
--background-feedback-info: inherit !important;
--background-feedback-positive: inherit !important;
--background-feedback-warning: inherit !important;
--background-mentioned: inherit !important;
--background-mentioned-hover: inherit !important;
--background-message-automod: inherit !important;
--background-message-automod-hover: inherit !important;
--background-message-highlight: inherit !important;
--background-message-highlight-hover: inherit !important;
--background-message-hover: inherit !important;
--background-mobile-secondary: inherit !important;
--background-nested-floating: inherit !important;
--background-secondary-alt: inherit !important;
--background-surface-high: inherit !important;
--background-surface-higher: inherit !important;
--background-surface-highest: inherit !important;
--background-tile-gradient-pink-end: inherit !important;
--background-tile-gradient-pink-start: inherit !important;
--badge-background-default: inherit !important;
--badge-background-expressive: inherit !important;
--badge-text-default: inherit !important;
--badge-text-expressive: inherit !important;
--bg-backdrop: inherit !important;
--bg-backdrop-immersive: inherit !important;
--bg-backdrop-no-opacity: inherit !important;
--bg-surface-overlay: inherit !important;
--bg-surface-overlay-tmp: inherit !important;
--bg-surface-raised: inherit !important;
--border-faint: inherit !important;
--border-feedback-critical: inherit !important;
--border-normal: inherit !important;
--border-strong: inherit !important;
--border-subtle: inherit !important;
--card-primary-bg: inherit !important;
--card-primary-pressed-bg: inherit !important;
--card-secondary-bg: inherit !important;
--card-secondary-pressed-bg: inherit !important;
--channel-icon: inherit !important;
--channel-text-area-placeholder: inherit !important;
--channels-default: inherit !important;
--channeltextarea-background: inherit !important;
--chat-background: inherit !important;
--chat-background-default: inherit !important;
--chat-border: inherit !important;
--chat-text-muted: inherit !important;
--checkbox-background-checked: inherit !important;
--checkbox-background-default: inherit !important;
--checkbox-border-checked: inherit !important;
--checkbox-border-default: inherit !important;
--content-inventory-media-seekbar-container: inherit !important;
--content-inventory-overlay-text-primary: inherit !important;
--content-inventory-overlay-text-secondary: inherit !important;
--content-inventory-overlay-ui-mod: inherit !important;
--content-inventory-overlay-ui-mod-bg: inherit !important;
--context-menu-backdrop-background: inherit !important;
--control-brand-foreground: inherit !important;
--control-brand-foreground-new: inherit !important;
--creator-revenue-icon-gradient-end: inherit !important;
--creator-revenue-icon-gradient-start: inherit !important;
--creator-revenue-info-box-background: inherit !important;
--creator-revenue-info-box-border: inherit !important;
--creator-revenue-locked-channel-icon: inherit !important;
--creator-revenue-progress-bar: inherit !important;
--deprecated-card-bg: inherit !important;
--deprecated-card-editable-bg: inherit !important;
--deprecated-text-input-bg: inherit !important;
--deprecated-text-input-border: inherit !important;
--deprecated-text-input-border-disabled: inherit !important;
--deprecated-text-input-border-hover: inherit !important;
--divider-strong: inherit !important;
--divider-subtle: inherit !important;
--embed-background: inherit !important;
--embed-background-alternate: inherit !important;
--embed-title: inherit !important;
--experimental-avatar-embed-bg: inherit !important;
--expression-picker-bg: inherit !important;
--expressive-gradient-blue-end: inherit !important;
--expressive-gradient-blue-start: inherit !important;
--expressive-gradient-green-end: inherit !important;
--expressive-gradient-green-start: inherit !important;
--expressive-gradient-nitro-green-end: inherit !important;
--expressive-gradient-nitro-green-start: inherit !important;
--expressive-gradient-nitro-pink-end: inherit !important;
--expressive-gradient-nitro-pink-start: inherit !important;
--expressive-gradient-pink-end: inherit !important;
--expressive-gradient-pink-start: inherit !important;
--expressive-gradient-purple-end: inherit !important;
--expressive-gradient-purple-start: inherit !important;
--focus-primary: inherit !important;
--header-muted: inherit !important;
--header-primary: inherit !important;
--header-secondary: inherit !important;
--home-background: inherit !important;
--icon-default: inherit !important;
--icon-feedback-critical: inherit !important;
--icon-feedback-info: inherit !important;
--icon-feedback-positive: inherit !important;
--icon-feedback-warning: inherit !important;
--icon-invert: inherit !important;
--icon-link: inherit !important;
--icon-muted: inherit !important;
--icon-primary: inherit !important;
--icon-secondary: inherit !important;
--icon-tertiary: inherit !important;
--icon-transparent: inherit !important;
--info-box-background: inherit !important;
--info-danger-foreground: inherit !important;
--info-help-foreground: inherit !important;
--info-positive-background: inherit !important;
--info-positive-foreground: inherit !important;
--info-positive-text: inherit !important;
--info-warning-foreground: inherit !important;
--input-background: inherit !important;
--input-background-critical: inherit !important;
--input-background-default: inherit !important;
--input-border: inherit !important;
--input-border-active: inherit !important;
--input-border-critical: inherit !important;
--input-border-critical-hover: inherit !important;
--input-border-default: inherit !important;
--input-border-default-hover: inherit !important;
--input-border-read-only: inherit !important;
--input-error-background: inherit !important;
--input-error-border: inherit !important;
--input-error-text: inherit !important;
--input-focused-border: inherit !important;
--input-foreground-critical: inherit !important;
--input-foreground-default: inherit !important;
--input-foreground-icon: inherit !important;
--input-foreground-placeholder: inherit !important;
--input-placeholder-text: inherit !important;
--interactive-active: inherit !important;
--interactive-hover: inherit !important;
--interactive-muted: inherit !important;
--interactive-normal: inherit !important;
--leaderboard-league-brand-text: inherit !important;
--live-stage-tile-border: inherit !important;
--logo-primary: inherit !important;
--mention-background: inherit !important;
--mention-foreground: inherit !important;
--menu-item-danger-active-bg: inherit !important;
--menu-item-danger-hover-bg: inherit !important;
--menu-item-default-active-bg: inherit !important;
--menu-item-default-hover-bg: inherit !important;
--message-reacted-background: inherit !important;
--message-reacted-text: inherit !important;
--modal-background: inherit !important;
--modal-footer-background: inherit !important;
--navigator-header-tint: inherit !important;
--notice-background-critical: inherit !important;
--notice-background-info: inherit !important;
--notice-background-positive: inherit !important;
--notice-background-warning: inherit !important;
--notice-text-critical: inherit !important;
--notice-text-info: inherit !important;
--notice-text-positive: inherit !important;
--notice-text-warning: inherit !important;
--overlay-backdrop-default: inherit !important;
--overlay-backdrop-lightbox: inherit !important;
--panel-bg: inherit !important;
--polls-normal-fill-hover: inherit !important;
--polls-normal-image-background: inherit !important;
--polls-victor-fill: inherit !important;
--polls-voted-fill: inherit !important;
--premium-nitro-pink-text: inherit !important;
--profile-gradient-note-background: inherit !important;
--profile-gradient-overlay: inherit !important;
--profile-gradient-overlay-synced-with-user-theme: inherit !important;
--profile-gradient-role-pill-background: inherit !important;
--profile-gradient-role-pill-border: inherit !important;
--profile-gradient-section-box: inherit !important;
--redesign-button-active-background: inherit !important;
--redesign-button-active-pressed-background: inherit !important;
--redesign-button-active-text: inherit !important;
--redesign-button-danger-background: inherit !important;
--redesign-button-danger-pressed-background: inherit !important;
--redesign-button-danger-text: inherit !important;
--redesign-button-destructive-background: inherit !important;
--redesign-button-destructive-pressed-background: inherit !important;
--redesign-button-destructive-text: inherit !important;
--redesign-button-overlay-alpha-background: inherit !important;
--redesign-button-overlay-alpha-pressed-background: inherit !important;
--redesign-button-overlay-alpha-text: inherit !important;
--redesign-button-overlay-background: inherit !important;
--redesign-button-overlay-text: inherit !important;
--redesign-button-positive-background: inherit !important;
--redesign-button-positive-pressed-background: inherit !important;
--redesign-button-positive-text: inherit !important;
--redesign-button-premium-primary-blue-for-gradient: inherit !important;
--redesign-button-premium-primary-pink-for-gradient: inherit !important;
--redesign-button-premium-primary-pressed-background: inherit !important;
--redesign-button-premium-primary-purple-for-gradient: inherit !important;
--redesign-button-premium-primary-purple-for-gradient-2: inherit !important;
--redesign-button-primary-alt-background: inherit !important;
--redesign-button-primary-alt-border: inherit !important;
--redesign-button-primary-alt-on-blurple-background: inherit !important;
--redesign-button-primary-alt-on-blurple-border: inherit !important;
--redesign-button-primary-alt-on-blurple-pressed-background: inherit !important;
--redesign-button-primary-alt-on-blurple-pressed-border: inherit !important;
--redesign-button-primary-alt-on-blurple-text: inherit !important;
--redesign-button-primary-alt-pressed-background: inherit !important;
--redesign-button-primary-alt-pressed-border: inherit !important;
--redesign-button-primary-alt-pressed-text: inherit !important;
--redesign-button-primary-alt-text: inherit !important;
--redesign-button-primary-background: inherit !important;
--redesign-button-primary-on-blurple-pressed-text: inherit !important;
--redesign-button-primary-overlay-background: inherit !important;
--redesign-button-primary-overlay-pressed-background: inherit !important;
--redesign-button-primary-overlay-text: inherit !important;
--redesign-button-primary-pressed-background: inherit !important;
--redesign-button-primary-text: inherit !important;
--redesign-button-secondary-background: inherit !important;
--redesign-button-secondary-border: inherit !important;
--redesign-button-secondary-overlay-background: inherit !important;
--redesign-button-secondary-overlay-pressed-background: inherit !important;
--redesign-button-secondary-overlay-text: inherit !important;
--redesign-button-secondary-pressed-background: inherit !important;
--redesign-button-secondary-pressed-border: inherit !important;
--redesign-button-secondary-text: inherit !important;
--redesign-button-selected-background: inherit !important;
--redesign-button-selected-pressed-background: inherit !important;
--redesign-button-selected-text: inherit !important;
--redesign-button-tertiary-background: inherit !important;
--redesign-button-tertiary-pressed-background: inherit !important;
--redesign-button-tertiary-pressed-text: inherit !important;
--redesign-button-tertiary-text: inherit !important;
--scrim-default: inherit !important;
--scrim-lightbox: inherit !important;
--scrollbar-auto-scrollbar-color-thumb: inherit !important;
--scrollbar-auto-scrollbar-color-track: inherit !important;
--scrollbar-auto-thumb: inherit !important;
--scrollbar-auto-track: inherit !important;
--scrollbar-thin-thumb: inherit !important;
--scrollbar-thin-track: inherit !important;
--spine-default: inherit !important;
--spoiler-hidden-background: inherit !important;
--spoiler-hidden-background-hover: inherit !important;
--spoiler-revealed-background: inherit !important;
--text-brand: inherit !important;
--text-code-addition: inherit !important;
--text-code-builtin: inherit !important;
--text-code-bullet: inherit !important;
--text-code-comment: inherit !important;
--text-code-default: inherit !important;
--text-code-deletion: inherit !important;
--text-code-keyword: inherit !important;
--text-code-section: inherit !important;
--text-code-string: inherit !important;
--text-code-tag: inherit !important;
--text-code-title: inherit !important;
--text-code-variable: inherit !important;
--text-danger: inherit !important;
--text-default: inherit !important;
--text-feedback-critical: inherit !important;
--text-feedback-info: inherit !important;
--text-feedback-positive: inherit !important;
--text-feedback-warning: inherit !important;
--text-invert: inherit !important;
--text-link: inherit !important;
--text-link-low-saturation: inherit !important;
--text-low-contrast: inherit !important;
--text-message-preview-low-sat: inherit !important;
--text-muted: inherit !important;
--text-muted-on-default: inherit !important;
--text-primary: inherit !important;
--text-secondary: inherit !important;
--text-tertiary: inherit !important;
--textbox-markdown-syntax: inherit !important;
--thread-channel-spine: inherit !important;
--user-profile-activity-toolbar-background: inherit !important;
--user-profile-background-hover: inherit !important;
--user-profile-border: inherit !important;
--user-profile-note-background-focus: inherit !important;
--user-profile-overlay-background: inherit !important;
--user-profile-overlay-background-hover: inherit !important;
--user-profile-toolbar-background: inherit !important;
--user-profile-toolbar-border: inherit !important;
--profile-gradient-primary-color: inherit !important;
--profile-gradient-secondary-color: inherit !important;
--profile-gradient-overlay-color: inherit !important;
--profile-gradient-button-color: inherit !important;
--profile-gradient-modal-background-color: inherit !important;
}
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
/**
* Makes preformatted text (codeblocks) scrollable
*/
div[id*="message-content-"] pre div[class*="codeActions_"] {
top: 8px;
right: 8px;
}
div[id*="message-content-"] pre code {
overflow-x: auto;
white-space: pre;
}
@TheEvilSkeleton
Copy link
Author

Reserved

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