CapnKitten

CapnKitten's support server

CapnKitten


16.7K 58.2K

Material Discord

A theme based on Google's Material Design

37.2K 121.7K

Spotify Discord

Combine Discord and Spotify into one.

75K 122.3K

Translucence

A translucent/frosted glass Discord theme.

                
17.1K 29.6K

Hide Channels

Allows you to hide the channels list in servers and DMs

              
17.1K 29.6K

Hide Channels

Allows you to hide the channels list in servers and DMs

16.7K 58.2K

Material Discord

A theme based on Google's Material Design

37.2K 121.7K

Spotify Discord

Combine Discord and Spotify into one.

75K 122.3K

Translucence

A translucent/frosted glass Discord theme.

CapnKitten
Translucence

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;
}
CapnKitten
Hide Channels

You have to enable it in your plugins list.

CapnKitten
Translucence

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

CapnKitten
Translucence

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;
}
CapnKitten
Translucence

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.

CapnKitten
Translucence

Please refer to my pinned comment on variables, thanks.

CapnKitten
Hide Channels

One of the themes I made; Material Discord. https://betterdiscordlibrary.com/themes/Material%20Discord

CapnKitten
Translucence

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

CapnKitten
Hide Channels

Not currently, but I can see about adding it. No guarantees though.

CapnKitten
Translucence

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

CapnKitten
Translucence

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.

CapnKitten
Translucence

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.

CapnKitten
Translucence

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
Translucence

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

CapnKitten
Translucence

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.

CapnKitten
Translucence

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

CapnKitten
Translucence

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

CapnKitten
Translucence

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.

CapnKitten
Translucence

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

CapnKitten
Hide Channels

You have to enable it after putting the file in your plugins folder.

CapnKitten
Hide Channels

The members list is already collapsible. Regarding only showing avatars, that can easily be done with a theme rather than adding it to the plugin.

CapnKitten
Material Discord

Not sure which version of the theme you're using, but it's up-to-date.

CapnKitten
Translucence

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.

CapnKitten
Hide Channels

That's weird because disabling the theme should revert it back to normal. If you go to your plugins list, there's a button at the top that says "Open plugin folder"; click that to verify that the plugin file is actually gone. If it isn't, delete it, then redownload the plugin and enable it. Doing that should fix any issues you have.

CapnKitten
Translucence

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;
}
CapnKitten
Translucence

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;
}
CapnKitten
Hide Channels

The following code will make it so only avatars are visible in the members list. Add it to your custom css.

.membersWrap-2h-GB4 {
    min-width: 66px;
}

.members-1998pB {
    width: 66px;
}
CapnKitten
Translucence

Not sure what you mean.

CapnKitten
Translucence

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.

CapnKitten
Translucence

Thanks for the kind words.

CapnKitten
Translucence

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);
}
CapnKitten
Hide Channels

Plugins are designed to work with vanilla Discord, not themes. Theme developers have to make it so plugins work fine with their theme(s). As of now, the plugin is working as intended with vanilla Discord, so you'll have to contact the theme developer to get it fixed, sorry.

CapnKitten
Hide Channels

I can take a look at adding a toggle for the status area.

CapnKitten
Translucence

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;
}
CapnKitten
Translucence

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.

CapnKitten
Hide Channels

Fantastic criticism... Mind explaining what's wrong? Or do you want me to treat you like an ass too?

CapnKitten
Hide Channels

I have noticed that for some reason, on rare occasions, it adds another toggle button that causes it to not function at all. I haven't figured out what causes it to do that. For the time being, I'll push an update that'll remove all toggle buttons. You may or may not have to re-enable it afterwards.

CapnKitten
Spotify Discord

Currently, you can change the variable in the custom CSS tab in your user settings to an image like the example below, but because of how I made the theme to mimic Spotify, there are other areas that won't look as good:

:root {
    --chat-color: url(IMAGE_URL_HERE) no-repeat !important;
}
CapnKitten
Translucence

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.

CapnKitten
Hide Channels

Interesting. When you download the plugin, what's the file size? For reference, the source code is 9kb.

CapnKitten
Translucence

Glad I could help.

CapnKitten
Hide Channels

I found the issue and have it fully fixed. It'll be in v1.0.6.

CapnKitten
Translucence

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

CapnKitten
Translucence

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.

CapnKitten
Translucence

Got it fixed, will be in the next update.

CapnKitten
Material Discord

The way I styled the unread messages notification dots is by relying on a class added with BBD, but for some reason it's currently removed from it. So I just reverted the notification dots to vanilla Discord for the time being, sorry.

CapnKitten
Translucence

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.

CapnKitten
Translucence

Update is live.

CapnKitten
Translucence

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.

CapnKitten
Spotify Discord

It's already been fixed with the recent update to the theme. Restarting your discord app should get you the update.

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

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.

CapnKitten
Translucence

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);
}
CapnKitten
Translucence

Could you post a screenshot with an example, thanks.

CapnKitten
Translucence

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;