Skip to content

Discord Prettification by LukesterWad

Details

AuthorLukesterWad

LicenseGPL-3.0-or-later

Categorydiscord.com

Created

Updated

Size8.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Discord style improvements. This is colour matched to my other configs, so it may seem like an odd palette.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           6/8/2023, 7:47:24 AM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("discord.com") {
    .theme-dark {        
        --custom-color-error: 30 100% 50%;
        --custom-color-white: 0 0% 100%;
        --custom-color-middle-grey: 245 9% 35%;
        --custom-color-light-grey: 245 9% 75%;
        --custom-color-background-primary: 0 0% 33%;
        --background-primary: #42414d;
        --background-secondary: #2b2a33;
        --background-secondary-alt: #2b2a33;
        --background-tertiary: #1c1b22;
        --primary-100-hsl: var(--custom-color-white); /* keyboard symbols */
        --primary-130-hsl: var(--custom-color-white); /* usernames and highlights */
        --primary-160-hsl: var(--custom-color-error);
        --primary-200-hsl: var(--custom-color-middle-grey); /* profile circle buttons */
        --primary-230-hsl: var(--custom-color-light-grey); /* message text */
        --primary-260-hsl: var(--custom-color-error);
        --primary-300-hsl: var(--custom-color-error);
        --primary-330-hsl: var(--custom-color-light-grey); /* action buttons */
        --primary-345-hsl: var(--custom-color-error);
        --primary-360-hsl: var(--custom-color-middle-grey); /* secondary text */
        --primary-400-hsl: var(--custom-color-middle-grey); /* channel icons */
        --primary-430-hsl: var(--custom-color-middle-grey); /* message input prompt */
        --primary-460-hsl: var(--custom-color-error);
        --primary-500-hsl: var(--custom-color-middle-grey); /* current chat */
        --primary-530-hsl: var(--custom-color-middle-grey); /* new chat icon */
        --primary-560-hsl: var(--custom-color-middle-grey); /* message input box */
        --primary-600-hsl: var(--custom-color-middle-grey); /* event menu background */
        --primary-630-hsl: var(--custom-color-background-primary); /* scrollbar background */
        --primary-645-hsl: var(--custom-color-error);
        --primary-660-hsl: var(--custom-color-error);
        --primary-700-hsl: var(--custom-color-middle-grey); /* edit inputs background */
        --primary-730-hsl: var(--custom-color-middle-grey); /* scrollbar pill */
        --primary-760-hsl: var(--custom-color-error);
        --primary-800-hsl: var(--custom-color-middle-grey); /* user background*/
        --primary-830-hsl: var(--custom-color-error);
        --primary-860-hsl: var(--custom-color-error);
        --primary-900-hsl: var(--custom-color-middle-grey); /* message hover and top shadow */

        --brand-100-hsl: var(--custom-color-background-primary);
        --brand-130-hsl: var(--custom-color-background-primary);
        --brand-160-hsl: var(--custom-color-background-primary);
        --brand-200-hsl: var(--custom-color-background-primary);
        --brand-230-hsl: var(--custom-color-background-primary);
        --brand-260-hsl: var(--custom-color-background-primary);
        --brand-300-hsl: var(--custom-color-background-primary);
        --brand-330-hsl: var(--custom-color-background-primary);
        --brand-345-hsl: var(--custom-color-background-primary);
        --brand-360-hsl: var(--custom-color-background-primary);
        --brand-400-hsl: var(--custom-color-background-primary);
        --brand-430-hsl: var(--custom-color-background-primary);
        --brand-460-hsl: var(--custom-color-background-primary);
        --brand-500-hsl: var(--custom-color-background-primary);
        --brand-530-hsl: var(--custom-color-background-primary);
        --brand-560-hsl: var(--custom-color-background-primary);
        --brand-600-hsl: var(--custom-color-background-primary);
        --brand-630-hsl: var(--custom-color-background-primary);
        --brand-660-hsl: var(--custom-color-background-primary);
        --brand-700-hsl: var(--custom-color-background-primary);
        --brand-730-hsl: var(--custom-color-background-primary);
        --brand-760-hsl: var(--custom-color-background-primary);
        --brand-800-hsl: var(--custom-color-background-primary);
        --brand-830-hsl: var(--custom-color-background-primary);
        --brand-860-hsl: var(--custom-color-background-primary);
        --brand-900-hsl: var(--custom-color-background-primary);
        
        --green-hsl: 5 79% 59%;
        --green-100-hsl: var(--green-hsl);
        --green-130-hsl: var(--green-hsl);
        --green-160-hsl: var(--green-hsl);
        --green-200-hsl: var(--green-hsl);
        --green-230-hsl: var(--green-hsl);
        --green-260-hsl: var(--green-hsl);
        --green-300-hsl: var(--green-hsl);
        --green-330-hsl: var(--green-hsl);
        --green-345-hsl: var(--green-hsl);
        --green-360-hsl: var(--primary-330-hsl);
        --green-400-hsl: var(--green-hsl);
        --green-430-hsl: var(--green-hsl);
        --green-460-hsl: var(--green-hsl);
        --green-500-hsl: var(--green-hsl);
        --green-530-hsl: var(--green-hsl);
        --green-560-hsl: var(--green-hsl);
        --green-600-hsl: var(--green-hsl);
        --green-630-hsl: var(--green-hsl);
        --green-660-hsl: var(--green-hsl);
        --green-700-hsl: var(--green-hsl);
        --green-730-hsl: var(--green-hsl);
        --green-760-hsl: var(--green-hsl);
        --green-800-hsl: var(--green-hsl);
        --green-830-hsl: var(--green-hsl);
        --green-860-hsl: var(--green-hsl);
        --green-900-hsl: var(--green-hsl);
        
        --status-danger:                          hsl(var(--green-hsl));
        --button-outline-danger-border:           var(--status-danger);
        --button-outline-danger-border-hover:     var(--status-danger);
        --button-outline-danger-background-hover: var(--status-danger);
        --button-danger-background-hover:         var(--status-danger);
        --button-danger-background:               var(--status-danger);
        
        --text-link:               hsl(5 79% 59%);
        --text-warning:            hsl(var(--green-hsl));
        --info-warning-foreground: var(--text-warning);
        
        --profile-gradient-primary-color:     var(--background-secondary) !important;
        --profile-gradient-secondary-color:   var(--background-secondary) !important;
        --profile-gradient-overlay-color:     none !important;
        --profile-body-background-color:      var(--primary-600) !important;
        --profile-message-input-border-color: var(--profile-message-input-border-color) !important;
        --profile-note-background-color:      var(--profile-body-background-color) !important;
    }
    
    .desaturateUserColors-1O-G89 {
        color: hsl(var(--custom-color-white)) !important;
    }
    .banner-1YaD3N {
        background: none !important;
    }
    .banner-3D8GgT {
        background: none !important;
    }
    
    * {
        font-family: "FiraCode Nerd Font" !important;
        font-size: 12px !important;
    }
    
    ul[aria-label="Direct Messages"]>li:nth-of-type(2) /* Nitro */,
    section[aria-label="Channel header"]>div:nth-of-type(2)>a /* help button */,
    .buttons-uaqb-5 /* GIF, emoticon, and git buttons */,
    div[dir="ltr"]>.listItem-3SmSlK:nth-last-of-type(2), div[dir="ltr"]>.listItem-3SmSlK:nth-last-of-type(3), div[dir="ltr"]>.listItem-3SmSlK:nth-last-of-type(4) /* sidebar buttons */,
    .premiumIconWrapper-32h0Ri, /* Nitro profile icon */
    div[aria-label="User Settings"]>div:nth-of-type(5), div[aria-label="User Settings"]>div:nth-of-type(10), div[aria-label="User Settings"]>div:nth-of-type(11), div[aria-label="User Settings"]>div:nth-of-type(12), div[aria-label="User Settings"]>div:nth-of-type(13), div[aria-label="User Settings"]>div:nth-of-type(14), div[aria-label="User Settings"]>div:nth-of-type(15), div[aria-label="User Settings"]>div:nth-of-type(16), div[aria-label="User Settings"]>div:nth-of-type(31), div[aria-label="User Settings"]>div:nth-of-type(32), div[aria-label="User Settings"]>div:nth-of-type(33), /* useless settings tabs */
    #profile-customization-tab>div[role="tablist"], #profile-customization-tab>h2, .premiumFeatureBorder-1i95si /* Nitro marketing */
    {
        display: none;
    }
}

Reviews

No reviews yet.