Skip to content

A Discord Of Darkness And Color by laijunyin

Details

Authorlaijunyin

Licensetyj

Category555

Created

Updated

Size45 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

/* ==UserStyle==
@name A Discord Of Darkness And Color
@namespace USO Archive
@author FireFern
@description A style for Discord. A bunch of stuff is customizable. If you want to go in the CSS itself and change it, the code has lots of comments that should make navigation incredibly easy. I would also recommend you download the style here if you aren't there already. https://33kk.github.io/uso-archive/?style=201433Installing the style there lets you customize the stuff by clicking on the extension while downloading it on the userstyles website will just link you to the download page on the userstyles website (at least in my experience). It also loads way faster than the userstyles website.Another thing is that light mode actually looks really good with this style! It always did but I just forgot to mention it.
@version 20210809.15.58
@license CC-BY-4.0
@preprocessor uso
@advanced color mainkey "Main Color" #FF0000
@advanced color homebottomkey "Friend List Bottom Color" #D03E00
@advanced color textboxkey "Textbox" #1A1A1A
@advanced dropdown bgimagekey "Background Image" {
Default--Canyon "Default- Canyon*" <<<EOT https://i.imgur.com/o73PEK7.jpg EOT;

bgimagekey-custom-dropdown "Custom" <<<EOT /*[[bgimagekey-custom]]*\/ EOT;

}
@advanced text bgimagekey-custom "Background Image (Custom)" "https://example.com/image.png"
@advanced dropdown bgextrakey "Background Extra" {
Default--0-7 "Default- 0.7*" <<<EOT rgb(0, 0, 0, .7) EOT;
Transparent "Transparent" <<<EOT transparent EOT;
0-5 "0.5" <<<EOT rgb(0, 0, 0, .5) EOT;
Black "Black" <<<EOT rgb(0, 0, 0) EOT;

}
@advanced dropdown bordercolorkey "Borders" {
Default--Yes "Default- Yes*" <<<EOT var(--main) EOT;
No "No" <<<EOT none EOT;

}
@advanced color bgotherkey "Background Other" #000000
@advanced dropdown appmountkey "Cover Background" {
Default--0-6 "Default- 0.6*" <<<EOT rgb(0, 0, 0, .6) EOT;
Transparent "Transparent" <<<EOT transparent EOT;
0-1 "0.1" <<<EOT rgb(0, 0, 0, .1) EOT;
0-2 "0.2" <<<EOT rgb(0, 0, 0, .2) EOT;
0-3 "0.3" <<<EOT rgb(0, 0, 0, .3) EOT;
0-4 "0.4" <<<EOT rgb(0, 0, 0, .4) EOT;
0-5 "0.5" <<<EOT rgb(0, 0, 0, .5) EOT;
0-7 "0.7" <<<EOT rgb(0, 0, 0, .7) EOT;
0-8 "0.8" <<<EOT rgb(0, 0, 0, .8) EOT;
0-9 "0.9" <<<EOT rgb(0, 0, 0, .9) EOT;
Darkness "Darkness" <<<EOT rgb(0, 0, 0) EOT;

}
@advanced dropdown friendgradientkey "Friend List Gradient" {
Yes "Yes*" <<<EOT linear-gradient(var(--bgextra), var(--main), var(--homebottom)) EOT;
No "No" <<<EOT var(--bgextra) EOT;

}
@advanced dropdown buttonstylekey "Button Style" {
Inset-Shadows "Inset Shadows*" <<<EOT /Grey Buttons/
/the edit buttons in account settings and maybe more/

.theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV, .theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV:hover, .theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV:active, .theme-light .lookFilled-1Gx00P.colorGrey-2DXtkV, .theme-light .lookFilled-1Gx00P.colorGrey-2DXtkV:hover, .theme-light .lookFilled-1Gx00P.colorGrey-2DXtkV:active {
background: transparent;
box-shadow: inset 0px 0px 20px #747f8d, inset 0px 0px 20px #747f8d, inset 0px 0px 50px #747f8d
}

/Green Buttons/
/in the emoji popout and maybe more/

.lookFilled-1Gx00P.colorGreen-29iAKY, .lookFilled-1Gx00P.colorGreen-29iAKY:hover, .lookFilled-1Gx00P.colorGreen-29iAKY:active {
background: transparent;
box-shadow: inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%), inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%), inset 0px 0px 50px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
}

/Green Outlined Buttons/
/in the popup that appears when u invite someone to a channel and maybe more/

.lookOutlined-3sRXeN.colorGreen-29iAKY, .lookOutlined-3sRXeN.colorGreen-29iAKY:hover, .lookOutlined-3sRXeN.colorGreen-29iAKY:active, .lookOutlined-3sRXeN.colorGreen-29iAKY:focus {
background: transparent;
color: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
border: 1px solid hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
box-shadow: inset 0px 0px 3px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%)
}

/Blurple Buttons/
/in account settings and more/

.lookFilled-1Gx00P.colorBrand-3pXr91, .lookFilled-1Gx00P.colorBrand-3pXr91:hover, .lookFilled-1Gx00P.colorBrand-3pXr91:active, .lookFilled-1Gx00P.colorBrand-3pXr91:disabled {
background: transparent;
box-shadow: inset 0px 0px 20px var(--brand-experiment), inset 0px 0px 20px var(--brand-experiment), inset 0px 0px 50px var(--brand-experiment)
}

/Red Buttons/
/"Disable Account" button in account settings and maybe more/

.lookFilled-1Gx00P.colorRed-1TFJan, .lookFilled-1Gx00P.colorRed-1TFJan:hover, .lookFilled-1Gx00P.colorRed-1TFJan:active {
background: transparent;
box-shadow: inset 0px 0px 20px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%), inset 0px 0px 20px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%), inset 0px 0px 50px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%)
}

/Red Outlined Buttons/
/"Delete Account" button in account settings and maybe more/

.lookOutlined-3sRXeN.colorRed-1TFJan, .lookOutlined-3sRXeN.colorRed-1TFJan:hover, .lookOutlined-3sRXeN.colorRed-1TFJan:active {
background: transparent;
color: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
border: 1px solid hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
box-shadow: inset 0px 0px 3px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%)
}

/Other Grey Buttons/
/"Block" and "Remove Friend" buttons in DM history and "Cancel" buttons in popups and maybe more/

.lookFilled-1Gx00P.colorPrimary-3b3xI6, .lookFilled-1Gx00P.colorPrimary-3b3xI6:hover, .lookFilled-1Gx00P.colorPrimary-3b3xI6:active {
background: transparent !important;
box-shadow: inset 0px 0px 20px #4f545c, inset 0px 0px 20px #4f545c, inset 0px 0px 50px #4f545c
}

/White Outlined Buttons/
/"Back" and join buttons that appear when previewing a server/

.lookOutlined-3sRXeN.colorWhite-rEQuAQ, .lookOutlined-3sRXeN.colorWhite-rEQuAQ:hover,.lookOutlined-3sRXeN.colorWhite-rEQuAQ:active {
background: transparent;
color: white;
border: 1px solid white;
box-shadow: inset 0px 0px 3px white
}

/"Add Friend" Button/

div[style="color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%); background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"], div[style="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%); color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);"] {
background: transparent !important;
color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%) !important;
box-shadow: inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%), inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%), inset 0px 0px 50px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%) !important
}

div[style="color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
background: transparent !important;
color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%) !important;
box-shadow: inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 10%), inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 10%), inset 0px 0px 50px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 10%) !important
} EOT;
Original "Original" <<<EOT /"Add Friend" Button/

div[style="color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%); background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"], div[style="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%); color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);"] {
box-shadow: none !important
}

div[style="color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
box-shadow: none !important
} EOT;

}
@advanced dropdown mentionstylekey "Mention Style" {
Style-1 "Style 1*" <<<EOT .theme-dark .wrapper-3WhCwL, .theme-light .wrapper-3WhCwL {
background: var(--bgother);
color: var(--main);
}

.interactive {
transition: 0.15s ease-out
}

.interactive:hover {
text-shadow: 0px 0px 3px var(--main);
box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 5px var(--main)
} EOT;
Style-2 "Style 2" <<<EOT .theme-dark .wrapper-3WhCwL, .theme-light .wrapper-3WhCwL {
background: transparent !important;
box-shadow: inset 0px 0px 25px var(--main);
color: white
}

.interactive {
transition: 60ms ease-out
}

.interactive:hover {
box-shadow: inset 0px 0px 100px var(--main);
} EOT;
Original "Original" <<<EOT EOT;

}
@advanced color bgfloatkey "Floating Background" #111111
@advanced color linkkey "Links" #00B0F4
@advanced color lowsatlinkkey "Links (Low Saturation)" #5D99B1

==/UserStyle== /
@-moz-document domain("discord.com") {
.theme-dark, .theme-light {
/**************/
--background-primary: transparent; /a bunch of backgrounds/
--background-secondary: transparent;
--background-tertiary: transparent;
--background-secondary-alt: transparent;
--channeltextarea-background: transparent;
/
/
--background-floating: /
[[bgfloatkey]]
/; /this one is for the menus that appear when u right click and others/
/
/
--background-modifier-hover: #a2a2a212; /for a bunch of different hover backgrounds/
--background-modifier-active: #e8e8e812; /for a bunch of different active state backgrounds/
--background-modifier-selected: #ffffff17; /for a bunch of different selected backgrounds/
--background-accent: #4f545c42; /this is shown in the emoji/gif selector when selecting an emoji/
/
/
--background-message-hover: #a8a8a812; /the message hover/
/
/
--scrollbar-thin-thumb: var(--main); /some scrollbar thumbs/
--scrollbar-thin-track: transparent; /some scrollbar tracks/
--scrollbar-auto-thumb: var(--main); /some other scrollbar thumbs/
--scrollbar-auto-track: #202020e8; /some scrollbar tracks/
/
/
--header-primary: white; /for some text/
--header-secondary: #9d9d9d; /for some other text/
--text-normal: #ffffffe8; /for chat text and some other stuff/
--text-muted: var(--main); /for some other text/
/
/
--background-modifier-accent: #ffffff30; /for the dividers and reaction stuff/
/
/
--interactive-active: white; /for random stuffs' colors/
--interactive-normal: grey;
--interactive-hover: white; /for random stuffs' hover colors/
--interactive-muted: #9d9d9d80;
/
/
--channels-default: #9d9d9d; /for the channel color and more/
//
--deprecated-text-input-border: transparent; /for the border color of some textboxes/
--deprecated-text-input-border-hover: var(--main); /for the border color of some textboxes when u hover over them/
/
/
--deprecated-store-bg: transparent;
/
/
--elevation-low: none; /for some shadows/
--elevation-medium: none;
--elevation-high: none;
/
**/
--text-link: /[[linkkey]]/;
--text-link-low-saturation: /[[lowsatlinkkey]]/
}

