Transparency not working

[driftywinds]

The theme is not transparent as in the README.md even though I've gone into Better Discord settings and enabled transparency

[CarlosGT7274]

try from picom, of if are on linux.

[highbaud]

Same issue for me - on Windows 11

[iamgrave]

The custom CSS settings, from what I see, doesn't have a transparent hex color. I played around with them in VS Code to get my own use case but you can see if it works for you. Otherwise, you can google the color and transparency you need and plug it in.

--background-solid: #16192129;
--background-solid-dark: #10121836;
--background-solid-darker: #0c0e123c;

[highbaud]

nice catch, thanks @iamgrave

[froopy090]

I had to manually make changes to my css file. I removed the background image and made sure everything was transparent using rgba values (where the last value "alpha" tells you how transparent it is). I also went ahead and changed the rgb values because it had a weird greenish tint for me. Play around with the values until you get something you like.

@import url('https://DiscordStyles.github.io/DarkMatter/src/base.css');

/* Variables */
:root {
    --avatar-size: 32px;
    --background-image: url('https://i.imgur.com/7SbtKvw.png');
    --home-image: url('https://i.imgur.com/233d55Y.gif');
    --background-solid: rgba(0, 15, 25, 0.3); /* Adjusted transparency */
    --background-solid-dark: rgba(0, 10, 20, 0.25); /* Adjusted transparency */
    --background-solid-darker: rgba(0, 5, 15, 0.2); /* Adjusted transparency */
    --accent: 37, 172, 232;
    --accent-alt: 29, 101, 134;
}

/* Apply transparent backgrounds to necessary elements */
body, .app, .container, .container-3baos1, .layer, .layer-3QrUeG {
    background-color: var(--background-solid-dark) !important; /* Apply the darker transparent background */
}

.sidebar, .sidebar-1tnWFu, .channels, .members, .content, .container-2o3qEW {
    background-color: var(--background-solid-darker) !important; /* Apply the darkest transparent background */
}

/* Additional transparency for specific elements */
.header, .header-2Mx0tC, .title, .title-3FQ39c {
    background-color: var(--background-solid) !important; /* Apply the solid transparent background */
}

/* Remove existing background images */
body, .app, .container, .container-3baos1, .layer, .layer-3QrUeG,
.sidebar, .sidebar-1tnWFu, .channels, .members, .content, .container-2o3qEW,
.header, .header-2Mx0tC, .title, .title-3FQ39c {
    background-image: none !important;
}