**Gradient Direct Messages** + **Member List Colors**

[keen patrol]

^ set border-radius to 25px and it looks really neat imo (using radial status as well)

[cunning stream]

;3

[delicate turret]

what would be the code for this?

[keen patrol]

get the code from the repo, then in every element, just add a "border-radius: 25px"
you can also add a variable for it in :root
i also did change the volors to be half its original because i felt it was too bright
for radial status: https://betterdiscord.app/theme/RadialStatus

[digital frost]

why is clyde gay

[digital frost]

i didnt know betterdiscord themes worked in vencord

[keen patrol]

the decor makers set his like that i guess

[keen patrol]

always did

[oak zephyr]

I don't think the :is()'s are needed inside :has()?

[tulip mirage]

btw i already uploaded member list on my GitHub

Great that you made it customizable

[timber hatch]

updated it for you

[timber hatch]

nope, only for :not
i somehow messed that up, but it doesnt matter

[keen patrol]

thanks, but im working on my own modification lol, wasting so much time on this random theme

[keen patrol]

https://github.com/NSPC911/vc-themes/blob/main/CSSSnippets.theme.css#L9-L92

when you expand the profile, it becomes brighter

not sure how i can hide the status icon

[wild oar]

i cant seem to get mine to work for some reason

[harsh mason]

same

[open agate]

is there away to change the color of replies and @ ?

[oak zephyr]

yeah
I don't think that's related to this snippet though
so probably better to go to #🎨-theme-development

[tulip mirage]

yeah

[brave garden]

Is there a way to limit the gradient to [aria-label="Direct Messages"] only?

Grabbed the right one, struggling to put the puzzle piece in the right place. (。_。)

[oak zephyr]

you mean to all of dms?

just remove the member list import

[brave garden]

Ahh, those are abbreviations. "Direct Messages" and "Member List" respectively.

Makes sense. Thanks!

[oak zephyr]

yeah
they say in the original msg too lol

[wanton sinew]

Stupid discord broke it

[keen patrol]

here before the creator

[class*="member"][class*="container"] > [class^=childContainer] {
    padding: 0;
    & > [class^=memberInner] {
        padding: 0 8px;
        width: unset
    }
}

should fix the snippet

@wanton sinew

[wanton sinew]

I will try

Thanks

[wanton sinew]

Works, ty!

[keen patrol]

np

[timber hatch]

honestly, i forgot to fix it

[tulip mirage]

thanks for keeping it anyhow up to date

[simple pumice]

yo u wabred to know what you were using to have that like background gradient

[keen patrol]

what background gradient?

[simple pumice]

like

behind eahc user

there is like

a green and orange-ish

background

idk how to explain it 😭

[keen patrol]

clyde?

[simple pumice]

wdym?

[keen patrol]

what exactly are you referring to bruh
like the gradient behind the profiles or the profile effect?

[simple pumice]

the gradient behind the profiles

sorry lmao idk how to describe it

[keen patrol]

buddy you are on the snippet for it

[simple pumice]

that was

so embarrassing for me

my god

[keen patrol]

https://github.com/NSPC911/vc-themes/blob/main/CSSSnippets.theme.css#L12-L95

[simple pumice]

LMAO tysm

[keen patrol]

[young hamlet]

how do i a change border radius if im using the @import?

[tulip mirage]

:root {
    --gDM-border-radius: 25px; /*add this to your root*/
}

[young hamlet]

i dont get it, where do i add that? quickcss?

i used the online themes box where you put in the github url and it just validates the code

[keen patrol]

add it in your quick css

literally that codeblock

just add it

dont add it to your online themes, add it to your quick css

[young hamlet]

oh, is there a way to fix the member list? the thing doesnt line up right, it its literally bordering the pfp edge and not having that little space between it, so when i hover over a name in the member list, i can see that little gap where the color isnt covering

[young hamlet]

cant really get apicture of the highlight, but you can see how it just looks weird with the color being right on the edge of the pfp instead of covering the little space before the pfp if that makes sense
http://puu.sh/Kqvji/6455cdee9e.jpg

[keen patrol]

@young hamlet chuck this into quick css