.theme-dark .container-1D34oG, .theme-light .container-1D34oG {
background: transparent /another background/
}

.theme-dark .appMount-3lHmkl {
background: /[[appmountkey]]/; /the background that goes over the other one below"/
/make the above completely not transparent if u want/
/u should also adjust the transparency depending on the background for it to look the best/
}

.theme-dark body {
background: url("/[[bgimagekey]]/"); /url for the background/
background-size: cover
}

/*cool backgrounds i like:

https://i.imgur.com/o73PEK7.jpg

https://i.imgur.com/DBgLnNq.png

https://i.imgur.com/2gTXpFD.gif

https://cdn.discordapp.com/attachments/630816764854272002/671203077973606410/270145196.jpg

https://i.imgur.com/NXAyQHw.jpg

https://imgur.com/gallery/sGtXK

*/

:root {
--main: /[[mainkey]]/; /this color is the main one that is all over the style/
--homebottom: /[[homebottomkey]]/; /this is for the bottom of the gradient you saw at the homapage (the one with Wumpus)/
--bgextra: /[[bgextrakey]]/; /an extra background to make some stuff darker; make it transparent if u dont want it/
--bgother: /[[bgotherkey]]/; /this is the background for some other things, like popups/
--textbox: /[[textboxkey]]/; /for the background of textboxes and searchbars (and some other things)/
--bordercolor: /[[bordercolorkey]]/; /for the color of a some of the borders and shadows/
}

/*original/default colors:

Red:
--main: #f00;
--homebottom: #d03e00;
--bgextra: #000000bd

*/

/*other good looking options:

Blue:
--main: #00f;
--homebottom: #0099d0;

Lighter Blue:
--main: #0170c1;
-homebottom: #02aff3;

Green:
--main: #008000;
--homebottom: #11d000;

Purple:
--main: #800080;
--homebottom: #48008b;

Orange:
--main: #d58900;
--homebottom: #b0b000;

Golden Yellow:
--main: #f3ce09;
--homebottom: #ffff08;

Poop:
--main: #731c00;
--homebottom: #d03e00;

*/

//
/TOP BAR/
/
/

/Background And Border/

.container-1r6BKw.themed-ANHk51 {
background: var(--bgextra);
box-shadow: 0px 0px 10px var(--bordercolor), 0px 0px 3px var(--bordercolor)
}

.children-19S4PO:after {
background: transparent !important
}

/Tabs/

/normal state/

.topPill-30KHOu .themed-OHr7kt.item-PXvHYJ:not(.disabled-1Hwwfb) {
background: transparent;
box-shadow: none;
transition: 0.2s
}

/hover/

