Download Source Code
Sign in to like
Made by:
CapnKitten
Release date:
3rd September, 2020

Translucence

165.7K 268.4K 247

A translucent/frosted glass Discord theme.

Comments (81)

Sign In to post a comment

Nathan Herrera

how do i put https://imgur.com/a/dD1ACL3 as y background?

Miss Tia

oh please let us have the option of having a literal transparent bg for this! Your theme is amazing but I can't seem to edit it to have a transparent bg so that I can see my animated wallpaper when I'm using discord :(

Max Stellar

How can I change the color of the buttons for like add a server, server discovery, etc... without changing the app accent value?

Max Stellar

I'm more comfortable with editing the code directly instead of using Custom CSS, something about it just creeps me out

CapnKitten
.circleIconButton-jET_ig,
.circleIconButton-jET_ig.selected-ugP_am {
    background-color: #000 !important;
    color: #fff !important;
}
Max Stellar

You don't know how much that helped

Untitled Duck

I dont understand how to change by background. Thats all i want to do https://imgur.com/a/jTAuL18 with this image

Max Stellar

In Custom CSS, do
:root {
--app-bg: url(https://i.imgur.com/EXbNu6G.jpg);
}

Cameron

So the theme is amazing! Is there any way for me to change the background image from the sunset to an image of my choice? That would be cool if not, could you make another theme enabling you to have a photo of your choice as the background?

CapnKitten

You can change it. I have an example of the code you'll need in the pinned comment at the top and where to put it. The only thing you need to do is upload the image somewhere (i.e. imgur or something similar), and get the image url.

Steam Powered

I cant download it, it keeps me stuck on the ddos protection

CapnKitten

Clear your browser's cache, or use a different one to download it.

samantha k

so i want to change the backround and everytime i try it has a pop up that says meta not found

Siaudu_Batai

How your code looks like?

CapnKitten

You can ignore the syntax warnings.

Siaudu_Batai

Hey, I was wondering, if it's possible to change darkness top part of the app ( https://i.imgur.com/61zocFr.png ), and selected text channel accent color ( https://i.imgur.com/z1UBrJh.png ). Any help would be appreciated

CapnKitten

Adding the following code into your custom css tab will allow you to change the background color and blur intensity of the title bar. Straight up removing backdrop-filter will remove any blur from it if that's what you want as well.

.titleBar-AC4pGV.typeWindows-1za-n7 {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--app-blur));
}

As for the channel background and text colors:

:root {
    --background-modifier-hover: rgba(255,255,255, 0.075) ;
    --background-modifier-selected: rgba(255,255,255, 0.125);
}

/* DEFAULT */
.icon-1DeIlz,
.name-23GUGE {
    color: #fff;
}

/* HOVER */
.modeMuted-onO3r-:hover .name-23GUGE,
.wrapper-2jXpOf:hover .name-23GUGE {
    color: #aaa;
}

/* UNREAD/SELECTED */
.modeSelected-346R90 .icon-1DeIlz,
.modeSelected-346R90:hover .icon-1DeIlz,
.modeUnread-1qO3K1 .icon-1DeIlz,
.modeUnread-1qO3K1:hover .icon-1DeIlz,
.modeConnected-3IsKId .name-23GUGE,
.modeConnected-3IsKId:hover .name-23GUGE,
.modeSelected-346R90 .name-23GUGE,
.modeSelected-346R90:hover .name-23GUGE,
.modeUnread-1qO3K1 .name-23GUGE,
.modeUnread-1qO3K1:hover .name-23GUGE,
.notInteractive-1X92pj.modeConnected-3IsKId .name-23GUGE,
.notInteractive-1X92pj.modeSelected-346R90 .name-23GUGE {
    color: #000;
}

/* ACTIONS (INVITE/EDIT) */
.actionIcon-PgcMM2 {
    color: #ff0000;
}
.actionIcon-PgcMM2:hover {
    color: #ff0000;
}
Žabák Pepe

Can i get banned for using Better discord? is this safe in 2021? :/

devinkid1

Not really, Discord has a rule for it but they aren't enforcing it right now.

pseja

Hey, can I somehow make the blur time instant when clicking someones profile?

Xanscript

