Discord Color Theme by frozenmango747

Details

Authorfrozenmango747
LicenseNo License
Created atApril 09, 2021 05:05
Updated atApril 09, 2021 05:05
Applies toDiscord
Statistics

Total views43
Total installs14
Weekly installs0
Weekly updates3
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);
}
}