.topPill-30KHOu .themed-OHr7kt.item-PXvHYJ:hover:not(.disabled-1Hwwfb) {
background: transparent;
box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 3px var(--main)
}

/active/

.topPill-30KHOu .themed-OHr7kt.item-PXvHYJ:active:not(.disabled-1Hwwfb) {
background: transparent;
box-shadow: inset 0px 0px 10px var(--main), inset 0px 0px 3px var(--main)
}

/selected/

.topPill-30KHOu .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ, .topPill-30KHOu .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ:hover, .topPill-30KHOu .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ:active {
background: transparent;
box-shadow: inset 0px 0px 15px var(--main), inset 0px 0px 3px var(--main)
}

/Search Bar/

.searchBar-3dMhjb {
background: var(--textbox);
}

//
/PINNED MESSAGES, INBOX, AND THREADS POPOUT/
/
/

/Background And Shadow/

.messagesPopoutWrap-1MQ1bW, .container-enaOkj, .container-7uh5fX {
background: var(--bgother);
box-shadow: 0px 0px 10px var(--main), 0px 0px 5px var(--main)
}

/Top Part/

.header-ykumBX, .header-1VS4tm {
border-bottom: 1px solid var(--bordercolor);
box-shadow: none;
background: transparent
}

/Message List Background/

.messagesPopoutWrap-1MQ1bW .messagesPopout-24nkyi {
background: transparent
}

/Messages' Borders/

.messagesPopoutWrap-1MQ1bW .messageGroupWrapper-o-Zw7G, .messageContainer-gbhlwo, .messages-3G3erD {
border: 1px solid var(--main)
}

/Messages' Date Dividers/

.content-1o0f9g {
background: var(--main);
color: white
}

.divider-JfaTT5 {
border-color: var(--main)
}

/Headers (In The Inbox Popout)/

.channelHeader-3Gd2xq {
background: var(--bgother)
}

/Tutorial Thing At The Top Of The Unread Message List/

.tutorial-3w5I9h {
border: 1px solid var(--main)
}

/Thread List Tabs/

.container-2I9Hud {
transition: 0.3s
}

.container-2I9Hud:hover {
box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 15px var(--main);
border-color: transparent
}

.container-2I9Hud:active {
box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 25px var(--main);
}

/Active Thread Popup That Appears When You Hover Over A Channel/

.popout-APcvZm {
background: var(--background-floating)
}

//
/FRIEND LIST (THE ONE WITH WUNPUS)/
/
/

/Background/

.peopleColumn-29fq28 {
background: /[[friendgradientkey]]/
}

/Text/

.text-GwUZgS.marginTop8-1DLZ1n {
color: white;
text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black
}

/Friend Buttons/

.peopleListItem-2nzedh {
border: none;
transition: 0.3s
}

.peopleListItem-2nzedh:hover, .peopleListItem-2nzedh:active {
background: transparent;
box-shadow: 0px 0px 10px black
}

/"Add Friend" Row That Appears After Clicking The Button/

/shadow/

.peopleColumn-29fq28 .sectionHeader-20RGqu {
border: none;
box-shadow: 0px 0px 5px black
}

/textbox/

.wrapper-1cBijl {
background: var(--textbox);
border: 1px solid var(--main)
}

//
/ACTIVE FRIEND COLUMN/
/
/

/Background And Border/

.theme-dark .container-lRFx4q {
background: var(--bgextra);
border-left: 1px solid var(--bordercolor)
}

//
/TOP LEFT SEARCH BAR AREA/
/
/

/Background And Shadow/

.searchBar-6Kv8R2 {
background: transparent;
box-shadow: 0px 0px 10px var(--bordercolor), 0px 0px 3px var(--bordercolor)
}

/Search Bar/

.searchBar-6Kv8R2 .searchBarComponent-32dTOx {
background: var(--textbox);
}

//
/SIDE BAR/
/
/

/by sidebar i mean the entire bar on the side to the right of the server list. so it includes the DM list, channel list, top left textbox area, and bottom left avatar area/

/Background And Border/

.theme-dark .sidebar-2K8pFh {
background: var(--bgextra);
border-right: 1px solid var(--bordercolor)
}

/Tabs/

/normal state/

.container-2Pjhx- .layout-2DM8Md {
background: transparent;
box-shadow: none;
transition: 0.2s
}

/hover/

.container-2Pjhx-:hover .layout-2DM8Md {
background: transparent;
box-shadow: inset 0px 0px 10px var(--main), inset 0px 0px 5px var(--main);
}

/active/

.container-2Pjhx-:active .layout-2DM8Md {
background: transparent;
box-shadow: inset 0px 0px 20px var(--main), inset 0px 0px 5px var(--main)
}

/selected/

.selected-aXhQR6 .layout-2DM8Md, .selected-aXhQR6 .layout-2DM8Md:hover, .selected-aXhQR6 .layout-2DM8Md:active {
background: transparent !important;
box-shadow: inset 0px 0px 30px var(--main), inset 0px 0px 5px var(--main)
}

//
/BOTTOM LEFT AVATAR AREA/
/
/

/Background And Border/

.panels-j1Uci_ {
background: transparent;
border-top: 1px solid var(--bordercolor);
}

//
/SERVER LIST/
/
/

/Border/

.scroller-1Bvpku {
border-right: 1px solid var(--bordercolor);
background: transparent
}

/Discord Logo/

.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9 {
background: var(--main);
color: white
}

.childWrapper-anI2G9 {
background: var(--main);
color: white
}

/Dots On The Left/

.item-2hkk8m {
background: var(--main);
}

/Folder Backgrounds/

.expandedFolderBackground-1cujaW {
background: rgba(88, 101, 242, 0.15);
border-radius: 17px 17px 24px 24px
}

.folder-1hbNCn {
background: transparent
}

.folder-1hbNCn.hover-qTxTR_ {
background: rgba(88, 101, 242, 0.15)
}

.folderIconWrapper-1_bOZe {
background: rgba(88, 101, 242, 0.2) !important
}

/Green Buttons At The Bottom/

.circleIconButton-1QV--U {
color: #43b581;
background: transparent
}

.circleIconButton-1QV--U.selected-1JjBPm {
color: #000;
background: #43b581;
}

//
/CHANNEL LIST/
/
/

/Background And Border/

.container-3w7J-x {
background: transparent;
}

/Channel Link Border/

.iconVisibility-sTNpHs.wrapper-2jXpOf:hover .mainContent-u_9PKf:before {
border-left: 3px solid var(--main);
border-radius: 0px;
opacity: 0.7
}

.iconVisibility-sTNpHs.wrapper-2jXpOf.modeSelected-346R90 .mainContent-u_9PKf:before {
border-left: 3px solid var(--main);
border-radius: 0px;
opacity: 1
}

/Transitions For The Above/