[young hamlet]

oh thanks

[tulip mirage]

I'm glad i started this

@keen patrol wanna make whole theme dependant on statuses, with me?

[keen patrol]

wdym by that?

[tulip mirage]

the same thing with this snippet but for everything

[keen patrol]

everything as in??

[tulip mirage]

do you understand what i mean?

[tulip mirage]

yeah

[keen patrol]

what everything

[tulip mirage]

everything you see

[keen patrol]

how would that work?

[timber hatch]

i actually didnt push a fix

but it seems to be fixed?

oh i found the issue

[keen patrol]

were you using #🎨-css-snippets message by any chance?

[timber hatch]

nope

[timber hatch]

you were getting that issue cause you used this
#1298575279169605693 message

probably

[pulsar eagle]

uhh why is it not rounding the corners? it doesn't change no matter what value i set it to

[tulip mirage]

best way is to do 25% or any %

[pulsar eagle]

just change px to %?

[tulip mirage]

i guess so, i would do that

[pulsar eagle]

sorry i'm pretty new to css themes

[tulip mirage]

are you sure you do it the one that is on top?

no double :root {}

[tulip mirage]

pretty much its how it should be

[pulsar eagle]

can you send yours

[tulip mirage]

literally the same as yours

[pulsar eagle]

wtf 😭

[pulsar eagle]

guys i fixed it, but it doesn't always work for me...

or actually more precisely it doesn't update the color when the status updates, i.e. when i'm online and start typing the color disappears, which also happens when switching online statuses

[livid crater]

ML file

:root {
    --gDM-online: linear-gradient(to right, rgb(68, 105, 68) , transparent);
    --gDM-offline: linear-gradient(to right, rgb(66, 66, 66) , transparent);
    --gDM-dnd: linear-gradient(to right, rgb(130,70,70) , transparent);
    --gDM-idle: linear-gradient(to right, rgb(135, 105, 75) , transparent);
    --gDM-streaming: linear-gradient(to right, rgb(63, 33, 88) , transparent);
    --gDM-border-radius: 12px;
}

div > [class*="layout_"] {
    border-radius: var(--gDM-border-radius);
    margin: 0.3px;
}

[class^="memberInner"]:has([mask*="online"], [fill="#43a25a"]) {
    background: var(--gDM-online);
}
[class^="memberInner"]:has([mask*="offline"], [fill="#f0b232"]) {
    background: var(--gDM-offline);
}
[class^="memberInner"]:has([mask*="dnd"], [fill="#d83a42"]) {
    background: var(--gDM-dnd);
}
[class^="memberInner"]:has([mask*="idle"], [fill="#ca9654"]) {
    background: var(--gDM-idle);
}
[class^="memberInner"]:has([mask*="streaming"], [fill="#9147ff"]) {
    background: var(--gDM-streaming);
}
/* make the pill fill all of the memberlist */
[class*="memberInner_"][class*="layout_"] {width: 100%}

DM file

:root {
    --gDM-online: linear-gradient(to right, rgb(68, 105, 68) , transparent);
    --gDM-offline: linear-gradient(to right, rgb(66, 66, 66) , transparent);
    --gDM-dnd: linear-gradient(to right, rgb(130,70,70) , transparent);
    --gDM-idle: linear-gradient(to right, rgb(135, 105, 75) , transparent);
    --gDM-streaming: linear-gradient(to right, rgb(63, 33, 88) , transparent);
    --gDM-border-radius: 12px;
}

ul > li > [class*="interactive_"] {
    border-radius: var(--gDM-border-radius);
    margin: 0.3px;
}

[class^="link_"]:has([mask*="online"], [fill="#43a25a"]) {
    background: var(--gDM-online);
}
[class^="link_"]:has([mask*="offline"], [fill="#f0b232"]) {
    background: var(--gDM-offline);
}
[class^="link_"]:has([mask*="dnd"], [fill="#d83a42"]) {
    background: var(--gDM-dnd);
}
[class^="link_"]:has([mask*="idle"], [fill="#ca9654"]) {
    background: var(--gDM-idle);
}
[class^="link_"]:has([mask*="streaming"], [fill="#9147ff"]) {
    background: var(--gDM-streaming);
}
/* make the pill fill all of the memberlist */
[class*="memberInner_"][class*="layout_"] {width: 100%}

