Make Discord Usable Again

README.md

Make Discord Usable Again

To add on Vencord/Vesktop, copy the permanent URL of your desired CSS files below, and paste them into Settings → Themes → Online Themes.

Permanent links to CSS files:

• all.css: https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/all.css
• add-outline-in-user-profiles.css: https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/add-outline-in-user-profiles.css
• remove-annoying-nitro-distractions.css: https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/remove-annoying-nitro-distractions.css
• clamp-width.css: https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/clamp-width.css
• font-improvements.css: https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/font-improvements.css
• scrolled-preformatted-text.css: https://gist.githubusercontent.com/TheEvilSkeleton/7b8199d66a01a3c6f5b3481fb64ce3db/raw/scrolled-preformatted-text.css

add-outline-in-user-profiles.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/.
 */

 /**
  * Adds an outline in profile pictures
  */

[class*="scrollerInner_"] img[class*="avatar_"] {
    outline: 3px solid var(--search-popout-option-non-text-color);
    outline-offset: -2px;
}

all.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/.
 */

 /**
  * 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';

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;
}

font-improvements.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/.
 */

 /**
  *  Use system UI font, and monospace font (with ligature support)
  */

@import url(https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css);

html {
    --font-primary: system-ui !important;
    --font-display: system-ui !important;
    --font-headline: system-ui !important;
    --font-code: 'Fira Code VF', monospaceui !important;
}

div[class*="markup_"] code.inline {
    font-size: 0.8825em;
}

remove-annoying-nitro-distractions.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/.
 */

 /**
  *  Remove annoying Nitro distractions
  */

#app-mount > div[class*="appAsidePanelWrapper_"] > div[class*="notAppAsidePanel_"] header > svg > foreignObject > div[class*="banner_"],
[class*="bannerPremium_"] {
    background-image: none !important;
}

[class*="custom-profile-theme"],
[class*="custom-user-profile-theme"] {
    /**
     * Copied values of a profile popover/modal from an account that doesn't have Nitro
     */
    --profile-gradient-primary-color: var(--background-secondary-alt) !important;
    --profile-gradient-secondary-color: var(--background-secondary-alt) !important;
    --profile-gradient-overlay-color: rgba(0, 0, 0, 0) !important;
    --profile-gradient-button-color: var(--button-filled-brand-background) !important;
    --profile-avatar-border-color: var(--background-secondary-alt) !important;
    --profile-body-background-color: var(--background-floating) !important;
    --profile-body-background-hover: var(--background-modifier-hover) !important;
    --profile-body-divider-color: var(--background-modifier-accent) !important;
    --profile-body-border-color: var(--border-faint) !important;
    --profile-message-input-border-color: var(--background-modifier-accent) !important;
    --profile-note-background-color: var(--background-tertiary) !important;
    --profile-role-pill-background-color: var(--background-secondary-alt) !important;
    --profile-role-pill-border-color: var(--interactive-normal) !important;

    /**
     * Copied custom properties names of a profile popover/modal from an account that has Nitro
     */
    --theme-base-color-light-hsl: unset !important;
    --theme-base-color-light: unset !important;
    --theme-text-color-light: unset !important;
    --theme-base-color-dark-hsl: unset !important;
    --theme-base-color-dark: unset !important;
    --theme-text-color-dark: unset !important;
    --theme-base-color-amount: unset !important;
    --theme-text-color-amount: unset !important;
}

[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;
}

scrolled-preformatted-text.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/.
 */

 /**
  * 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;
}

Reserved