.iconVisibility-sTNpHs.wrapper-2jXpOf .mainContent-u_9PKf:before {
border-left: 3px solid transparent;
transition: 0.2s
}

/Dots On The Left/

.unread-2lAfLh {
background: var(--main) !important;
}

//
/MEMBER LIST/
/
/

/Background And Border/

.theme-dark .members-1998pB {
background: var(--bgextra);
border-left: 1px solid var(--bordercolor)
}

/Headers/

.membersGroup-v9BXpm.container-2ax-kl {
text-shadow: 0px 0px 2px var(--main);
text-align: center;
text-decoration: underline;
font-weight: bold;
padding-bottom: 20px;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, transparent, var(--main), transparent);
border-image-slice: 1%
}

/Member Buttons/

/normal state/

.member-3-YXUe .layout-2DM8Md {
background: transparent;
box-shadow: none;
transition: 0.2s
}

/hover/

.member-3-YXUe:hover .layout-2DM8Md {
box-shadow: inset 0px 0px 10px var(--main), inset 0px 0px 5px var(--main);
background: transparent;
}

/active/

.member-3-YXUe:active .layout-2DM8Md {
box-shadow: inset 0px 0px 20px var(--main), inset 0px 0px 5px var(--main);
background: transparent;
}

/selected/

.membersWrap-2h-GB4.hiddenMembers-2dcs_q .selected-aXhQR6 .layout-2DM8Md {
background: transparent;
box-shadow: inset 0px 0px 30px var(--main), inset 0px 0px 5px var(--main);
}

//
/CHAT/
/
/

/Separators/

/"new" separator/

.isUnread-3Ef-o9 {
border-color: var(--main);
}

.unreadPill-2HyYtt {
color: white;
background: var(--main);
}

.unreadPill-2HyYtt .unreadPillCap-3_K2q2 .unreadPillCapStroke-7rkHbg {
color: var(--main);
fill: var(--main)
}

/date separator/

.divider-3_HH5L.hasContent-1_DUdQ.divider-JfaTT5.hasContent-1cNJDh {
background: var(--main);
}

.divider-3_HH5L.hasContent-1_DUdQ.divider-JfaTT5.hasContent-1cNJDh .content-1o0f9g {
color: white;
background: var(--main);
}

/The Thing On A Replied Message/

.repliedMessage-VokQwo:before {
border-color: var(--main);
opacity: 0.7
}

/"Mark As Read" Bar/

.newMessagesBar-265mhP.barBase-1c2Rfb {
background: var(--main);
}

/Main Textbox/

.scrollableContainer-2NUZem.webkit-HjD9Er {
background: var(--textbox)
}

.channelTextAreaDisabled-8rmlrp .scrollableContainer-2NUZem {
opacity: 0.75;
}

.wrapper-39oAo3 {
background: var(--textbox)
}

/Usernames (With No Roles)/

.username-1A8OIy {
color: white
}

/Message Options/

.wrapper-2aW0bm {
background: var(--bgother);
border: 1px solid var(--main)
}

/Mentions And Channel Links/

/[[mentionstylekey]]/

/Emoji Popout/

.popoutContainer-1MXdqN {
background: var(--bgother);
border: 1px solid var(--main);
border-radius: 8px
}

/Spoilers (Text)/

.spoilerText-3p6IlD.hidden-HHr2R9 {
background: #1e1e1e !important
}

.spoilerText-3p6IlD.hidden-HHr2R9:hover {
background: #242424 !important
}

.spoilerText-3p6IlD {
background: #3e3e3e !important
}

/Spoilers (Images)/

.spoilerWarning-2aAZq1 {
color: white !important;
background: var(--main) !important;
opacity: 0.7
}

.spoilerContainer-331r0R.hidden-HHr2R9:hover .spoilerWarning-2aAZq1 {
opacity: 1
}

/Jump To Present Bar/

.jumpToPresentBar-G1R9s6 {
background: #808080c9;
}

/Mentioned Messages/

.mentioned-xhSam7:before {
width: 6px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px
}

/Messages With Embedded Links/

.embedFull-2tM8-- {
background: #111111e3
}

/Messages With Embedded Invite Links/

.wrapper-35wsBm {
background: #111111e3
}

/Code/

.markup-2BOw-j code {
background: #0c0c0fd9;
border: 1px solid #000;
box-shadow: inset 0px 0px 5px #000000ed
}

/File Showing Container Things/

.textContainer-C0szpm {
background: #0c0c0fd9;
border: 1px solid #000;
}

.footer-2yA7Ep {
background: #0c0c0fd9;
border: 1px solid #000;
border-top: none;
}

/The Stuff That Appears When Replying To A Message/

/bar on the left/

.replying-1x3H0T:before {
width: 6px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px
}

/thing above the main textbox/

.replyBar-1YLQ2F, .threadSuggestionBar-2ufK2Z {
background: #2f3136d9
}

/The Thing That Appears When You Type / Into The Textbox To Do Stuff With Bots/

.theme-dark .autocomplete-1vrmpx, .theme-light .autocomplete-1vrmpx {
background-color: var(--bgother)
}

.categoryHeader-O1zU94 {
background: var(--bgother)
}

.theme-dark .selected-1Tbx07, .theme-light .selected-1Tbx07 {
background: transparent;
box-shadow: inset 0px 0px 40px var(--main);
}

//
/SEARCH RESULTS COLUMN/
/
/

/Background And Border/

.searchResultsWrap-3-pOjs {
background: var(--bgextra);
border-left: 1px solid var(--bordercolor)
}

/Top Part And Border/

.searchHeader-2XoQg7 {
background: transparent;
border-bottom: 1px solid var(--bordercolor)
}

/Tabs/

/normal state/

.tab-2j5AEF {
background: transparent;
transition: 0.2s
}

/hover state/

.tab-2j5AEF:hover {
background: transparent;
box-shadow: inset 0px 0px 7px var(--main), inset 0px 0px 3px var(--main)
}

/active state/

.tab-2j5AEF:active {
background: transparent;
box-shadow: inset 0px 0px 11px var(--main), inset 0px 0px 3px var(--main)
}

/selected state/

.tab-2j5AEF.selected-2LAck8 {
background: transparent;
box-shadow: inset 0px 0px 15px var(--main), inset 0px 0px 3px var(--main)
}

/Search Results/

.searchResult-9tQ1uo {
background: transparent
}

.container-2j2llN {
transition: 0.3s;
border-radius: 8px
}

.container-2j2llN:hover {
box-shadow: 0px 0px 5px var(--main), 0px 0px 7px var(--main);
border-radius: 8px
}

//
/EMOJI/GIF SELECTOR/
/
/

/Background And Shadow/

.contentWrapper-SvZHNd, .emojiPicker-3PwZFl {
background: var(--bgother);
box-shadow: 0px 0px 10px var(--main), 0px 0px 5px var(--main)
}