I updated the "fill" in there, seems to work for me, try it out.

[timber hatch]

i'll look into that

[timber hatch]

you cant really do much about that, thats just how discord updates the selectors im using and how the css is applied

maybe there are new selectors i can use with the new visual refresh, i'll look into that too

[timber hatch]

yeah.. should be fixed now

[livid crater]

did you updated the streaming too? You can copy the hex I sent (I had to scroll in some servers here to look for someone who was streaming lmao)

[subtle estuary]

pairs well with

span.username__703b9 {
    font-weight: bold;
}

(because role color contrast)

[timber hatch]

OH I FORGOT

thanks for your help

[subtle estuary]

btw the dm list conflicts with the colorsighted plugin

makes offline users appear online

disabling ColorSighted fixed the issue

[livid crater]

I'm gonna say that its probably due to the hex values used by the other plugin, you can copy the script I sent earlier and update with the correct values and it should work

[wanton sinew]

Can you update this awesome snippet?

[timber hatch]

sure, i'll look into it soon

its hard to find when things break when i dont use the snippets

[timber hatch]

It works?

i dont see any issues

[wanton sinew]

Issues like this, or sometimes gradient disappears (very often) and you have to reenter the channel

[wanton sinew]

I mean this

[keen patrol]

i have never experienced that issue as well

[subtle estuary]

I think it happens when status color changes?

Maybe

[tulip mirage]

that's some weird specific issue

[tulip mirage]

it may be your theme or some plugin conflicting with this snippet

[timber hatch]

we dont seem to experience this

idk

[pulsar eagle]

this happens to me too

[harsh mason]

yo im there look

[young ledge]

discord just broke this snippet

[blissful tusk]

rip

[young ledge]

i managed to fix it

/* DM */
:root {
    --gDM-online: linear-gradient(to right, rgb(68, 105, 68) , transparent);
    --gDM-offline: linear-gradient(to right, rgb(66, 66, 66) , transparent);
    --gDM-dnd: linear-gradient(to right, rgb(130,70,70) , transparent);
    --gDM-idle: linear-gradient(to right, rgb(135, 105, 75) , transparent);
    --gDM-streaming: linear-gradient(to right, rgb(63, 33, 88) , transparent);
    --gDM-border-radius: 12px;
}

ul > li > [class*="-interactive"] {
    border-radius: var(--gDM-border-radius);
    margin: 0.3px;
}

[class*="-link"]:has([mask*="online"], [fill="#43a25a"]) {
    background: var(--gDM-online);
}
[class*="-link"]:has([mask*="offline"], [fill="#80848e"]) {
    background: var(--gDM-offline);
}
[class*="-link"]:has([mask*="dnd"], [fill="#d83a42"]) {
    background: var(--gDM-dnd);
}
[class*="-link"]:has([mask*="idle"], [fill="#ca9654"]) {
    background: var(--gDM-idle);
}
[class*="-link"]:has([mask*="streaming"], [fill="#9147ff"]) {
    background: var(--gDM-streaming);
}
/* make the pill fill all of the memberlist */
[class*="-memberInner"][class*="-layout"] {width: 100%}

/* ML */
:root {
    --gDM-online: linear-gradient(to right, rgb(68, 105, 68) , transparent);
    --gDM-offline: linear-gradient(to right, rgb(66, 66, 66) , transparent);
    --gDM-dnd: linear-gradient(to right, rgb(130,70,70) , transparent);
    --gDM-idle: linear-gradient(to right, rgb(135, 105, 75) , transparent);
    --gDM-streaming: linear-gradient(to right, rgb(63, 33, 88) , transparent);
    --gDM-border-radius: 12px;
}

div > [class*="-layout"] {
    border-radius: var(--gDM-border-radius);
    margin: 0.3px;
}

