Skip to content

Discord Color Theme by frozenmango747

Details

Authorfrozenmango747

LicenseNo License

CategoryDiscord

Created

Updated

Size6.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Change the color of Discord - black and white is boring!

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           Discord Color Theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor   stylus
@var color mod1 "Modifier 1" rgba(225, 68, 16, .659)
@var color mod2 "Modifier 2" rgba(225, 80, 54, .51)
@var color mod3 "Modifier 3" rgba(225, 80, 54, .55)
@var color mod4 "Modifier 4" rgba(225, 80, 54, .32)
@var color mod5 "Modifier 5" rgba(223, 80, 63, .32)
@var color mod6 "Modifier 6" rgba(255, 90, 66, .16)
@var color mod7 "Modifier 7" rgba(223, 87, 63, .11)

@var color base1 "Base 1" #F1A99B
@var color base2 "Base 2" #c43d00
@var color base3 "Base 3" #f4b7a6
@var color base4 "Base 4" #f0a493
@var color base5 "Base 5" #f7a08d
@var color base6 "Base 6" #ec9362
@var color base7 "Base 7" #f0a894
@var color base8 "Base 8" #f6b4a1
@var color base9 "Base 9" #fdc5b5
@var color base10 "Base 10" #eab3a3

@var color accent-color "Accent Color" #ead497
==/UserStyle== */

@-moz-document domain("discord.com") {
    /* Insert code here... */
    :root{
    --red7: mod1;
    --red1: mod2;
    --red2: mod3;
    --red3: mod4;
    --red4: mod5;
    --red5: mod6;
    --red6: mod7; 
    --pink0: base1;
    --pink1: base2;
    --pink2: base3;
    --pink3: base4;
    --pink4: base5;
    --pink5: base6;
    --pink6: base7;
    --pink7: base8;
    --pink8: base9;
    --pink9: base10;
    --gold1: accent-color;
}

.theme-dark {
    --header-primary: #000;
    --header-secondary: var(--red1);
    --text-normal: #353535;
    --text-muted: #202122;
    --text-link: var(--pink1);
    --channels-default: #2d2f31;
    --interactive-normal: var(--red2);
    --interactive-hover: #000;
    --interactive-active: #282828;
    --interactive-muted: #4d4d4d;
    --background-primary: var(--pink2);
    --background-secondary: var(--pink3); /* sidebar */
    --background-secondary-alt: var(--pink4);
    --background-tertiary: var(--pink0);
    --background-accent: var(--gold1);
    --background-floating: var(--gold1);
    --background-mobile-primary: var(--pink5);
    --background-mobile-secondary: var(--pink3);
    --background-modifier-hover: var(--red5);
    --background-modifier-active: rgba(79,84,92,0.24);
    --background-modifier-selected: var(--red4);
    --background-modifier-accent: hsla(0,0%,100%,0.06);
    --background-mentioned: #ead49747;
    --background-mentioned-hover: rgba(250,166,26,0.08);
    --background-message-hover: var(--red6);
    --background-help-warning: rgba(250,166,26,0.1);
    --background-help-info: rgba(0,176,244,0.1);
    --scrollbar-thin-thumb: var(--red3);
    --scrollbar-thin-track: var(--pink3);
    --scrollbar-auto-thumb: var(--red3);
    --scrollbar-auto-track: var(--pink3);
    --scrollbar-auto-scrollbar-color-thumb: #202225;
    --scrollbar-auto-scrollbar-color-track: #2f3136;
    --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15);
    --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
    --elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
    --elevation-high: 0 8px 16px rgba(0,0,0,0.24);
    --logo-primary: #ff663a;
    --focus-primary: #00b0f4;
    --radio-group-dot-foreground: #e14410;
    --guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    --channeltextarea-background: var(--pink6);
    --activity-card-background: #1dd52e;
    --textbox-markdown-syntax: #2d2f31;
    --deprecated-card-bg: rgba(32,34,37,0.6);
    --deprecated-card-editable-bg: rgba(32,34,37,0.3);
    --deprecated-store-bg: #36393f;
    --deprecated-quickswitcher-input-background: #72767d;
    --deprecated-quickswitcher-input-placeholder: hsla(0,0%,100%,0.3);
    --deprecated-text-input-bg: rgba(0,0,0,0.1);
    --deprecated-text-input-border: rgba(0,0,0,0.3);
    --deprecated-text-input-border-hover: #040405;
    --deprecated-text-input-border-disabled: #202225;
    --deprecated-text-input-prefix: #2d2d2d;
}

.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9, .wrapper-1BJsBx:hover .childWrapper-anI2G9 {
    color: #fff;
    background-color: var(--gold1);
}

.theme-dark .headerNormal-T_seeN {
    background-color: var(--pink7);
}

.theme-dark .body-3iLsc4, .theme-dark .footer-1fjuF6 {
    background-color: var(--pink8);
    color: hsla(0,0%,100%,.8);
}

.theme-dark .uploadModal-2ifh8j {
    background-color: var(--pink9);
    -webkit-box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
}

.theme-dark .footer-3mqk7D {
    background-color: var(--pink6);
    -webkit-box-shadow: inset 0 1px 0 rgba(47,49,54,.6);
    box-shadow: inset 0 1px 0 rgba(47,49,54,.6);
}

.theme-dark .autocomplete-1vrmpx {
    background-color: var(--pink3);
}

.theme-dark .selected-1Tbx07 {
    background-color: var(--red4);
}

.newMessagesBar-265mhP {

    background-color: var(--red1); /* unread messages bar*/

}

.lookFilled-1Gx00P.colorGreen-29iAKY {
    color: #fff;
    background-color: var(--gold1);
}

.theme-dark .container-1If-HZ, .theme-dark .reactors-Blmlhw {
    background-color: var(--pink7);
}

.theme-dark .scroller-1-nKid {
    background: var(--pink4);
}

.theme-dark .reactionSelected-1pqISm {
    background-color: var(--red1);
}

.circleIconButton-1QV--U {
    
    color: var(--red7);
    background-color: var(--background-primary);
}

.circleIconButton-1QV--U.selected-1JjBPm {
    
    color: #fff;
    background-color: var(--gold1);
}


.theme-dark .root-1gCeng {
    background-color: var(--pink2);
    -webkit-box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
}

.theme-dark .footer-2gL1pp {
    background-color: var(--pink4);
    -webkit-box-shadow: inset 0 1px 0 rgba(47,49,54,.6);
    box-shadow: inset 0 1px 0 rgba(47,49,54,.6);
}

.checkbox-3kaeSU .checkboxInner-3yjcPe .checkboxElement-1qV33p:checked+span {
    background-color: var(--red7);
    border-color: var(--red1);
}

#app-mount > div.layerContainer-yqaFcK > div.backdrop-1wrmKB.withLayer-RoELSG{
    opacity: 0.85;
    background-color: rgb(53, 37, 37) !important;
}

.theme-dark .container-1D34oG {
    background-color: var(--background-primary);
}
}

Reviews

No reviews yet.