/Headers/

.wrapper-1-Fsb8.header-ywPcAE {
background: var(--bgother);
text-shadow: 0px 0px 2px var(--main), 0px 0px 2px var(--main), 0px 0px 2px var(--main), 0px 0px 2px var(--main), 0px 0px 2px var(--main)
}

/Textbox Area/

.searchBar-5di9mG.container-2XeR5Z.medium-2-DE5M {
background: var(--textbox)
}

.emojiPicker-3PwZFl .header-8ilj5e {
border-bottom: 1px solid var(--bordercolor)
}

/Diversity Selector/

.diversitySelectorPopout-3FiGaM {
background: var(--bgother);
}

/"Emoji"/"GIFs" Header/

.navButtonActive-1MkytQ {
background: var(--main)
}

/Server And Category Bar/

.wrapper-2Gsate.categoryList-2Kzf65 {
border-right: 1px solid var(--bordercolor);
background: var(--textbox)
}

/Bottom Emoji Shortcut At The Bottom/

.unicodeShortcut-15J8Ck {
background: var(--textbox);
box-shadow: 0px 0px 5px black, 0px 0px 10px black
}

/The Thing At The Bottom That Says The Name Of An Emoji/

.inspector-S2gM3e {
background: var(--textbox);
border-top: 1px solid var(--bordercolor);
}

/The Background That Shows When Nitro Is Being Advertised/

.premiumPromo-fVlLu- {
background: var(--bgother);
opacity: 0.95
}

//
/MEMBER POPOUT/
/
/

/Background and Shadow/

.userPopout-xaxa6l {
box-shadow: 0px 0px 10px var(--main), 0px 0px 5px var(--main), 0px 0px 10px var(--main);
background: var(--bgother)
}

/the 3 backgrounds below kinda dont do anything but im gonna keep em here in case discord changes anything/
/The Background That Shows When Playing A Game//*

