#🎨-theme-development

1 messages · Page 44 of 1

sturdy stratus
#

of 20 px

#

then 23px fixed height on header

#

then moved the header 32 px above

#

and the replied message 23 px below

#

and it works but i wondered if there's another way...

#

what does the 2.2em means

#

its font size as i've read

clear siren
#

2.2 text heights

sturdy stratus
#

why 2.2

clear siren
#

idk lol

sturdy stratus
#

um ok

#

on what edge cases it doesn't work btw?

#

maybe i would work on them

clear siren
#

when someone uses app commands for an example

#

also codeblocks can act weird

sturdy stratus
#

i see

crimson skiff
half crystal
crimson skiff
#

giving me @snippet-dev was a mistake, im gonna post random ahh snippets

half crystal
steel scroll
crimson skiff
#

i cant even joke about this, i literally dream about what my next snippet should be

crimson skiff
crimson skiff
half crystal
#

WHAT THE FUCK DID I JUST DO 😭

image.png
#

WHY DO VISIBLE AND SCROLL DO THE SAME FUCKING THING AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

i love overflow

bleak gust
#

what happened to my internet connection

half crystal
#

i cant just make the serverlist overflow can i
uhegajerashfsdadfh
ive tried every fix in the book
no result

image.png image.png
pure cairn
half crystal
#

??????????????

image.png
echo frost
#

errr technical difficulties

#

