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

Translucence

75K 122.3K 159

A translucent/frosted glass Discord theme.

Comments (47)

Sign In to post a comment

AsthmaticNuudle

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

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;
}
Osiris

how do i add this to my themes on 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);
  --app-accent: #d73d3d;
}
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.