.headerPlaying-j0WQBV {
background: linear-gradient(#7289da, #0038ff) !important;
}

.headerPlaying-j0WQBV .activity-11LB_k {
background: linear-gradient(#00000012 1%, transparent);
}

/The Background That Shows When Listening To Spotify//*

.headerSpotify-zpWxgT {
background: linear-gradient(#1db954, #00ce00) !important;
}

.headerSpotify-zpWxgT .activity-11LB_k {
background: linear-gradient(#00000012 1%, transparent)
}

/The Background That Shows When Streaming On Twitch//*

.headerStreaming-2FjmGz {
background: linear-gradient(#593695, #5e00ff) !important;
}

.headerStreaming-2FjmGz .activity-11LB_k {
background: linear-gradient(#00000012 1%, transparent)
}*/

/Avatar Border/

.avatar-37jOim {
border-color: var(--bgother);
background-color: var(--bgother)
}

/Role And Notes Area/

.bodyInnerWrapper-26fQXj {
background: transparent
}

/Notes Textbox/

.textarea-2r0oV8 {
background: transparent !important;
}

.textarea-2r0oV8:focus {
background: var(--textbox) !important;
}

/"Message" Area/

.footer-3UKYOU {
background: transparent
}

/"Message" Textbox/

.input-cIJ7To {
background: var(--textbox);
}

.input-cIJ7To:hover {
background: var(--textbox)
}

.input-cIJ7To:focus, .input-cIJ7To.focused-1mmYsC {
border-color: var(--main);
background: var(--textbox)
}

//
/ACCOUNT SETTINGS/
/
/

/Left Part Background And Border/

.theme-dark .sidebarRegion-VFTUkN {
background: var(--bgextra);
border-right: 1px solid var(--bordercolor)
}

/Tabs/

/normal state/

.side-8zPYf6 .themed-OHr7kt.item-PXvHYJ:not(.disabled-1Hwwfb) {
background: transparent;
box-shadow: none;
transition: 0.2s
}

/hover/

.side-8zPYf6 .themed-OHr7kt.item-PXvHYJ:hover:not(.disabled-1Hwwfb) {
background: transparent;
box-shadow: inset 0px 0px 10px var(--main), inset 0px 0px 5px var(--main)
}

/active/

.side-8zPYf6 .themed-OHr7kt.item-PXvHYJ:active:not(.disabled-1Hwwfb) {
background: transparent;
box-shadow: inset 0px 0px 20px var(--main), inset 0px 0px 5px var(--main)
}

/selected/

.side-8zPYf6 .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ, .side-8zPYf6 .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ:hover, .side-8zPYf6 .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ:active {
background: transparent;
box-shadow: inset 0px 0px 30px var(--main), inset 0px 0px 5px var(--main)
}

/Account Profile Card Thing/

.accountProfileCard-1XCH88 {
background: var(--bgother)
}

/Member Popout Preview/

.profileBannerPreview-3_l0Wd {
background: var(--bgother)
}

//
/POPUPS/
/
/

/Background And Shadow (For Some)/

.root-1gCeng, .root-SR8cQa {
background: var(--bgother) !important;
border: none;
box-shadow: 0px 0px 10px var(--main), 0px 0px 5px var(--main) !important
}

/(the part below just prevents images from getting the shadow/

.modal-qgFCbT.root-1gCeng {
box-shadow: none !important
}

/Bottom Part (For Some)/

.theme-dark .footer-2gL1pp, .theme-light .footer-2gL1pp {
background: transparent;
border-top: 1px solid var(--bordercolor);
box-shadow: none
}

/Top Separating Thing (For Some)/

.theme-dark .separator-2-RRj_, .theme-light .separator-2-RRj_ {
box-shadow: none;
border-bottom: 1px solid var(--main)
}

/Keyboard Shortcuts Popup/

.keyboardShortcutsModal-3piNz7 {
background: var(--bgother) !important;
box-shadow: 0px 0px 10px var(--main), 0px 0px 5px var(--main)
}

.modalSubtitle-1Pj5nv {
border-bottom: 1px solid var(--bordercolor) !important
}

/"Search for servers, channels or DMs" Popup/

.quickswitcher-3JagVE {
background: var(--bgother);
box-shadow: 0px 0px 10px var(--main), 0px 0px 5px var(--main)
}

.input-2VB9rf {
background: var(--textbox)
}

/The Textbox In The Popup That Appears When You Invite Someone To A Channel/

.container-2XeR5Z {
background: var(--textbox)
}

/Custom Status Setting Popup/

/clearing date setter/

.lookFilled-22uAsw.select-2fjwPw {
background: var(--textbox);
border: 1px solid var(--main)
}

/clearing date setting dropdown bar/

.popout-VcNcHB {
background: var(--textbox);
border: 1px solid var(--main)
}

.option-3KoAJB:hover, .option-3KoAJB:active, .option-3KoAJB:focus {
background: #44444440
}

.option-3KoAJB[aria-selected=true] {
background: #73737340
}

/File Attaching Popup/

.uploadModal-2ifh8j {
background: var(--bgother) !important;
box-shadow: 0px 0px 5px var(--main), 0px 0px 10px var(--main) !important
}

.uploadModal-2ifh8j .footer-3mqk7D {
background: transparent;
border-top: 1px solid var(--main);
box-shadow: none
}

.uploadModal-2ifh8j .inner-3nWsbo .file-34mY5K .icon-kyxXVr {
box-shadow: inset 0px 0px 104px #2f2f2f, inset 0px 0px 104px #2f2f2f, 0px 0px 8px var(--main) !important
}

.uploadModal-2ifh8j .inner-3nWsbo .file-34mY5K .icon-kyxXVr.video-27RLEH {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExMHB4IiBoZWlnaHQ9IjE0MHB4IiB2aWV3Qm94PSIwIDAgMTEwIDE0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuNC40ICgxNzI0OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbi1maWxlLWxhcmdlLXZpZGVvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMSI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjciIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgICAwIDAgMCAwIDAgICAwIDAgMCAwIDAgIDAgMCAwIDAuMDcgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiIHR5cGU9Im1hdHJpeCIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICAgICAgPGZlTWVyZ2U+CiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZU1lcmdlTm9kZT4KICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyI+PC9mZU1lcmdlTm9kZT4KICAgICAgICAgICAgPC9mZU1lcmdlPgogICAgICAgIDwvZmlsdGVyPgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTIiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9Ii0xIiBkeT0iMyIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMCIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wNyAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIgdHlwZT0ibWF0cml4IiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgICAgICA8ZmVNZXJnZT4KICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPgogICAgICAgICAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIj48L2ZlTWVyZ2VOb2RlPgogICAgICAgICAgICA8L2ZlTWVyZ2U+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iRHJhZy0mYW1wOy1Ecm9wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0iRGVza3RvcC1IRC0tLURyYWctJmFtcDstRHJvcCwtRHJvcGxldCIgc2tldGNoOnR5cGU9Ik1TQXJ0Ym9hcmRHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwMjkuMDAwMDAwLCAtODY3LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzOS4wMDAwMDAsIDg4MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJpY29uLWZpbGUtbGFyZ2UtdmlkZW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgxMC4wMDAwMDAsIDAuMDAwMDAwKSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNi45OTMwNjQ4NCBDMCwzLjY4MzE4NjUzIDIuNjgyNjk0NzIsMSA1Ljk5ODE2NDEyLDEgTDUwLjM0NTc3OTEsMSBDNTQuODk3NzEyMywxIDcwLDE2LjM5MTk3MzUgNzAsMjEuMDkxNDI3OSBMNzAsOTUuMDAyNzM4NiBDNzAsOTguMzE0OTM0NiA2Ny4zMjAxMzk4LDEwMSA2NC4wMDE1Nzg4LDEwMSBMNS45OTg0MjExOCwxMDEgQzIuNjg1NTg0NjQsMTAxIDAsOTguMzEyMzE5IDAsOTUuMDA2OTM1MiBMMCw2Ljk5MzA2NDg0IFoiIGlkPSJSZWN0YW5nbGUtMTEzIiBzdHJva2U9IiM3Mjg5REEiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0iI0Y0RjZGQyIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0xKSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIsMSBMMTQsMSBMMTQsMTAxIEwxMiwxMDEgTDEyLDEgWiBNNTYsMSBMNTgsMSBMNTgsMTAxIEw1NiwxMDEgTDU2LDEgWiBNMCw5MiBMMTIsOTIgTDEyLDk0IEwwLDk0IEwwLDkyIFogTTU4LDkyIEw3MCw5MiBMNzAsOTQgTDU4LDk0IEw1OCw5MiBaIE0wLDgwIEwxMiw4MCBMMTIsODIgTDAsODIgTDAsODAgWiBNNTgsODAgTDcwLDgwIEw3MCw4MiBMNTgsODIgTDU4LDgwIFogTTAsNjggTDEyLDY4IEwxMiw3MCBMMCw3MCBMMCw2OCBaIE01OCw2OCBMNzAsNjggTDcwLDcwIEw1OCw3MCBMNTgsNjggWiBNMCw1NiBMMTIsNTYgTDEyLDU4IEwwLDU4IEwwLDU2IFogTTU4LDU2IEw3MCw1NiBMNzAsNTggTDU4LDU4IEw1OCw1NiBaIE0wLDQ0IEwxMiw0NCBMMTIsNDYgTDAsNDYgTDAsNDQgWiBNNTgsNDQgTDcwLDQ0IEw3MCw0NiBMNTgsNDYgTDU4LDQ0IFogTTAsMzIgTDEyLDMyIEwxMiwzNCBMMCwzNCBMMCwzMiBaIE01OCwzMiBMNzAsMzIgTDcwLDM0IEw1OCwzNCBMNTgsMzIgWiBNMCwyMCBMMTIsMjAgTDEyLDIyIEwwLDIyIEwwLDIwIFogTTU4LDIwIEw3MCwyMCBMNzAsMjIgTDU4LDIyIEw1OCwyMCBaIE0wLDggTDEyLDggTDEyLDEwIEwwLDEwIEwwLDggWiIgaWQ9IlJlY3RhbmdsZS02MTEiIGZpbGw9IiM3Mjg5REEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUxLDMuOTk3MDYxODggQzUxLDAuNjg0OTc2MDYyIDUyLjg5NDc0ODcsLTAuMTA1MjUxMzIzIDU1LjI0MTgyMTMsMi4yNDE4MjEyOSBMNjguNzU4MTc4NywxNS43NTgxNzg3IEM3MS4xMDA4NzE5LDE4LjEwMDg3MTkgNzAuMzEzMzc0MiwyMCA2Ny4wMDI5MzgxLDIwIEw1NC4wMDEzODY5LDIwIEM1Mi4zNDM3NjY3LDIwIDUxLDE4LjY1NjkxODcgNTEsMTYuOTk4NjEzMSBMNTEsMy45OTcwNjE4OCBaIiBpZD0iUGF0aCIgc3Ryb2tlPSIjNzI4OURBIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiNGNEY2RkMiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU0LDcgTDU0LDE0LjUwMjM3MzMgQzU0LDE1Ljg4MTc3NDQgNTUuMTA5NjYyMSwxNyA1Ni41LDE3IEw1OSwxNyIgaWQ9IlBhdGgtMTU3IiBzdHJva2Utb3BhY2l0eT0iMC42IiBzdHJva2U9IiNDOUQyRjAiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iVHJpYW5nbGUtMSIgc3Ryb2tlPSIjNzI4OURBIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiNGNEY2RkMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0Ljk1MjM1MSwgNTEuMDAwMDY4KSByb3RhdGUoLTI3MC4wMDAwMDApIHRyYW5zbGF0ZSgtMzQuOTUyMzUxLCAtNTEuMDAwMDY4KSAiIHBvaW50cz0iMzQuOTUyMjgzNiAzOS45NTI0MTk0IDQ0Ljk1MjI4MzYgNTkuOTUyNDE5NCAyNC45NTIyODM2IDU5Ljk1MjQxOTQgIj48L3BvbHlnb24+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=) !important;
border: none;
box-shadow: none !important
}

/The Message In The Delete Message Popup/

.message-2qRu38 {
background: #1c1c1c !important;
box-shadow: 0px 0px 8px var(--main) !important
}

/Profile Popup Background/

.body-r6_QPy, .topSection-y3p-_D {
background: transparent
}

/Mutual Server And Friend Tabs In Profile Popup/

.listRow-1iDGel {
background: transparent;
transition: 0.2s
}

.listRow-1iDGel:hover {
background: transparent;
box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 15px var(--main)
}

.listRow-1iDGel:active {
background: transparent;
box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 20px var(--main)
}

//
/MULTICOLORED BUTTONS/
/
/

/[[buttonstylekey]]/

//
/INVITE PAGE/
/
/

/Background/

.authBox-hW6HRx {
background: var(--bgother) !important;
box-shadow: none
}

//
/KEYBOARD BUTTONS/
/
/

.keybindShortcut-1BD6Z1 span {
background: var(--main) !important;
border: none !important;
color: white !important
}

.keybindShortcut-1BD6Z1 span:active {
background: var(--main);
border: none !important;
box-shadow: inset 0px 0px 10px black !important;
color: white !important
}

.keybindShortcut-1BD6Z1 span .bindArrow-2X3Aom g {
fill: white !important
}

//
/DONT PAY ATTENTION TO THIS THERE DEFINETILY ISNT ANYTHING WEIRD GOING ON IN LIGHT MODE/
/
/

.theme-light body {
background: url(https://i.imgur.com/m7mKpwR.gif);
background-size: cover;
}

.theme-light .appMount-3lHmkl {
background: #00000042
}

.theme-light .sidebar-2K8pFh {
background: -webkit-linear-gradient(360deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .57)), url(https://i.imgur.com/txINwOx.gif);
border-right: 1px solid var(--bordercolor)
}

.theme-light .members-1998pB {
background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .63)), url("https://media.tenor.com/images/22c4d8a6d1062e19d0ae9fbe88f816fe/tenor.gif");
}

.theme-light .sidebarRegion-VFTUkN {
background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, .87), rgba(0, 0, 0, 0)), url(https://i.imgur.com/txINwOx.gif);
background-size: cover;
border-right: 1px solid var(--bordercolor);
}

.theme-light .sidebarRegion-VFTUkN::before {
content: "THIS IS NOW PERMANENT BTW";
color: black;
background: transparent;
text-shadow: 1px 1px white, 1px -1px white, -1px 1px white, -1px -1px white, 2px 2px var(--main), 2px -2px var(--main), -2px 2px var(--main), -2px -2px var(--main);
font-size: 30px;
font-family: monospace;
}

.theme-light .container-lRFx4q {
border-left: 1px solid var(--main);
background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .63)), url("https://media.tenor.com/images/22c4d8a6d1062e19d0ae9fbe88f816fe/tenor.gif");
}

//
/OTHER STUFF RELATING TO TEXTBOXES/
/
/

/Textbox In Right-Click Menu/

.container-cMG81i {
background: var(--textbox)
}

/Filters In Textboxes/

.searchAnswer-3Dz2-q, .searchFilter-2ESiM3 {
background: #404040 !important;
color: white
}
}

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           A Discord Of Darkness And Color
@namespace      USO Archive
@author         FireFern
@description    `A style for Discord. A bunch of stuff is customizable. If you want to go in the CSS itself and change it, the code has lots of comments that should make navigation incredibly easy. I would also recommend you download the style here if you aren't there already. https://33kk.github.io/uso-archive/?style=201433Installing the style there lets you customize the stuff by clicking on the extension while downloading it on the userstyles website will just link you to the download page on the userstyles website (at least in my experience). It also loads way faster than the userstyles website.Another thing is that light mode actually looks really good with this style! It always did but I just forgot to mention it.`
@version        20210809.15.58
@license        CC-BY-4.0
@preprocessor   uso
@advanced color mainkey "Main Color" #FF0000
@advanced color homebottomkey "Friend List Bottom Color" #D03E00
@advanced color textboxkey "Textbox" #1A1A1A
@advanced dropdown bgimagekey "Background Image" {
Default--Canyon "Default- Canyon*" <<<EOT https://i.imgur.com/o73PEK7.jpg EOT;

	bgimagekey-custom-dropdown "Custom" <<<EOT /*[[bgimagekey-custom]]*\/ EOT;
}
@advanced text bgimagekey-custom "Background Image (Custom)" "https://example.com/image.png"
@advanced dropdown bgextrakey "Background Extra" {
	Default--0-7 "Default- 0.7*" <<<EOT rgb(0, 0, 0, .7) EOT;
Transparent "Transparent" <<<EOT transparent EOT;
0-5 "0.5" <<<EOT rgb(0, 0, 0, .5) EOT;
Black "Black" <<<EOT rgb(0, 0, 0) EOT;

}
@advanced dropdown bordercolorkey "Borders" {
	Default--Yes "Default- Yes*" <<<EOT var(--main) EOT;
No "No" <<<EOT none EOT;

}
@advanced color bgotherkey "Background Other" #000000
@advanced dropdown appmountkey "Cover Background" {
	Default--0-6 "Default- 0.6*" <<<EOT rgb(0, 0, 0, .6) EOT;
Transparent "Transparent" <<<EOT transparent EOT;
0-1 "0.1" <<<EOT rgb(0, 0, 0, .1) EOT;
0-2 "0.2" <<<EOT rgb(0, 0, 0, .2) EOT;
0-3 "0.3" <<<EOT rgb(0, 0, 0, .3) EOT;
0-4 "0.4" <<<EOT rgb(0, 0, 0, .4) EOT;
0-5 "0.5" <<<EOT rgb(0, 0, 0, .5) EOT;
0-7 "0.7" <<<EOT rgb(0, 0, 0, .7) EOT;
0-8 "0.8" <<<EOT rgb(0, 0, 0, .8) EOT;
0-9 "0.9" <<<EOT rgb(0, 0, 0, .9) EOT;
Darkness "Darkness" <<<EOT rgb(0, 0, 0) EOT;

}
@advanced dropdown friendgradientkey "Friend List Gradient" {
	Yes "Yes*" <<<EOT linear-gradient(var(--bgextra), var(--main), var(--homebottom)) EOT;
No "No" <<<EOT var(--bgextra) EOT;

}
@advanced dropdown buttonstylekey "Button Style" {
	Inset-Shadows "Inset Shadows*" <<<EOT /*Grey Buttons*\/
/*the edit buttons in account settings and maybe more*\/

.theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV, .theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV:hover, .theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV:active, .theme-light .lookFilled-1Gx00P.colorGrey-2DXtkV, .theme-light .lookFilled-1Gx00P.colorGrey-2DXtkV:hover, .theme-light .lookFilled-1Gx00P.colorGrey-2DXtkV:active {
    background: transparent;
    box-shadow: inset 0px 0px 20px #747f8d, inset 0px 0px 20px #747f8d, inset 0px 0px 50px #747f8d
}

/*Green Buttons*\/
/*in the emoji popout and maybe more*\/

.lookFilled-1Gx00P.colorGreen-29iAKY, .lookFilled-1Gx00P.colorGreen-29iAKY:hover, .lookFilled-1Gx00P.colorGreen-29iAKY:active {
    background: transparent;
    box-shadow: inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%), inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%), inset 0px 0px 50px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
}

/*Green Outlined Buttons*\/
/*in the popup that appears when u invite someone to a channel and maybe more*\/

.lookOutlined-3sRXeN.colorGreen-29iAKY, .lookOutlined-3sRXeN.colorGreen-29iAKY:hover, .lookOutlined-3sRXeN.colorGreen-29iAKY:active, .lookOutlined-3sRXeN.colorGreen-29iAKY:focus {
    background: transparent;
    color: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
    border: 1px solid hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
    box-shadow: inset 0px 0px 3px hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%)
}

/*Blurple Buttons*\/
/*in account settings and more*\/

.lookFilled-1Gx00P.colorBrand-3pXr91, .lookFilled-1Gx00P.colorBrand-3pXr91:hover, .lookFilled-1Gx00P.colorBrand-3pXr91:active, .lookFilled-1Gx00P.colorBrand-3pXr91:disabled {
    background: transparent;
    box-shadow: inset 0px 0px 20px var(--brand-experiment), inset 0px 0px 20px var(--brand-experiment), inset 0px 0px 50px var(--brand-experiment)
}

/*Red Buttons*\/
/*"Disable Account" button in account settings and maybe more*\/

.lookFilled-1Gx00P.colorRed-1TFJan, .lookFilled-1Gx00P.colorRed-1TFJan:hover, .lookFilled-1Gx00P.colorRed-1TFJan:active {
    background: transparent;
    box-shadow: inset 0px 0px 20px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%), inset 0px 0px 20px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%), inset 0px 0px 50px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%)
}

/*Red Outlined Buttons*\/
/*"Delete Account" button in account settings and maybe more*\/

.lookOutlined-3sRXeN.colorRed-1TFJan, .lookOutlined-3sRXeN.colorRed-1TFJan:hover, .lookOutlined-3sRXeN.colorRed-1TFJan:active {
    background: transparent;
    color: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
    border: 1px solid hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
    box-shadow: inset 0px 0px 3px hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%)
}

/*Other Grey Buttons*\/
/*"Block" and "Remove Friend" buttons in DM history and "Cancel" buttons in popups and maybe more*\/

.lookFilled-1Gx00P.colorPrimary-3b3xI6, .lookFilled-1Gx00P.colorPrimary-3b3xI6:hover, .lookFilled-1Gx00P.colorPrimary-3b3xI6:active {
    background: transparent !important;
    box-shadow: inset 0px 0px 20px #4f545c, inset 0px 0px 20px #4f545c, inset 0px 0px 50px #4f545c
}

/*White Outlined Buttons*\/
/*"Back" and join buttons that appear when previewing a server*\/

.lookOutlined-3sRXeN.colorWhite-rEQuAQ, .lookOutlined-3sRXeN.colorWhite-rEQuAQ:hover,.lookOutlined-3sRXeN.colorWhite-rEQuAQ:active {
    background: transparent;
    color: white;
    border: 1px solid white;
    box-shadow: inset 0px 0px 3px white
}

/*"Add Friend" Button*\/

div[style="color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%); background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"], div[style="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%); color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);"] {
    background: transparent !important;
    color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%) !important;
    box-shadow: inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%), inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%), inset 0px 0px 50px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%) !important
}

div[style="color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
    background: transparent !important;
    color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%) !important;
    box-shadow: inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 10%), inset 0px 0px 20px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 10%), inset 0px 0px 50px hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 10%) !important
} EOT;
Original "Original" <<<EOT /*"Add Friend" Button*\/

div[style="color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%); background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"], div[style="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%); color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);"] {
    box-shadow: none !important
}

div[style="color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
    box-shadow: none !important
} EOT;

}
@advanced dropdown mentionstylekey "Mention Style" {
	Style-1 "Style 1*" <<<EOT .theme-dark .wrapper-3WhCwL, .theme-light .wrapper-3WhCwL {
    background: var(--bgother);
    color: var(--main);
}

.interactive {
    transition: 0.15s ease-out
}

.interactive:hover {
    text-shadow: 0px 0px 3px var(--main);
    box-shadow: inset 0px 0px 5px var(--main), inset 0px 0px 5px var(--main)
} EOT;
Style-2 "Style 2" <<<EOT .theme-dark .wrapper-3WhCwL, .theme-light .wrapper-3WhCwL {
    background: transparent !important;
    box-shadow: inset 0px 0px 25px var(--main);
    color: white
}

.interactive {
    transition: 60ms ease-out
}

.interactive:hover {
    box-shadow: inset 0px 0px 100px var(--main);
} EOT;
Original "Original" <<<EOT  EOT;

}
@advanced color bgfloatkey "Floating Background" #111111
@advanced color linkkey "Links" #00B0F4
@advanced color lowsatlinkkey "Links (Low Saturation)" #5D99B1

==/UserStyle== */
@-moz-document domain("discord.com") {
    .theme-dark,
    .theme-light {
        /**************/
        --background-primary: transparent;
        /*a bunch of backgrounds*/
        --background-secondary: transparent;
        --background-tertiary: transparent;
        --background-secondary-alt: transparent;
        --channeltextarea-background: transparent;
        /*************/
        --background-floating: /*[[bgfloatkey]]*/;
        /*this one is for the menus that appear when u right click and others*/
        /*************/
        --background-modifier-hover: #a2a2a212;
        /*for a bunch of different hover backgrounds*/
        --background-modifier-active: #e8e8e812;
        /*for a bunch of different active state backgrounds*/
        --background-modifier-selected: #ffffff17;
        /*for a bunch of different selected backgrounds*/
        --background-accent: #4f545c42;
        /*this is shown in the emoji/gif selector when selecting an emoji*/
        /*************/
        --background-message-hover: #a8a8a812;
        /*the me...

Reviews

No reviews yet.