[class*="memberInner"]:has([mask*="online"], [fill="#43a25a"]) {
    background: var(--gDM-online);
}
[class*="memberInner"]:has([mask*="offline"], [fill="#f0b232"]) {
    background: var(--gDM-offline);
}
[class*="memberInner"]:has([mask*="dnd"], [fill="#d83a42"]) {
    background: var(--gDM-dnd);
}
[class*="memberInner"]:has([mask*="idle"], [fill="#ca9654"]) {
    background: var(--gDM-idle);
}
[class*="memberInner"]:has([mask*="streaming"], [fill="#9147ff"]) {
    background: var(--gDM-streaming);
}
/* make the pill fill all of the memberlist */
[class*="-memberInner"][class*="-layout"] {width: 100%}

@timber hatch sorry for the ping but you should update the code in the import links

[timber hatch]

no its fine, thanks for the fix

im not home right now though so i cant use my pc

[young ledge]

users on do not disturb appear with the online color and i suspect a recent discord update caused this bug because it didn't always use to happen

seems to be the case when someone is both on mobile and on do not disturb

looks like it happens with users on mobile and idle too

oh also i noticed when someone goes offline, the offline gradient won't show up, there's just no gradient. but if you go to their DMs and back, the offline color gradient will show up

i do not remember this happening until recently as well

[young ledge]

it's inconsistent though

[young ledge]

i guess it also happens when someone goes online?

[worthy pumice]

I fixed it, it was the fill values that needed to be updated

/* DM */
:root {
    --gDM-online: linear-gradient(to right, rgb(68, 105, 68) , transparent);
    --gDM-offline: linear-gradient(to right, rgb(66, 66, 66) , transparent);
    --gDM-dnd: linear-gradient(to right, rgb(130,70,70) , transparent);
    --gDM-idle: linear-gradient(to right, rgb(135, 105, 75) , transparent);
    --gDM-streaming: linear-gradient(to right, rgb(63, 33, 88) , transparent);
    --gDM-border-radius: 12px;
}

ul > li > [class*="interactive_"] {
    border-radius: var(--gDM-border-radius);
    margin: 0.3px;
}

[class*="link_"]:has([mask*="online"], [fill="#45a366"]) {
    background: var(--gDM-online);
}

[class*="link_"]:has([mask*="offline"], [fill="#84858d"]) {
    background: var(--gDM-offline);
}

[class*="link_"]:has([mask*="dnd"], [fill="#da3e44"]) {
    background: var(--gDM-dnd);
}

[class*="link_"]:has([mask*="idle"], [fill="#ffc04e"]) {
    background: var(--gDM-idle);
}

[class*="link_"]:has([mask*="streaming"], [fill="#9147ff"]) {
    background: var(--gDM-streaming);
}

/* make the pill fill all of the memberlist */
[class*="memberInner_"][class*="layout_"] {width: 100%}

/* ML */
:root {
    --gDM-online: linear-gradient(to right, rgb(68, 105, 68) , transparent);
    --gDM-offline: linear-gradient(to right, rgb(66, 66, 66) , transparent);
    --gDM-dnd: linear-gradient(to right, rgb(130,70,70) , transparent);
    --gDM-idle: linear-gradient(to right, rgb(135, 105, 75) , transparent);
    --gDM-streaming: linear-gradient(to right, rgb(63, 33, 88) , transparent);
    --gDM-border-radius: 12px;
}

div > [class*="layout_"] {
    border-radius: var(--gDM-border-radius);
    margin: 0.3px;
}

[class*="memberInner_"]:has([mask*="online"], [fill="#45a366"]) {
    background: var(--gDM-online);
}

[class*="memberInner_"]:has([mask*="offline"], [fill="#84858d"]) {
    background: var(--gDM-offline);
}

[class*="memberInner_"]:has([mask*="dnd"], [fill="#da3e44"]) {
    background: var(--gDM-dnd);
}

[class*="memberInner_"]:has([mask*="idle"], [fill="#ffc04e"]) {
    background: var(--gDM-idle);
}

[class*="memberInner_"]:has([mask*="streaming"], [fill="#9147ff"]) {
    background: var(--gDM-streaming);
}

/* Make the pill fill all of the memberlist */
[class*="memberInner_"][class*="layout_"] {width: 100%}