(I'm on mobile rn)

plain kelp
#

Relatedly, I need a theme that replaces boring emoji with Dealer's versions

iron smelt
echo frost
#

it was revived

echo frost
iron smelt
echo frost
#

truly a :happyFaceSecondary: moment

#

it would be even more so if smiley dealer revived joined vencord!

distant nebula
#

yo tell me if this theme working

distant nebula
#

mine is working fine

image.png
drifting arrow
distant nebula
#

what

#

do u mean the font?

drifting arrow
grand surge
#

hello, can anybody fix this now-horrible pasted code that was working but suddenly it doesnt

📎 message.txt
#

it originally was broken i adjusted some height and it was meh but its just this now again

image.png
#

tried update classes website still same

fresh cedar
#

I need help

#

@iron smelt can you help?

#

sorry to ping

iron smelt
iron smelt
hot kite
#

DevilBro code may in some cases cause your computer to explode violently.

iron smelt
iron smelt
clear siren
#

yes

glacial citrus
#

is it possible to disable animations with just css

#

(i shoudl really know this)

iron smelt
glacial citrus
#

its a certain animation

#

not all

iron smelt
#

prolly, unless it’s one of those ones that discord decided to be handled by Java

#

Which isn’t a lot

glacial citrus
iron smelt
glacial citrus
crimson skiff
glacial citrus
#

for some reason, the animation lags a lot on my computer (its not the specs)

crimson skiff
#

my computer itself lags a lot, cant stream without it obliterating itself, so im just forced to use reduced motion

#

but honestly, im kind of used to it, also have reduced motion on my phone, the instant stuff is amazing

crimson skiff
#

made another snippet blobcatcozy

[class^=channelBottomBarArea_]:has([class^=entryPointButtonContainer_]) {
    [class^=channelAppLauncher] { display: none; }
    [class^=entryPointButtonContainer] {
        [class^=contents] { display: none; }
        [class^=entryPointAppCommandButton] {
            background-color: var(--channeltextarea-background);
            width: 48px;
            min-width: 24px;
            &::after {
                position: relative;
                margin: 0 auto;
                content: "/";
                color: var(--text-normal);
                font-size: 1.25em;
            }
        }
    }
}

basically removes the app launcher and makes the command button look nicer if you are in a dm with a bot

echo frost
#

visual refresh is starting to look pretty good

#

new options i think too

2025-01-16_19.png
iron smelt
echo frost
#

huh

iron smelt
#

thats blasphemy

echo frost
#

the blasphemy is the vencord discord server not having free smiley dealer revived

iron smelt
#

frfr

echo frost
echo frost
sturdy stratus
#

guys, can you help me understand how buttonContainer_f9f2ca height is calculated, i can't seem to figure it out

#

it's the reactions buttons that u can give to a comment

#

i thought its the height padding of buttonsInner_d5deea * 2 + hoverBarButton_e986d9 height

#

but for some reason there's an extra 6 px apparently that i dont understand where they come from

#

the padding part is right, but for some reason its not 24 px its 30 (when i set the height as 24)

half crystal
#

BIGGETH SHIGGETH IS HERE

image.png
half crystal
#

i have made fire (might need to adjust transparency tho)

image.png image.png image.png
oak plover
#

And for servers with no banners do you think like a basic gradient might look alright

#

I’m saying might cause there’s no version of this concept without a banner image

half crystal
#

also discord themselves would probably do nothing with it to give you feelings of shame and want you to buy nitro lmfao

oak plover
#

hmm

#

let me check out the html real quick

#

you could do like

#

.header_fd6364:last-child:before

#

and then style the pseudo to take up the same space the banner would take

half crystal
#

too lazy lmao
i think ill just post the update to this now as its all done and ready

image.png
oak plover
#

alr

#

might try it myself later then

oak plover
#

it's alright

echo frost
half crystal
crimson skiff
#

you made peak

half crystal
echo frost
#

(also i cleaned it up a long time ago when i didn't know to use ^= so it's quite bad)

lunar hamletBOT
#

swapMicDeafen.css: Lines 1-10

/**
* @name Swap Mic and Deafen Icon
* @author krystalskullofficial, vending.machine
* @version 0.3
* @description erm... title sums it up pretty good
*/

[class*=panels_] :is([aria-label="Mute"], [aria-label="User Settings"]) {
    order: 1;
}
iron smelt
#

Banger css snippet

echo frost
#

aria-label though :(

#

also why would you even want that

iron smelt
iron smelt
echo frost
#

probably could use svg selector of some kind, but they're lottie icons which makes it quite difficult

#

also couldn't you use order: -1 on the deafen icon instead of order 1 on the other icons?

burnt maple
#

aria label based selector

plain kelp
#

Not based at all

half crystal
bleak gust
#

this looks like a general rendering issue likely not specific to your CSS

crimson skiff
#

probably disable hardware rendering i guess

clear siren
#

css too fire, gpu fried

half crystal
bleak gust
#

you might want to fix how it jumps slightly at the end though

sturdy stratus
bleak gust
# sturdy stratus any help

i have no idea element you're about as I assume it's an experiment, and I don't know what that experiment is

sturdy stratus
#

@bleak gust

bleak gust
#

oh 😭

#

i disabled that experiment

sturdy stratus
#

?

sturdy stratus
#

it seems that i've figured everything out

#

buttonsInner_d5deea border is set as 1px

#

by default, therefore 1px above and 1px below is 2px

#

padding in button_f7e168 is set as 2px

#

so 2px above and below is 4px, + border its 6px, and thats the 6px i've been wondering about

echo frost
#

it doesn't have any height for me

2025-01-19_17.png
sturdy stratus
smoky fog
#

any css to remove/hide this

image.png
iron smelt
smoky fog
#

oh *

#

thank you!

grand surge
valid heron
grand surge
limber summit
distant spindle
limber summit
#

oh thank you. looked through all the channels a bit too fast and missed it

distant spindle
#

No worries, cheerios'

winged rapids
#

does anyone know the css code to add my own font. I created a github repo with the font but idk what the css is to type in

pure cairn
vestal field
#

in that case you dont need any @import or external stuff

winged rapids
grand surge
half crystal
# grand surge hey
  1. try the class updater
  2. be careful. if people dont want to answer your question, its probably becuase theres an answer in #theme-support , #faq or somewhere else. doing this too many time will get you the needy-for-support role, which will ban you from support channels. Read.
grand surge
#

i tried class updater, if you read my msg u'd see!
faq theme support told me to try class updater, yeah, it didnt work
i asked ppl experienced with css to help me figure out whats wrong

#

not that an already existing theme isnt working for me

#

that snippet is old anyways i know that

#

like you said, read!

half crystal
grand surge
#

so you didnt even bother jumping to the message and assumed that i shouldnt get support and just read the faq, how fun

pure cairn
#

so the class updater couldn't really help with it

#

and tbh, I don't even remember if it works with attribute selectors instead of plain class names

#

which might also be one of the reasons it didn't work

#

I might try updating it in the following days if I have some spare time

stable compass
#

does anyone have the gif for discord loading?

#

the icon spinning on the bootstrapper

iron smelt
stable compass
#

looks a tad blurry, no?

#

I cant find one that's clear

iron smelt
#

Yeah thats the best ive got

stable compass
#

thatll work for now, thanks

#

ive tried grabbing it from the bootstrapper but idk how tbh

half crystal
grand surge
#

holy youre overreacting

#

that wasnt even insisting

iron smelt
#

Average Ez user

IMG_1094.png
grand surge
#

thank you for your contribution

grand surge
bleak gust
#

what

#

why does it play fine here

#

but not in mpv

stable compass
#

found out how

bleak gust
bleak gust
#

and check devtools

#

it's really funny how it Doesn't Load when you genuinely don't have internet and have cache off

grand surge
#

is there a way to replicate and make this work with visualrefresh3?

image.png
crimson skiff
grand surge
#

aw

#

visual refresh experiment is weird i tried to make the space between title bar and content smaller aswell but couldnt

marble tendon
#

hey ya'll, does anyone know how to make a single theme that has different color schemes for discord's light mode and dark mode?

#

oh, saw the bd css variables docs, ig you just override both light mode and dark mode css variables and then use prefers-color-scheme for the shared variables (is that even a thing for discord theming?)

clear siren
#

you can use the class in body for light or dark mode

clear siren
#

just prefix selectors with it accordingly and you can have 2 completely different themes if you want

grand surge
#

this ugly n big how can i make it so its nonexistent 😭

image.png
fiery dagger
#

Hey guys, I’m looking for this kind of theme, anyone has ideas where can I find it?

IMG_3869.png
winged rapids
#

can someone please help me

#

I have made a small little css to add my own custom font and im trying to add it to another persons theme but the theme has 1 line that overrides the custom font. The issue is that this 1 line is in an import from github so i cant modify it to remove it

crimson skiff
crimson skiff
fiery dagger
#

in the screen above I have shared

echo frost
half crystal
#

lmfao

Make design experiment v4 theme
Uptick in people wanting a design experiment v4 theme
Masterful gambit me

worn thistle
#

I'm using Better Folders with the theme system24 and it's causing an issue with spacing between the main server list, folder list, and server section. From what I can tell, the folder list is essentially moving twice as far as it should. Is there any way I can adjust how far it moves via quick css or something?

image.png
#

(I was advised to come over here from the support channel regarding this issue)

iron smelt
worn thistle
#

It appears to be

vestal field
tardy cliff
#

so i have "space between message groups" at an acceptable place, but the spacing between the lines of text in individual messages has gotten smaller and it is really hard for me to read. could someone help me with a fix for this? (i usually use sys24 [monochrome] too, but it's not at fault for this)

edgy sentinel
#

I plan to add a stricter Content Security Policy with a domain whitelist. This means that all non-whitelisted domains will be blocked and themes will not be able to import css, images, fonts, etc from there

The current list of allowed domains:

*.github.io
raw.githubusercontent.com
*.gitlab.io
gitlab.com
*.codeberg.page
codeberg.org
*.githack.com
jsdelivr.net
fonts.googleapis.com
i.imgur.com
i.ibb.co
cdn.discordapp.com
media.discordapp.net

If there are any other domains I forgot about, now is the right time to say

No

  • Personal sites
  • Image Hosts
  • Shady Sites
iron smelt
echo frost
edgy sentinel
#

is that an actual use case

#

seems so niche

echo frost
#

idk

#

i have it in my quickcss for some reason

edgy sentinel
#

that site seems shady so i didn't add it

echo frost
#

i have it for this

2025-01-23_18.png
#

very necessary

iron smelt
#

Brazy

echo frost
#

here's all of the sharex image and text uploaders
(prob don't add all of them, but maybe some)

2025-01-23_18.png
crimson skiff
edgy sentinel
#

vencord itself

bleak gust
#

is it just me or are these buttons darker now

Sqaaakoi-24-01-2025-16-18-15.png
#

canary change?

#

it's set to var(--channel-icon)

#

is Visual Refresh leaking

echo frost
#

yeah they did mess up

iron smelt
echo frost
# 
[class^=lottieIcon_] {
  --channel-icon: var(--interactive-normal);
}
#

pretty sure that fixes all of it?

iron smelt
echo frost
#

oh

#

didn't think of hover

#

wait

bleak gust
#

ITS NOT EVEN CANARY ONLY hollow

#

it looks so bad

iron smelt
#

No, I made them change color only when you hover

bleak gust
#

also i feel like the icons are smaller for some reason?

#

is it just perception of it though?

echo frost
#

i think they're the same size?

bleak gust
#

i'm probably tricking myself because I recently built a plugin that replicates those icons somewhere else but slightly larger

crimson skiff
bleak gust
#

i can't make that change but i think it would be reasonable considering why the CSP is changing

crimson skiff
bleak gust
#

what

crimson skiff
#

and anyways, i doubt css can send discord tokens through a webhook (referring to the token logger-disguised-as-voice channel crasher)

crimson skiff
bleak gust
#

though #🎨-css-snippets rules could reasonably be lifted to the new CSP that Vencord will implement

bleak gust
crimson skiff
bleak gust
iron smelt
crimson skiff
bleak gust
#

all i know is that it probably abuses themeattributes or the user profile panel avatar

#

you have to ask @small pond or @velvet pawn

crimson skiff
#

unless someone does like an attribute select for the token, idk how they would happen

bleak gust
#

token isnt in the dom

#

user id is

iron smelt
#

I’m also pretty sure this is just more about what could be hidden within the code…

crimson skiff
small pond
crimson skiff
#

wait i read wrongly husk
i thought it sends the discord token, not user id

#

i have to be tweaking

crimson skiff
worn thistle
iron smelt
pure cairn
worn thistle
#

Sigh

clear siren
burnt maple
crimson skiff
burnt maple
#

idk aliucord did this same shit and some madlad went through all the morbillion themes and uploaded that shit to another, supported service and then uploaded all the alternate versions so the themes could work

#

personally i like having lists of base64 imports at the end of my code in variables

#

if you dont have 2mb of CSS, what are you living for in life?

velvet basin
#

is it possible to code theme and do it "real time"

#

cuz every single time i have to re-link to see the changes that i've made

pure cairn
clear siren
grand surge
#

how would i fix these overplacements and gaps

image.png
#

mostly i need the gap on titlebar gone

#

others arent that important

iron smelt
weak fiber
#

can I override a role colour with css somehow? it's a stupid black and I cannot read it at all

#

ok I got it with this

image.png
#

but now the RoleColourEverywhere plugin still makes mentions the original one

cobalt echo
#

could someone help me with a css snippet to color the mic and headphones icons blue again when enabled?

image.png
supple lodge
#

anyone know how I could re-order them? (gif on the right, sticker on the left)
(In the chatbar) thanks

ExpzOtt.png
clear siren
lunar hamletBOT
clear siren
#

there are some places where it doesn't apply

#

but using those filters on all names is the only good way to fix all unreadable colors at once without having to hardcode each rgb value

weak fiber
#

oh that's awesome thank you !

#

only thing now is they seem desaturated lol

clear siren
#

you can try playing with the values, I didn't try dialing them in too much

weak fiber
#

yeah I'll mess around a bit with it when I have more time, thank you :D

clear siren
#

from my readme :D

image.png
#

oh wait that's happening very soon

crimson skiff
echo frost
weak fiber
echo frost
#

pretty sure it'll be slightly more efficient if you remove it

#

* selects all elements

supple lodge
#

maybe a little too funky XDD
but thanks for trying

omj7GtZ.png
#

I added order for the separator and send button, and seems to work now, thanks

tight citrus
clear siren
# tight citrus

add to quickcss [class^='wordmarkWindows'] { padding-left: 10px;} see what happens

#

adjust as you see fit

tight citrus
cobalt echo
#

is it possible to have per-user chat wallpapers? maybe with css?

echo frost
cobalt echo
bleak gust
echo frost
# 
[class^=subtitleContainer_]:has(
  img[src*="avatars/358257152370016267/"]
)+[class^=content_]>main {
  background-color: rgb(125, 52, 52);
}

[class^=subtitleContainer_]:has(
  img[src*="avatars/789761307125612544/"]
)+[class^=content_]>main {
  background-color: rgb(52, 76, 125);
}
cobalt echo
# echo frost like this?

wow thanks. yea it was just a thought I had, not sure if it's actually a good idea once implemented haha. I will use your snippet, thanks!

echo frost
#

probably would be better to change variables actually

#

more efficient and look better

#

but that's what you were wanting right?

cobalt echo
crimson skiff
#

not just background color, could also have an image set as the background

pastel tiger
#

i need with css to hide YOU ARE CURRENRLY MUTED popup at bottom left in discord

crimson skiff
# pastel tiger

enable f8 break, open devtools (ctrl+shift+i), when that happens, press f8, then use element picker to select element, get element class name, then you just put this in your quick css

.classname {
  display: none !important
}
echo frost
# pastel tiger

You can't hide a specific tooltip
also why do you even want to hide it?
i can't get it to show up for more than a few seconds and then it won't show up until i restart discord

2025-01-26_00.png
#

you MIGHT be able to use be able to use this style in .theme-dark, but maybe not

2025-01-26_00.png
pastel tiger
#

i was struggling to get to it

#

the reason i want to hide it, i play a game called geometry dash and i have auto deafen when i get far into the level, and since i click loud the pop up comes up and i see it in the corner of my eye and it messes me up and kills me somtimes

#

it shows up all the time for me even with noise suppression

crimson skiff
echo frost
mint kiln
#

anyone know which class does the hover name thing is?
i somehow made it transparent and uh

mOWnhegWNAKl1ge3WkNDGmBUJ.png
#

(pls ping if you know)

half crystal
mint kiln
#

thanks

#

yay it fix

cgTU7GP1C5ooLeV5IVUcEB3QJ.png
half crystal
mint kiln
#

true

pastel tiger
pastel tiger
#

hi i need help hiding div.tooltipcontent-b6c360

half crystal
pastel tiger
#

thank you il try it

half crystal
pastel tiger
#

that sounds good to me

#

honestly i would rather remove all toolips

pastel tiger
#

that might help

#

for some reason i still saw the popup for you are currently muted

#

if you can fix it for me il pay you

half crystal
pastel tiger
#

and all popups are nah

half crystal
pastel tiger
echo frost
#

I would not recommend hiding all of them

pastel tiger
#

but im paying someone to fix it for me since i give up

echo frost
pastel tiger
#

2024 is just the worst year

#

it wasnt a thing before

#

YOU ARE MUTED

echo frost
pastel tiger
echo frost
pastel tiger
#

i ussauly dont die

#

but somtimes i do

#

i see it and it makes me not focus on the game for a split second

#

2024 is worst year forever

#

nothing good happened in 2024

echo frost
#

and send a screenshot

crimson skiff
#

I'll see if i can do it in my server

crimson skiff
pastel tiger
echo frost
crimson skiff
#

it should still roughly be the same no?

pastel tiger
crimson skiff
#

damn

pastel tiger
#

even with nose supression

#

the pop up comes up

echo frost
echo frost
pastel tiger
# echo frost <@524721855622414348> * turn on the f8 break plugin * press ctrl+shift+i to ope...

<div class="theme-dark images-dark layer_cd0de5 disabledPointerEvents_cd0de5" style="position: absolute; bottom: 51px; left: 207px;"><div class="tooltip_b6c360 tooltipTop_b6c360 tooltipGreen_b6c360 tooltipDisablePointerEvents_b6c360" style="opacity: 1; transform: none;"><div class="tooltipPointer_b6c360 tooltipPointerBg_b6c360" style="left: calc(50% + 0px);"></div><div class="tooltipPointer_b6c360" style="left: calc(50% + 0px);"></div><div class="tooltipContent_b6c360">You are currently muted!</div></div></div>

this is the full code

#

ok wait u said screenshot mb

echo frost
#

that'll work too

#

try this

[style$="bottom: 51px; left: 207px;"]>.tooltipGreen_b6c360 {
  opacity: 0.5;
}
#

it'll just make it mostly transparent rn for testing purposes

#

if it works, change opacity: 0.5 to display: none

pastel tiger
#

alright

echo frost
#

i still can't get it to show up for more than a few seconds though

#

very weird

pastel tiger
echo frost
#

uh that's weird

pastel tiger
#

dont we need to find the code that actaully triggers it to do it?

echo frost
#

does display: none make it disappear

#

can you have devtools open again

pastel tiger
pastel tiger
echo frost
#

oh that's why

pastel tiger
#

what is it?

echo frost
pastel tiger
# echo frost

thats a seprate code to remove the scroll bar, but il remove that for now

echo frost
#

add a bracket here and delete the style*=bottom 50... line

2025-01-26_16.png
echo frost
pastel tiger
#

ok

pastel tiger
echo frost
#

yeah

pastel tiger
echo frost
#

can you send your whole quickcss

#

there's still an error it looks like

pastel tiger
#

alright hold on

#

i have a theme to make fonts better

#

ok i removed the theme and jsut added it in the themes folder so this should be easier

📎 quickCss.css
echo frost
#

the :root{ was missing a right bracket (})

pastel tiger
#

alright ty

#

hopefully this works

echo frost
pastel tiger
echo frost
pastel tiger
echo frost
#

and discord

echo frost
pastel tiger
#

ok

#

just waiting for the popup

echo frost
#

if it's display: none, you wont see the popup

#

that's why i had opacity

pastel tiger
#

ok il change it back to opacity

#

does the opacity thing work for other things?

echo frost
#

oh i think you need opacity: 0.5 !important;

#

yeah oops my bad

#

there was another opacity that was overriding the 0.5

pastel tiger
#

like that?

image.png
echo frost
#

yeah

pastel tiger
#

i changed it do 0.25 just to make sure

image.png
#

thank you for the dedication for helping me so far

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

#

@echo frost IT WORKED I LOVE YOU OMG

echo frost
#

np, you don't have to spam though lol

honest perch
#

I've asked about that before, but now I can explain it clearly

Custom ping color turns into the default ping color when I hover it

image.png image.png
#

rah

#

Wait

# 
:root {
    --ping: rgb(50, 7, 18);
    --pinghover: rgb(30, 4, 10);
    --pingthing: rgb(77, 15, 43);
}
div[class*="mentioned"] {
    background-color: var(--ping);
}

div[class*="mentioned"]:before {
    background-color: var(--pingthing);
}

div[class*="mentioned"]:hover {
    background-color: var(--pinghover);
}
#

there's a code how I remember

echo frost
honest perch
#

I need to replace my code with it or to add it?

#

Ok, I understood

#

Tysm

#

It helped

echo frost
#

@smoky fog can you send a screenshot of where you put the css

smoky fog
#

like this?

image.png
echo frost
#

oh

#

make sure quickcss is on

#

in settings > vencord

#

if it is, then open devtools (ctrl+shift+i) then select element the emojis like this

2025-01-27_02.png
#

@smoky fog ^

smoky fog
#

okay let me try

#

after that?

#

oh got it now

image.png
#

thank you!

half crystal
#

can you import css files stored locally on your system? if you can, i can do some insane shit but i cant get it working.

image.png
pure cairn
half crystal
pure cairn
#

It's a small trick I use to update large theme files instead of reloading the client every time

#

Small css file active with large theme imported, I change the import and save the small file to refresh everything

trim rune
#

i need a theme please

half crystal
trim rune
half crystal
trim rune
sturdy stratus
#

i've noticed that u can do scss stuff and vencord accepts it

#

but if i save a theme as .scss it isn't recognized in the themes folder

#

what the hell is going on

plain kelp
#

Css has nesting, if that's what you mean

sturdy stratus
#

huh?

plain kelp
#

Which used to be the main selling feature of scss

sturdy stratus
#

i thought this was only a scss thing

plain kelp
#

It used to be

sturdy stratus
#

🤔

#

i'm reading abbout it now, thanks

crimson skiff
sturdy stratus
#

definitely

clear siren
#

stop doing scss

half crystal
# clear siren stop doing scss

my dots are coded in scss (thanks end_4) and i have a script that converts the scss color vars to css color vars, so i can use them as a theme lol

image.png
crimson skiff
half crystal
crimson skiff
half crystal
crimson skiff
#

i meant the top panel thing

crimson skiff
half crystal
crimson skiff
crimson skiff
half crystal
#

its got a cheat sheet and awaifu generator

image.png image.png
crimson skiff
half crystal
crimson skiff
half crystal
clear siren
#

waifu generator WHAT

crimson skiff
#

i have wsl for Ubuntu set up already tho

half crystal
clear siren
crimson skiff
#

(also lazy)

half crystal
half crystal
crimson skiff
half crystal
crimson skiff
half crystal
crimson skiff
crimson skiff
half crystal
crimson skiff
#

(i need to sleep now it's 2:50 am)

half crystal
crimson skiff
half crystal
pure cairn
#

I really like this theme development channel venniehehe

crimson skiff
#

that's why I'll need to check

clear siren
pure cairn
#

Oh, discord broke stuff again?

#

Welp, I'm not refreshing ig

#

Yay

#

Well, if they just rerolled hashes it's fine

#

As long as they don't straight up change class names

#

stares at .biteSizeOuter_ turning into .biteSize_.outer_

#

Kind of, my performances say otherwise

#

I'll take the better performance but worse mantainability

#

I guess

clear siren
#

me, as an attribute selector user: blobcatcozy

pure cairn
#

haha, nope

image.png
shrewd tree
#

whats the difference between the attribute selectors and class hashes?

#

and how can i replace my hashes by the other one to make it less likely to get destroyed again lol

clear siren
#

.peepee_d4f3e2 becomes [class^=peepee_]

shrewd tree
#

huhh

clear siren
#

survives hash rerolls

shrewd tree
#

im gonna try to use that i guess

solid ore
clear siren
#

but note that a lot of selectors are super common

#

so many wrappers and containers

shrewd tree
#

yeah you can't really do that for those

clear siren
#

you can but you need a unique parent

shrewd tree
#

guess i'll wait for the tool to update hashes to get updated itself

#

hopefully that could fix it

shrewd tree
#

do we even know why they change the hashes every few months?

clear siren
#

to fuck with you specifically

solid ore
#

idk if its even intentional tbh

shrewd tree
#

i mean i dont see a reason they'd do it apart from that yeah

solid ore
#

probly just the way their system works idk, its definitely not necessary

shrewd tree
#

to think i had just started to update my theme again husk

cosmic vault
#

trying to update my poorly written theme because discord said NO...
what's this random little gradient bar on the top right of the friends menu? i've tried selecting it and it says its children__9293f::after but no matter what i do with it never goes away

image.png
#

i remember solving this in the past but my codebase is so bad that i cant find any clues of to how

shrewd tree
#

i think you can do it with
.theme-dark .children__9293f:after {
background: transparent;
}

#

thats how i fixed it before

cosmic vault
#

and that worked

#

gg

#

thanks

shrewd tree
#

only works with dark theme though i guess

cosmic vault
#

my theme is dark theme only

#

now its time to remember how i mess with gifs :D

shrewd tree
#

having funny notes helps i guess

image.png
cosmic vault
#

my codebase is so abhorrently bad

shrewd tree
#

so is mine LOL my theme is like completely gone thanks to the update

cosmic vault
#

i need to like rewrite it but i dont want to mess up something

shrewd tree
#

i dont even know where to begin i pratcially have a blank slate

cosmic vault
#

its beautiful (not)

shrewd tree
#

ohh i find it cute

cosmic vault
#

i like the way it looks i absolutely hate the codebase lol

shrewd tree
#

same for mine LOL

#

its supposed to look like this

68747470733a2f2f6d6979616b756b6167652e6769746875622e696f2f646973636f72642d6d6f6d6f74616c6b2f6d6973632f6c696768742e706e67.png
#

but now we have

image.png
#

NOTHING

#

i love discord

cosmic vault
#

insane

#

we love discord...

#

fortunately my terrible code decisions has saved me some time because i have a bunch of wildcards 🧌

shrewd tree
#

smush?

#

yeah but it's still gonna take forever

#

there's a tool to auto change them but it's not updated yet i think

pure cairn
shrewd tree
#

yes

mortal mantle
#

damn only the spotify controls survived the nuke

image.png
gilded radish
mortal mantle
gilded radish
#

clean

mortal mantle
#

probably will just skip 20250103 patch and make another patch for class updates or something

#

when i have time of course

gilded radish
#

fair

#

this is how my theme looked before, last screenshot I grabbed

image.png
mortal mantle
#

theme has come so far from the first days (Sep 2023)

#

eventually will be rewritten in scss

#

so i only need to fix classes in a dedicated file for the classes

gilded radish
#

fair, I am kinda shit at coding so it's just a LOT of snippets I like

mortal mantle
#

well thats how my theme started out to be

gilded radish
#

same here

cosmic vault
#

😭

clear siren
cosmic vault
#

its only in stickers

shrewd tree
#

hope we get this all fixed soon lmao

velvet cairn
south horizon
#

Does anyone have a hatsune miku theme?

austere cloak
copper locust
#

alright, my turn

#

here's the theme i've been using. literally all it's supposed to do is shrink the embed image/video sizes to how they were way back before discord added the mosaic stuff. basically the size as if they were sent via a link

📎 imgfix5.theme.css
#

does anyone have any clue how to tweek this to get it working again

#

i have a separate theme that i also keep active that changes the font back to the old discord font and that one works fine

grand surge
#

bros i just want a fully transparent theme, can anyone help me?

cold lotus
#

Any themes that survived the nuke? Basic discord is such an eyesore

tidal moth
#

Does anybody have problems with vencord rn?

grand surge
#

my theme bro 😢

#

i want le transparency

tidal moth
#

When i use vencord it crashes

#

i get this

image.png
plain kelp
#

vns

cloud joltBOT
tidal moth
#

alr

tidal moth
#

or i dont see anything

grand surge
#

THIS CHANNEL IS LOCKED DAWG!

faint sluice
#

hello, is there a custom css to remove the "Blocked" button from the tabbar? i used to have one that worked but for some reason it doesnt work anymore, and attempting to remove it by using the inspect thingy remove the entire thing

image.png
#

thank you in advance :D

shrewd tree
#

getting tons of messages from people saying my theme is broken, that makes me so sad wires

#

hoping the updater is updating soon or im gonna have to take matters into my own hands

scenic orchid
#

Hey @vestal field, with the advent of the discord update screwing themes - do you plan to update your midnight theme?

smoky fog
scenic orchid
#

True, is that from this server or another?

smoky fog
#

from his

grand surge
#

i just want transparency

plain kelp
grand surge
scenic orchid
#

I'm pressed about it because I just downloaded vesktop and themed my discord last night

grand surge
scenic orchid
#

It was lookin pristine 😢

image.png
shrewd tree
#

😭 man they really just do this randomly

#

hadn't touch my theme in months and the week i decide to add things to it every goes boom

dusty carbon
#

theme got nuked apparently :( it's sad cause mine was modified from an original theme that no longer exist from my knowledge.

📎 b1P0QcO.txt
scenic orchid
#

Time to plop into dev mode ad get to css'in

#

The silver lining is that CSS, and in particular discord themeing, is not a very complex or difficult task - it's just tedious

dusty carbon
#

i mean ye, I understnad everything

#

only problem is we haven't gotten the new theme css so I cant do it myself ;-;

scenic orchid
#

Sure you can

dusty carbon
#

how so?

scenic orchid
#

Ctrl+Shift+i

dusty carbon
#

thats

#

actually

#

very smart thank you

#

I hate the layout of inspect element tho

#

it's so ugly

scenic orchid
#

Idk if it's a monolithic file or not but obviously discord itself also sources it's default css from somewhere

#

parse the html and see if you can find it?

plain kelp
#

Discord has a giant multiple-megabyte css file, yes

#

From their side it's obviously composed of hundreds of smaller files, but we don't see those

copper locust
#

my other theme (that just changes the discord font to the old one) works so ik it's not ALL themes

#

so i can only assume something can be done with this one

scenic orchid
#

Looks like all the class names changed so you'd probably just need to go into dev mode and click on elements to find their new names

pure cairn
#

Open devtools with ctrl +shift + i

#

And use the little button on the top left of the devtools panel to select elements and see their class names

#

Fonts don't need classes to work, that's why your theme is still fine

#

I'll just wait for the class updater website to be operational

scenic orchid
#

I'll tell you one thing, as a linux user running wayland...this discord update absolutely murdered performance for me

pure cairn
#

As a Windows 11 (I hate it) user, it actually improved it because 90% of my css doesn't work

dusty carbon
pure cairn
#

Tbh I don't remember the cpu %

#

It was using up to 30% of my ram though (16gb)

dusty carbon
#

oh

#

ye it's helped my performance abit

#

5% on cpu usage

#

which isnt much but it is what it is

copper locust
#

no, that doesn't do the same thing

#

it gets rid of the mosaic display but videos and images are still the same size when sent alone

dusty carbon
#

this is where i would edit the css right?

#

nvm that was the css for my theme

copper locust
#

just send me the updated file when u can

would appreciate it thumb

pure cairn
#

Once you refresh discord any change goes away

dusty carbon
#

where would ifind it then

pure cairn
#

You can edit your css in the QuickCSS tab

#

Settings -> Vencord -> open quickcss

dusty carbon
#

trying to find the original css so I can modify my current css to work

copper locust
#

ok lemme see if that works

#

works, thank you so much <3

dusty carbon
pure cairn
#

Not sure about that but I don't think it will

#

As I said, use quickcss

#

Devtools is for picking classes

dusty carbon
#

ye but my quickcss broke

pure cairn
#

Edits go either in quickcss or local theme files

dusty carbon
#

thats the problem

pure cairn
pure cairn
dusty carbon
#

ooh

#

ok

#

where would dat be then

pure cairn
#

Send a screenshot of the devtools section

dusty carbon
#

I assume it's this?

LgUiNrv.png
pure cairn
#

Ok, you're on the right tab

#

Use the tool at the top left of the devtools panel to select elements

dusty carbon
#

select an element to inspect it?

pure cairn
#

Find their updated classes, replace the old ones with them

pure cairn
dusty carbon
#

how do i select the background

pure cairn
#

Well, first off check the old quickcss

dusty carbon
#

?

pure cairn
#

Discord only rerolled the class hashes, so the first part of the class names should still be the same

dusty carbon
#

so it would be the '--'?

Vkv8Utu.png
pure cairn
#

Nope, that one is a custom variable

#

Classes usually start with a .

#

Can you send your quickcss here one sec?

dusty carbon
#

.M.

#

ok

pure cairn
#

Well

#

I'm sadly to inform you that you'll probably have to wait until the theme author updates their files on github

#

Because the actual styling, besides variables, is being imported from their github

scenic orchid
echo frost
#

what part of themes broke?
nothing of mine seems broken

pure cairn
dusty carbon
scenic orchid
pure cairn
echo frost
#

oh so just the class hash things

pure cairn
#

Mhm

echo frost
#

whatever they're called

dusty carbon
pure cairn
#

Well, at least they're alive

#

I used to have a theme whose author didn't update the github repository for 1 and a half years

dusty carbon
#

so am I just stuck on the og theme till they fix it in the github?"

pure cairn
#

Unless you grab the file and fix it yourself

#

As Syrup said earlier

dusty carbon
#

that sounds so fat and time consuming

#

and wouldn't it also fuck over my performance?

pure cairn
dusty carbon
pure cairn
#

Was it fucking it over before the hashes reroll?

dusty carbon
#

well I wasn't on before the hashes reroll

#

I was on discord about 2 hours ago

pure cairn
#

How about yesterday?

#

I'm just asking you if the theme was making your discord slow

#

Because if so, then yes it will go back to make it slower once you (or the original author) fix it

dusty carbon
#

yesterday was fine

#

my discord was always a lil slow

rocky quarry
echo frost
#

the update classes website

rocky quarry
#

oh shit that works?

#

i thought that was only for one specific update

#

nope still broken 😭

#

will the website be updated more or do i actually have to figure out how to fix my shitty css

dusty carbon
#

OUR GLORIOUS GOAT FIXED IT

DTH7tGx.png
echo frost
echo frost
#

the website only works for fixing class reroll

crimson skiff
#

okay so yipee, half of my themes are broken (one of my themes is half broken, how does that even happen)

#

will have to wait for horizontal server list, and nocturnal to be fixed blobcatcozy

rocky quarry
#

running my theme through it only makes 12 changes and i cant notice any of them

pure cairn
#

That's some good news

#

Didn't really wanted to manually update 3.5k+ lines of css

rocky quarry
#

im not sure why it doesnt fix mine the main part i use doesnt have any dependencies

echo frost
#

can you send your theme? nvm the diff is broken

tardy hemlock
#

me: (wonders why class updater doesn't work; looks at diff) oh

image.png
#

yeah that's the newest diff no wonder why it's broken atm

echo frost
#

oh

iron smelt
tardy hemlock
#

fun

echo frost
#

i looked at when the diff was updated, but not the diff of the diff

tardy hemlock
#

the double underscores aren't even consistent 😦

image.png
#

wtf discord

echo frost
#

i think there were some classes with double underscores before?

#

now a lot more are though

tardy hemlock
#

i'd like to have a word with the dev who thought that double underscores are a good idea

iron smelt
#

at least they didn’t switch it back to being hyphens like it used to be

crimson skiff
#

there is a lot more underscrores than usual

vestal field
tardy hemlock
vestal field
echo frost
vestal field
#

leafy cleaned it up

tardy hemlock
#

that fixed like 90% of the theme i maintain ty

#

i swear 50% of my committs are fixing the custom user popouts

harsh flicker
#

@narrow hinge just a big shoutout and thanks for the class updater too
(wasn't sure which channel this should've been in, but it's directly tied into theming)

#

it'd be really neat if you considered open sourcing that tool and allowed others to suggest code changes, etc. I had some ideas.

narrow hinge
#

It’s completely open source

harsh flicker
#

oh. I didn't see the gh

#

I saw sarah's classlist repo but that was all I saw

#

i feel stupid not realizing your site was hosted on github :S

#

hadn't looked at the url lmao

narrow hinge
#

Yeah, there are 3 Repos used for the Tool
I use Sera’s Repo for the Class Update Diff
I upload the Changes to my Update Classes Repo
Then finally I host the tool on my Site

harsh flicker
#

but again, thank you :). I was losing my mind without my server columns on the left.

narrow hinge
#

I didn’t do much for this Reroll, Pix and Leafy did the Updating

plain kelp
cloud sigil
#

Is there a reason I shouldn't do something like this:

/* Mic */
button[role="switch"][aria-checked="false"]:nth-of-type(1) svg {
    clip-path: path("...");
}

/* MicSlash */
button[role="switch"][aria-checked="true"]:nth-of-type(1) svg {
    clip-path: path("...");
}

The old version was like this:

/*Mic*/
.button_adca65:nth-last-child(3) .lottieIcon_f73ef7>svg {
    clip-path: path("...");
}

/*MicSlash*/
.button_adca65:nth-last-child(3) .lottieIcon_f73ef7[style^="--__lottieIconColor: var(--status-danger)"]>svg {
    clip-path: path("...");
}
echo frost
#

probably will overselect

cloud sigil
#

I mean testing it, it worked...?

echo frost
#

it would probably also change things you don't want it to, but if that doesn't then yeah it's fine

cloud sigil
#

Is there no better way to do the button_adca65 type of shit since the _adca65 is dynamic/changed sometimes on repacks

echo frost
#

[class^=button_] or [class*=button_] but those still aren't as specific as including the id thing

cloud sigil
#

Yeah, that's why I went with the switch role

echo frost
#

well a lot of things have role=switch

cloud sigil
#

Yeah... So in short... Not really

#

I mean could do it via the aria-label, but then there's the issue of languages, so it's more hassel

echo frost
#

yeah

#

but the class rerolls don't happen very often

glass junco
#

guys i forgor how to change the window title stuff

cloud sigil
#

True, I think it's only when they change things in it?

cloud sigil
glass junco
echo frost
#

search for .wordmarkWindows__421ed

#

you could also probably look at what clearvision does

glass junco
#

unlimited thanks, joyous day

cloud sigil
#

This button is very helpful. click it then click the thing and it will bring you to that element in dev tools Elements tab

image.png
#

Ctrl + Shift + C

glass junco
#

i know how to use devtool im not new Lol but thanks anyways

#

i was just struggling to find that one selector

cloud sigil
#

I just hover over stuff in devtools till it highlights the area, then just narrow it down from there

glass junco
#

titlebar cant be selected with devtools

cloud sigil
#

Nah I mean in the elements

glass junco
#

im so confused it's not letting me change anything about it Anko_Think

echo frost
cloud sigil
#

Is it just refreshing everytime you change it and undoing your work?

echo frost
#

you'll need to change the paths

cloud sigil
glass junco
shrewd tree
#

my theme is back 🥹 thank you person who does the hash updater

glass junco
echo frost
#

i think it would be easier to edit the paths in the svg

glass junco
#

sorry im tired i thought they were in the same element venniesad

glass junco
shrewd tree
#

here's how i replaced the discord watermark

.wordmark__421ed svg {
    display: none;
}

/* Display */
.footer__214dc {
    display: none !important;
}
.wordmark__421ed::after {
    top: -59px;
    left: 1px;
    position: relative;
    content: "";
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url('yourimagelink.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}```
#

no need for all the styles but maybe it'll work

echo frost
#

also this is working

2025-01-29_23.png
glass junco
# shrewd tree here's how i replaced the discord watermark ```/* Watermark*/ .wordmark__421ed ...

get future-proofed Lol

/* Watermark*/
[class*=wordmark__] svg, [class*=wordmark__]::before {
    display: none;
}

/* Display */
[class^=footer__] {
    display: none !important;
}
[class^=wordmark]::after {
    top: -59px;
    left: 1px;
    position: relative;
    content: "";
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url('yourimagelink.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#

also pro tip, for the right syntax highlighting you need to put the file extension of the language you're writing after the start of the codeblock

#

e.g.

shrewd tree
#

thanks a lot LOL

#

i need to do that with all my css..

echo frost
#

actually now that i think about it, unless you already have an svg, it would probably be easier to do something like that

tardy hemlock
echo frost
#

do be careful about just changing classes to [class^=example_] sometimes it'll cause a lot more matches with things you don't want causing you to have to be more specific with stuff like > and :has() etc.
and what gold_me said

shrewd tree
#

well yeah since a lot of hashes have the same name

echo frost
#

also the [class^=footer_] is the discovery button i think

glass junco
#

im careful with my hashbrown code trust

glass junco
shrewd tree
#

at least i know that the updater works perfectly on mine

#

wait no you're right

#

that code made my discover button disappear

glass junco
#

well yeah they start the same lemme fix uno momento

echo frost
shrewd tree
#

oh no its because i hide it LMAO

glass junco
#

yeah

tardy hemlock
#

Update still broke some of my theme but updater fixes most of it, I’m lazy and tired rn so I’m gonna finish my changes tomorrow morning

shrewd tree
#

i added

.footer__214dc {
    display: none !important;
}``` 
to that code which hides the discovry button lol
echo frost
#

i just typed [class^=footer_] because i didn't want to type the id

glass junco
#

hate the discovery button

shrewd tree
#

i really wanna hide it but idk if people will get mad at me

#

does anyone really use it??

glass junco
#

no

#

Lol

tardy hemlock
#

Make it a parameter ppl can just change

echo frost
#

well the quests are in there, so i use it very rarely

#

that's why i made an extremely scuffed svg to put it back basically how it was at the bottom of the list

shrewd tree
#

i'll keep it hidden and if someone complains i'll bring it back, i already reuploaded my theme like 5 times

tardy hemlock
#

That or like have it be invis until the area where it exists is hovered over

#

Opacity=0

echo frost
#

well just invis would still take up space

shrewd tree
#

the funniest thing is that the discovery button was supposed to be hidden this entire time, but an earlier hash update broke that and i didnt even notice

#

the updater fixed that lmao

tardy hemlock
#

@property is really nice for pseudo-settings in themes

echo frost
#

huh?

#

how are you using it?

shrewd tree
#

hm? im interested too

tardy hemlock
#

Lemme paste an example

glass junco
#

samesies

# 
/* readability perks: -----------------------------------------*/
[data-list-item-id^=chat-messages___] {
    background: rgba(0, 0, 0, 0.267);
}
[data-list-item-id^=chat-messages___]:hover {
    background: rgba(61, 26, 56, 0.322);
}
/* ------------------------------------------------------------*/

why the hell wont the message hover color work unless discord is out of focus husk

echo frost
#

i think something is overriding it

#

don't do it like that, there's a variable for hover

tardy hemlock
#

Scss code but the idea is there


        // ICON ANIMATIONS
        @container root style(--si-animations: true) {
            border-radius: 4px 0px 0px 4px;
            transform: translateZ(0);
            transition: 220ms;

            &:hover,
            &%tabBarItemSelected {
                transform: translateX(8px);
                transition: 160ms;
            }
        }
shrewd tree
#

huhh

glass junco
echo frost
#

so you enable that by setting this? (or disable it by setting it to false)

:root {
  --si-animations: true;
}
glass junco
#

unless ur talking about a different thing

echo frost
tardy hemlock
#

(In :root)


@property --si-animations {
    syntax: "true | false";
    inherits: true;
    initial-value: true;
}
glass junco
#

sorry im slow

echo frost
#

--background-message-hover

shrewd tree
#

not :hover ?

glass junco
tardy hemlock
echo frost
shrewd tree
#

interesting

tardy hemlock
#

Made sass build all the values for me it’s nice

glass junco
echo frost
#

i believe so

#

try looking at it

shrewd tree
#

obsidian, is it fine to use your css snippets in a public theme?

echo frost
#

which one

#

most of my css snippets are extremely scuffed, so i wouldn't recommend using them in one

shrewd tree
#

mostly the one to hide all the chat buttons

glass junco
#

oh yeah if anyone wants this btw this is how to select servers that dont have an icon
[class*=listItem__]:not(:has([class*=icon]), :has([class*=folder])):has([draggable=true])

shrewd tree
#

my theme as a whole is scuffed lol

#

i can put you as a contributor if i do that, if you want

glass junco
echo frost
tardy hemlock
echo frost
#

i think mine are more scuffed

echo frost
# echo frost i think mine are more scuffed 
[class*=unreadMentionsFixedFooter_] { 
  bottom: 0px !important;
}
[data-list-id=guildsnav]>div>[class^=scroller_]:not(:has(
  >div[aria-hidden=true]:hover, +[class^=footer_]:hover
))  {
  margin-bottom: 0;
  +[class^=footer_]:has([class*=fixedDiscoveryIcon_]) {
    display: none;
  }
}

[data-list-id=guildsnav]>div>[class^=scroller_]>div[aria-hidden=true] {
  pointer-events: all !important;
  height: 56px !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-anchor: middle;

  &::after {
    margin-bottom: 8px;
    position: absolute;
    height: 48px;
    width: 48px;
    border-radius: 100%;
    content: url("data:image/svg+xml,%3Csvg fill='%23dbdee1' xmlns='http://www.w3.org/2000/svg' role='img' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='%23313338' d='M48 24a11 11 0 11-48 0 11 11 0 0148 0Z'/%3E%3Cpath fill-rule='evenodd' d='M24 26a2 2 0 100-4 2 2 0 000 4ZM35 24a11 11 0 11-22 0 11 11 0 0122 0ZM19.74 21.3a2 2 0 011.56-1.55l7.22-1.45a1 1 0 011.18 1.18l-1.45 7.22a2 2 0 01-1.57 1.57l-7.22 1.45a1 1 0 01-1.18-1.18l1.46-7.24Z'/%3E%3C/svg%3E");
  }
}
tardy hemlock
#

Go for it

shrewd tree
glass junco
echo frost
#

exactly
it's scuffed

tardy hemlock
#

(Need to fix the nitro tab again for that theme)

#

For now I sleep

echo frost
# echo frost exactly it's scuffed

and in multiple ways
the css itself is pretty scuffed, but the way it functions is even more scuffed, and the user experience is also really scuffed

#

because they have to hard code their theme colors in a url encoded svg

tardy hemlock
iron smelt
echo frost
#

you've already seen that

echo frost
iron smelt
echo frost
tardy hemlock
#

Yeah why did discord make that so annoying to undo

iron smelt
shrewd tree
#

my theme isn't really scuffed it's just very basic maybe, it's maybe a bit weird but at least it works..!

glass junco
# echo frost i believe so

i can find something as obscure as reacted message background but normal message background doesnt seem to be a variable