Hey, I don't know if you're still active on this but I'd like to know how you change to color of the box when you look at someones profile while they're playing a song on spotify. Also this is probably one of my favorite themes!

Xanscript

I figured it out, but the --popout-color doesn't work in group chats. Is there a solve for this?

CapnKitten

So the user popouts use variables for the background colors so you can change them to whatever you'd like. To change the Spotify header, you can change the variables below:

:root {
    --spotify-color: 29,185,84;
    --popout-header-opacity: 0.3;
}

However, changing the --popout-header-opacity also affects other popouts with similar headers. So to avoid that, you can just change the background-color for the Spotify header altogether like so:

.headerSpotify-zpWxgT {
    /* this is the default value in the theme */
    /*background-color: rgba(var(--spotify-color),var(--popout-header-opacity));*/

    background-color: #fff !important;
}
CapnKitten

Do you mind showing me a screenshot of which part you're talking about?

Xanscript

I've figured out the spotify ones but this brought up 2 more questions for me. If i put an alpha value in the --spotify-color would it read it? And also is there another line i need to put in so that this color change will also affect game activity? because i made spotify the color i liked, but when i click on the people playing games, the color is like a gray.

CapnKitten

So for changing the opacity of the header, specifically the Spotify header, you can change the 0.5 (it ranges from 0 to 1 with decimals) in the code below:

.headerSpotify-zpWxgT {
    background-color: rgba(var(--spotify-color), 0.5);
}

The game header is similar the Spotify one. Removing the var(--popout-header-opacity) with a number like above will change the opacity independently of all the headers in various popout menus:

.headerPlaying-j0WQBV {
    background-color: rgba(var(--nowplaying-color),var(--popout-header-opacity));
}

The streaming header is the same as well, just with a different class name of .headerStreaming-2FjmGz, with the RGB values using the --streaming-color variable.

The same goes for the profile headers when you click a users avatar, using the same variables as above:
.topSectionPlaying-1J5E4n, .topSectionStreaming-1Tpf5X, .topSectionSpotify-1lI0-P

Xanscript

Sorry for the bother but i'm kinda stupid lol, can you please write down what i'd have to put in the CSS editor if i wanted to change the colors of the profile headers for playing statuses and streaming stauses? Thanks

CapnKitten
.headerSpotify-zpWxgT,
.topSectionSpotify-1lI0-P {
    background-color: rgba(var(--spotify-color), 0.5);
}

.headerPlaying-j0WQBV,
.topSectionPlaying-1J5E4n {
    background-color: rgba(var(--nowplaying-color), 0.5);
}

.headerStreaming-2FjmGz,
.topSectionStreaming-1Tpf5X {
    background-color: rgba(var(--streaming-color), 0.5);
}
Baut _

Hi, love the theme! How do you make the right margin (roles list) as dark as the left margin (channel list)?

CapnKitten

Open your user settings and scroll down to the bottom on the left side until you see "Custom CSS". Open that tab and place the following code in the textbox. Click "Save" and "Update".

.chat-3bRxxu {
    background-color: transparent !important;
}

.chatContent-a9vAAp,
.container-1r6BKw.themed-ANHk51 {
    background-color: var(--main-content-color) !important;
}

.membersWrap-2h-GB4 {
    background-color: var(--sidebar-color);
}
Lincoln James

How do I edit the code for myself to make the background photo less blury?

CapnKitten

Open your user settings and scroll down to the bottom on the left side until you see "Custom CSS". Open that tab and place the following code in the textbox. Click "Save" and "Update". It'll remove the blur; increasing the 0px will increase the blur effect.

:root {
    --app-blur: 0px !important;
}
sebastian trofin

Why at the start its soo laggy?

Skittlq

Hey, I'm having a problem with the CSS editor, I put my code in which is:

:root {
--app-bg: url(https://i.imgur.com/hzXQujZ.png) !important;
}

However, I keep getting this error which says: Expected RBRACE at line 2, col 3.

CapnKitten

That is just an error/warning for the text editor. You can ignore it.

Red Scorpian

is it possible to make it transparent? like i can see through discord?

CapnKitten

There is a BBD settings option that allows it, but in the theme's current form, it won't change anything.

iDubno

it seems even while trying to add the custom CSS, it doesn't apply to the background.
i did add the correct CSS.
can you help me please? Thanks.

CapnKitten

The code below should work, just change the url value to whatever you'd like. As a side note, only .jpg, .png, and .gif files work for it.

:root {
    --app-bg: url(https://i.imgur.com/8vNApkL.jpg) !important;
}
Emil Bang

How do i remove the border around it?

CapnKitten

I'm not sure what you're referring to when you mean "it".

RedPanda

think he means the app margin. You can change it by editing the css.
BTW sick theme. you did a great job.

CapnKitten

Thanks!

For the border issue, RedPanda is correct. To modify it, go into your user settings and scroll to the bottom on the left side until you see a tab called "Custom CSS". Go into it and paste the following code and hit save and update:

:root {
    --app-margin: 0 !important;
}
Emil Bang

Thank you :D Awesome theme

shythis

The background is not coming. What can I do?

CapnKitten

Did you manually change it via the --app-bg variable?

shythis

I have nothing to do with discord software, I just opened the file and made it to ctrl + a, copied it, then passed it to custom css

CapnKitten

It'd be easier to download the theme file and put it in your Bandaged BetterDiscord themes folder. It's located at %appdata%/BetterDiscord/themes (windows button + r to open the run dialog; paste that in there and hit enter). Once the theme file is there, make sure that there's no (2) at the end of the file name incase you downloaded multiple times, then enable it in your themes list in your discord settings.

Once you have the theme enabled, then you can dabble in changing the variables to whatever you'd like. Here's an example you'd put in your custom css:

:root {
    --app-bg: url(https://i.imgur.com/U8bSjj5.jpg) !important;
}

Leave the !important tag, and click update and save.

Noelnoel07

How do I change the color of highlights? Whatever I do I can't seem to have channel hastags highlight in the color I want them to. Its always the default red color.

CapnKitten

Just put an update live that'll fix that. Prior to mentions having their own dedicated variable that controls the color for it, it used the --app-accent and --app-accent-rgb variables and it seems I forgot about highlighted channels. Restarting your Discord client should get you the update, and changing the --mention-color and --mention-rgb variables in your custom css will change the colors.

For reference, the custom css tab is located in your user settings and scrolling to the bottom on the left side. There's a github link in the pinned comment near the top of this page with a whole list of variables you can use and their default value. Here's an example:

:root {
    --mention-color: #fff !important;
    --mention-rgb: 255,255,255 !important;
}
Jordan C Jacob

Laggy af.

CapnKitten

The lag is the result of the theme using more cpu resources than vanilla Discord because of the blur effect that the theme revolves around. I'm currently looking at other alternatives that don't use as much of your cpu. Sorry for the inconvenience.

NanoCraft7

Any way to change the margins induvidually? Like change how much up/down/left/right instead of all sizes equally. Thanks for the help!

NanoCraft7

app margins*

CapnKitten

You can, but it'll require you to not use the variable I have it set to use. In the code below I have the layout of which value controls which side. The values are usually in px, so an example would be margin: 4px 8px 16px 8px !important;. Leave the important tag so it's sure to overwrite the existing code in the theme.

.layers-3iHuyZ {
    margin: top right bottom left !important;
}
NanoCraft7

You're the best!

nwolfe31

Hi, can I change the popups background to an image? If that is the case, can I make the CSS tell from one popup to another?

CapnKitten

In its current state, it's not easily done without a bit of css code. As for telling difference between popups, it really depends because Discord does use the same class names for a few popouts.

Here's an example with the user popout menu when clicking on someone's name. It'll just use the app background set by the variable (if you changed it) and have it cover the entire element:

.userPopout-3XzG_A {
    background-image: var(--app-bg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
sleepiest

Is it possible to change the color of the discord call buttons (Turn on camera, mute, hang up, share screen) to match the theme?

CapnKitten

Sure, I can make all of the buttons match in a future update.

sleepiest

Thanks a bunch! <3

Rengato

How do I make commands in CSS work? I'm trying to save it but it doesn't work

CapnKitten

You have to click both save and update once you're done. If it isn't saving, then it may be a BBD issue that could require you to just reinstall it. Mind showing me the code you're trying to get to work?

Rengato

It was the same one that you sent to someone else, I wanted to remove the text shadow

MintSpare

So i have a port of my discord like the voice chats and text channels where its just nomal discord. Any way to fix that?

Shiippo_ _

hi, can i remove the black shadow of the text? how ://

CapnKitten

Putting the code below in your custom css will remove the text shadow. The custom css tab is located in your user settings near the bottom left side. Don't forget to click save and update.

.appMount-3lHmkl * {
    text-shadow: none;
}
Braden Jackson

I'm trying to remove the margins, and every time I try to type out and css it just says the rule is empty and that it expected RBRACE even when I have the brace there.

CapnKitten

Don't worry about that, it's just a syntax warning for the text editor.

Braden Jackson

Thanks, I got that to work. I also have one more question if you don't mind. How do I zoom the background image out? Because I put in a custom image I uploaded to imgur and the image shows up, but it's too zoomed in. So what exact CSS should I put in to change that?

GamingWithSotiri

Really beautiful but its pretty laggy.

sleepiest

Do you have Hardware Acceleration on or off in your discord appearance settings? Turning it off can cause lag.

GamingWithSotiri

Sorry for the late response. I have tried both Hardware Acceleration and not using Hardware Acceleration. I have also tried a few other things that might negate lag.

Harem King

is not working anymore?

CapnKitten

It's still working as intended.

Impostor

Anyway to remove the distance between the things and the border?

UnnamedK

Hey dude, I have a question, can I reduce the space between the messages? I would greatly appreciate it and this theme is my favorite.

CapnKitten

There's actually a Discord appearance setting for that. Go into your user settings > appearance > space between message groups.

UnnamedK

thanks bro, i don't know much about discord :c

CapnKitten

It's all good.

Kevin Zhou

this theme is awesome!! but is there a possibilty to use a png on your own pc as a background? or do you have to use a link?

CapnKitten

Unfortunately, at this time it isn't possible to use a local image. Imgur is a solid alternative though.

Kevin Zhou

and is there a possiblity to use a gradient as the app accent color?

CapnKitten

Currently there is not, but I can add the ability to use gradients in the next update I push live. If you're not familiar with the css variables I use and how to use them, please refer to the pinned comment at the top to get a template with an example. Clicking the GitHub link will take you to most of the available variables you can use to customize the theme.

With that said, I'll add a new variable called --app-accent-image where you can use images or gradients as the value. By default it'll be set to none so it doesn't interfere with the theme.

????? ? ????? ????????.

Great, ty so much

AsthmaticNuudle

How would I go about lowering the window control buttons? They feel really squished to the top.

CapnKitten

Adding the code below to your custom css tab, which is located in your user settings and near the bottom of the left side, will add a spacing between the buttons and the border of the app:

.winButton-iRh8-Z {
  margin-top: 8px;
}
.winButton-iRh8-Z.winButtonClose-1HsbF- {
  margin-right: 4px;
}
Mr. Reyat

This makes my discord laggy. Anyway to fix that?

Kaspar19

Okay so I have an issue atm where I have used a mostly white background image but now when in group chats I cant see the names because the default colour is white for names when not in a server is there a way I can change the colour of the names themselves or somehow highlight them when in the right side members thingy (if this doesn't make sense I would very much like to elaborate)

CapnKitten

Could you post a screenshot with an example, thanks.

Kaspar19

Sorry for the late response and yes ofc here is a link with a screenshot of the problem as you can see in the picture the names are quite hard to read this can be because the people are offline but still if there is a way to make it more readable even the slightest that would help a lot thanks in advance :DDD (https://imgur.com/a/hAamf8J)

CapnKitten

Add this to your list of variables inside :root. It'll make the text color almost white, but you can play around with it.

--channels-default: #efefef !important;
keef-khan

Hey sorry if I'm being dumb but how do I add a blur to the background image with this? I did not see a variable that could adjust the background blur, only the blur of the elements on the screen.

CapnKitten

By default, the blur behind the entire app is controlled by --app-blur, but that also controls the blur of any popouts or modals like the right click menu and user info modal. However, if you want it to have a different blur intensity, you can use the code below and put it in your custom css tab within betterdiscord located in your user settings. A higher number will result in a more intense blur, and vice versa.

.layers-3iHuyZ:before {
    backdrop-filter: blur(15px);
}
Mythical

just tried to change the background image, and colors for everything else, but nothing is changing. This is how I typed everything out
:root {
--app-bg: url(https://i.imgur.com/WLL7MOw.jpg) !important;
--app-blur: 6px !important;
--app-margin: 24px !important;
--app-radius: 8px !important;
--app-accent: #FF6E7D !important;
--app-accent-rgb: 255,110,125 !important;
--app-accent-text: #fff !important;
}

not sure what i did wrong, but absolutely NOTHING changes and i don't know why

CapnKitten

All of the values you put in are correct, so you did nothing wrong. If you're putting the code above in the custom css tab in betterdiscord, make sure you're clicking save and update. If you're putting it in the theme file itself, saving it should update it to look how you want it to.

Oakivy

I want to change the red and black colors to black and white, but I do not know what variable that would fall under. Can you please tell me? Thank you!

CapnKitten
:root {
    --app-accent: #000 !important;
    --app-accent-rgb: 0,0,0 !important;
    --app-accent-text: #fff !important;
}
NanoCraft7

Hey thanks for the help dude! I was scrolling through the comments looking for someone who wanted to do the same. And also thank you for making this awesome theme! I LOVE this!

Osiris

how do i add this to my themes on discord

Adog

go to your windows search an search %appdata%

find the folder called 'BetterDiscord' and open it

then open the folder called 'themes'

drag the download for this theme into this folder

restart discord :)

bl4nk

From discord:
A recent discord update refreshed classes for the channel sidebar, which broke most themes. If your theme was affected, this is a temporary patch you can use until the developer gets to it. Read the instructions within the commented code on how to use it.

:root {
/ Change this variable to control
how dark the background is. A value
of 0 indicates fully transparent; A
value of 1 indicates opaque black.
/
--cfix-opacity: 0.5;
}

/ Actual code -- Dont touch unless you know what you're doing./

.base-3dtUhz .sidebar-2K8pFh {
background-color: rgba(0,0,0,var(--cfix-opacity));
}

.sidebar-2K8pFh .container-3w7J-x {
background-color: transparent;
}

.sidebar-2K8pFh .clickable-25tGDB .header-2V-4Sw:hover,
.sidebar-2K8pFh .selected-31Nl7x .header-2V-4Sw {
background-color: rgba(0,0,0,calc(var(--cfix-opacity)/2));
}

CapnKitten

Update is live.

bl4nk

Thanks! :)

Miguel

I don't if this is a common problem however, I am unable to get the server channels to be themed they still stay the same plain old grey. I've tried to see if it only was this theme, but it appears on all of the themes. Do you have any solution to this problem?

Zoe

i have this problem too! i still haven't found a fix yet. it's pretty unfortunate.

bl4nk

same problem

iTzShark

Same problem

bl4nk

From discord:
A recent discord update refreshed classes for the channel sidebar, which broke most themes. If your theme was affected, this is a temporary patch you can use until the developer gets to it. Read the instructions within the commented code on how to use it.

:root {
/ Change this variable to control
how dark the background is. A value
of 0 indicates fully transparent; A
value of 1 indicates opaque black.
/
--cfix-opacity: 0.5;
}

/ Actual code -- Dont touch unless you know what you're doing./

.base-3dtUhz .sidebar-2K8pFh {
background-color: rgba(0,0,0,var(--cfix-opacity));
}

.sidebar-2K8pFh .container-3w7J-x {
background-color: transparent;
}

.sidebar-2K8pFh .clickable-25tGDB .header-2V-4Sw:hover,
.sidebar-2K8pFh .selected-31Nl7x .header-2V-4Sw {
background-color: rgba(0,0,0,calc(var(--cfix-opacity)/2));
}

CapnKitten

Discord updated and it broke a lot of themes. I just pushed an update that'll fix it; restarting your discord app should get the theme updated.

Qra

Impressive work! But can I change the black color of this icons (https://imgur.com/VTY3nvZ) and this text (https://imgur.com/QSAQQck) to some other color?

Qra

So that it looks like this (https://imgur.com/EZdYzrT)

CapnKitten

By default in the theme the button icons and text are handled by --app-accent-text, so changing the value of that will change that icon and text. You can take the example in the pinned comment and add --app-accent-text: #fff !important; to it.

Shinexy

nice

klueck21

So do you get to choose your background image?

CapnKitten

You can, you just need to upload it to a site like imgur that allows you to get the image url. If you look at the pinned comment at the top, you can copy the example I put there and remove the --app-accent part of it; unless you want to change the accent color. Open your user settings and scroll to the bottom on the left side until you see a tab called Custom CSS. Put the copied code there and change the url. Don't forget to click save and update.

Chacha

Hey! I have a little problem ! I'm on MacOS and I tried to increase the opacity of the title bar button corner. How can I do that plz ?

CapnKitten

I'm not entirely sure what you're talking about. Are you referring to the close/minimize/maximize buttons?

Chacha

yep exactly

CapnKitten

Got it fixed, will be in the next update.

Aut

how can i put at my discord?

Musketeer2

Hi! great theme. Just wondering how I can change the red color scheme.

CapnKitten

If you take a look at the pinned comment, you'll find a template for changing the numerous variables that this theme uses. You'll want to copy the root stuff (brackets included) and paste that into the custom CSS tab in your user settings. In your case, you can remove the --app-bg, unless you want to change the background image. For the red accents, change the hex color code of --app-accent to whatever you'd like.

Musketeer2

thanks man, appeciate it!

goose

hey! you might not see this, but i specifically created an account just to thank you for the theme. It's really customizable, and with the directions and examples you provided, it even made it easy for me to do it for the first time. thanks man

goose

oh also, is there any way to change the highlight color? that would be greatly appreciated :D

CapnKitten

The highlight color is controlled by --app-accent-rgb. If you're used to hex color codes, just take the R, G, and B values from a converting site or photoshop and use them like the example below. In this case, it would be white, but since by default I have the alpha/transparency set to 0.65 (ranges from 0.0 to 1.0), it'd appear a light gray. The text in it is controlled by --app-accent-text.

If you just want to change the color of it and not worry about the alpha:

:root {
    --app-accent-rgb: 255,255,255 !important;
}

If you want to change the alpha:

:root {
    --app-accent-rgb: 255,255,255 !important;
}

::selection {
    background: rgba(var(--app-accent-rgb),0.65) !important;
}
goose

thanks! i have the same question again, and i hope its not a bother, but what about the notification colors?

CapnKitten

If you're talking about the notification dots next servers, I haven't touched those. I can change that though and have it in the next update. I'll make the color of them be controlled by --notification-color, so just add that to your custom CSS and it'll change them when I get it updated.

goose

you're actually such a great help, and one of the best theme creators on here. Thanks so much man

CapnKitten

Glad I could help.

Arjun Kumar

I'm having trouble changing the color of the links and mentions. I tried the customizations listed but none of them worked, the links and mentions are hard for me to read, what do I change to fix this? Also thanks for making this!

CapnKitten

Link and mention colors are tied to the --app-accent color, so if you want to change them, you'll have to add the following code to your custom css:

:root {
    --link-accent: #fff;
    --link-accent-rgb: 255,255,255;
}

.markup-2BOw-j a {
    color: var(--link-accent);
}

.wrapper-3WhCwL {
    background: rgba(var(--link-accent-rgb),0.2);
    color: var(--link-accent);
}

.interactive:hover {
    background-color: var(--link-accent);
}

[class*="theme-"] .mentioned-xhSam7 .mention.interactive:hover {
    color: var(--link-accent);
}

.mentioned-xhSam7,
.message-2qnXI6.mentioned-xhSam7.selected-2P5D_Z,
.mouse-mode.full-motion .mentioned-xhSam7:hover,
.mouse-mode.full-motion .message-2qnXI6.mentioned-xhSam7:hover {
    border-color: var(--link-accent);
    box-shadow: inset 0px 0px 6px 1px var(--link-accent), 0px 0px 9px 2px var(--link-accent);
}
Extravix

Just came to say this theme is very beautiful and reading all these comments must suck as a creator. I and many others who don't voice our gratitude appreciate all the work you put into this. Sometimes only the loudest are heard but I'll speak for the majority that thank you for your work. -Extravix

CapnKitten

Thanks for the kind words.

Shalalalaaa

my discord lag using this theme.. can u fix it ?

baboodi

how do i equip this filter

CapnKitten

Not sure what you mean.

Exhibit Vibin

he's saying I think how do I Equip it or maybe just how to download (I think)

CapnKitten

Click the download button in the top left. Then open your themes file by opening your user settings in Discord and scrolling down to themes. In there, there's button that says "Open theme folder"; place the theme file in there and enable it.

MetalMaxDog

How do I get rid of the shadow behind text boxes in chat?

Before you say "There are 2 separate variables that control the background colors for the main content area and the sidebars. --sidebar-color and main-content-color with the default values and how to use them listed in pinned comment."

I tried that and that just fixes the sidebar (where all your voice and text channels are) and main content (where your users are) I'm asking how to completely get rid of the shadow/black box when I send a message to a channel.

CapnKitten

When asking for help, you really shouldn't be so condescending; especially towards the person that made the thing you're using for free. The quote you got that from was from someone asking about the "black stripe" (i.e. the darker part on the left that is behind the servers and channels lists) with no mention of the background behind the messages, so that wouldn't fix your issue either way. I made it really simple for people to understand how to customize the theme. It's not my fault some don't read a pinned comment by the theme dev.

As for your issue... I thought I added the variable to the readme on the repo, but I guess not. --messages-color controls the background for messages. Making that transparent as well as removing the padding for messages should make it look how you want based on what you've asked.

:root {
    --messages-color: transparent !important;
}

.cozy-3raOZG.wrapper-2a6GCs,
.compact-T3H92H.wrapper-2a6GCs {
    padding: 0 !important;
}
MetalMaxDog

-

MetalMaxDog

It wasn't met to come off as condescending, as someone who is new to anything remotely located with coding I was getting frustrated and wanted to figure it out. Thanks for replying and not directing me towards your pinned comment. I understand you are doing that for free, but don't think that excuses you from criticism.

Cookie God

How do I make discord so that it doesn't have empty space around it?

CapnKitten

If you're talking about the margin around the content area to give off the frosted look, --app-margin is the variable you'll want to use. Making it 0 will remove said space. Add the code below to the custom CSS tab in your user settings and click save and update.

:root {
    --app-margin: 0 !important;
}
ZGRYWUS

how to add to discord

Lucas Pacheco

esto no e puede
alguien me puede ayudar

Hazinfds

how do i customize ??

CapnKitten

You can customize it by using the example in the pinned comment, and then utilizing the variables listed on the themes repo. A link to said repo is also in the pinned comment.

• RentalCouch •

could you make this compatible with the edit uploads plugin that's also here? whenever I have this theme installed it just doesn't do anything. would appreciate it thx

alide123321

how do I change the color of highlighted text

CapnKitten

That is controlled by the --app-accent-rgb variable.

Adam Fortney

I have an issue where the profile picture is inside of the message. Is this a setting I can change or is it just a bug? https://pasteboard.co/JtQrYje.png
Also, scrolling through messages is a little glitchy as it scrolls when hovering over profile pictures and sometimes does not work when hovering over text.

CapnKitten

This isn't exactly the right place to report issues because I don't get notifications for them. Please make a new issue on the theme's repo at: https://github.com/CapnKitten/Translucence/issues. With that said, the margin/padding issue in the image will be fixed soon.

Aarav Rocker

good theme but my discord lags a lot

NameGoesHereIThink

The background image I have (custom) keeps "reloading" every time I maximize the discord window. Is it supposed to do this?

CapnKitten

It shouldn't reload. Are you using imgur or something else to host the image?

Yehia

how to install it

CapnKitten

Download the theme file and put it in your themes folder for Bandaged BetterDiscord. Then enable it in your themes list.

DerpCake67

How do I change the color of the red theme to another color? Is it possible?

CapnKitten

It is possible. There's an example of what to use and where to put it in the pinned comment. In your case, the variable you'll want to use is --app-accent: #fff.

Stratos

To change the background image, does it have to be from a website with the jpg at the end or can it be from a file I have on my PC?

CapnKitten

Took a look at it to see if I could use an image on my local pc, but Discord apparently adds discordapp.com in front of any url() that isn't a complete url. For instance, changing app-bg to url(background.jpg) adds https://discordapp.com/channels/<maybe_user_id?>/ before the actual variable. So for the time being, uploading an image to a site is the only way, unless you want to encode an image to base64 but that creates a stupid long string to use.

Stratos

Thank you! Also, to change the blur strength of the background/lighting strength of the background, how would I do that? I took a look at the github you posted but couldn't figure out what it was that changes the blur.

CapnKitten

The --app-blur variable controls the blur intensity.

Marcelinho

how can I make the chat all transparent, without this black stripe?

CapnKitten

There are 2 separate variables that control the background colors for the main content area and the sidebars. --sidebar-color and main-content-color with the default values and how to use them listed in pinned comment.

MetalMaxDog

--card-color: rgba(0,0,0, 0.0) !important;

T Anderson

how can i change the background to a custom one?

CapnKitten

The steps for customizing the theme easily are listed in the pinned comment.

ActualTrash

Is there a way to make this theme completely transparent? Thanks in advance.

Anthony Anderson

I would love this as a feature. I thought that's what this theme did actually, and it was why I installed it in the first place.

CapnKitten

The transparency and blur intensity can be customized to however you like it. A list of variables and how to use them are in the pinned comment, thanks.

CapnKitten

This theme utilizes a various amount of CSS variables that allows you to customize it. They can be added to the custom CSS tab in BBD (located near the bottom of your user settings) or in the theme file itself. I recommend using putting it in your custom CSS tab because that'll stay there after theme updates; don't forget to save and update. A list of variables can be found on the theme's repo: https://github.com/CapnKitten/Translucence#variables

An example would be:

:root {
  --app-bg: url(https://i.imgur.com/8vNApkL.jpg) !important;
  --app-accent: #d73d3d !important;
}
Andrew Khoury

anyway I can change the background image?

Andrew Khoury

nvm what size should i make the image so it fits in the background?

CapnKitten

It gets stretched to fit it, so as long as the image is at least the size of your monitors resolution (if you use Discord in full screen) it shouldn't appear blurry.

Mark Villanueva

When i download this, it file only says /**

@import url(https://capnkitten.github.io/BetterDiscord/Themes/Translucence/css/source.css?v=1.0.2);

I have another skin that works and the file has a bunch of variables for different aspects, etc. What can I do to fix this?

CapnKitten

Please refer to my pinned comment on variables, thanks.

Jasmine Wang

This is really gorgeous! My only issue is that the glaring red of the icons/when you highlight puts me off a little bit; I think a color like #b2a0f9 would be more pleasing to the eye and still match with the theme.

CapnKitten

Good news for you is that you can customize it with a number of variables. Just go to your user settings, and near the bottom is a tab called Custom CSS; click that and add the following:

:root {
  --app-accent: #b2a0f9 !important;
  --app-accent-rgb: 178,160,249 !important;
}

An entire list of customizable variables can be found on the themes repo: https://github.com/CapnKitten/Translucence#variables

John Smith

I get a bunch of errors when I do this. I get like RBRACE expected at Line 2 Col 3 and line 3. It also says rule is empty.

Jesse E

if you just hit save and then update the code should work just fine anyway. i got the same error when i changed my background and it worked fine.

CapnKitten

Those errors and warnings don't affect anything. You can ignore them.

Jackson Greene

Ayy my boys listening to Make Them Suffer

f00z

it wont let me sign in how do i do it

Jinyoung M

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

afsdfsda

Impressive theme ! I really love it, thanks a bunch for sharing it.

JensDL

what do i need to change to make the height: 100%

CapnKitten

The spacing between the actual content and the app borders is controlled by --app-margin.

Adding this to your custom CSS will remove said spacing:

:root {
  --app-margin: 0 !important;
}
Malakasskatakys

custom CSSs dont work for me and idk why

Warren Sunjoto

how do you download it? and put in on discord?

Fay Pugz

you go to personal settings and sroll down and on the left side you should see themes an dopen theme folder then drap and drop the file into the theme folder

NinjaPro

i cant
how

23 sebasu

Does anyone know why discord is delayed when I have theme on? and if someone knows, they can tell me

Marcelinho

here too

Arjun Kumar

cuz ur computer is garbo lmao, it runs fine for me

Draewyn

Impressive theme ! I really love it, thanks a bunch for sharing it.