Low contrast on selected channel

[jetblackrx89]

It seems that after either an update to BetterDiscord v1.9.3 or the theme itself, some elements have extremely poor contrast, like the channel highlight color for the currently-viewed channel in the sidebar, making them very difficult to see. Here is an unthemed vs unthemed view for comparison.

<img width=300" alt="Screenshot 2023-06-23 at 9 58 51 PM" src="https://github.com/dracula/betterdiscord/assets/7515801/54ade3ec-c9bf-4520-b096-ab5108cab639">

[mrhappyma]

That's a good point, I have Discord's funky emojis + colored channels experiment thing so didn't see this. Are there any other elements I missed that have bad contrast?

For context, this was a theme update. There were a lot of issues with the theme with unthemed elements and particularly bad looking sections. I thought about it and eventually ended up redoing the theme entirely (about a week ago).

[jetblackrx89]

Thanks. I can't think of any others right now, but if this is a common color combination for a foreground and background, it could be an issue for other elements. As it is right now, I am mostly having a hard time noticing what channel I am in.

[mrhappyma]

I'll get this fixed tomorrow :+1:

[jetblackrx89]

Sorry to bother, but was this still planned to be fixed soon? Thanks.

[mrhappyma]

Sorry I never replied to this! As I remember it, I couldn't seem to find a selector that would work for this, so it might not be possible to theme separately.

[jetblackrx89]

Here, I'll give you the fix at this point. I have experience with CSS, so it wasn't too difficult. Just add these lines somewhere:

/* Current channel */
div[class*="modeSelected"] > div  > a[data-list-item-id*="channels"]{
  background-color: var(--dracula-comment) !important;
}
div[class*="modeSelected"] > div  > a[data-list-item-id*="channels"] svg, div:hover > a[data-list-item-id*="channels"] svg {
  color: var(--dracula-white) !important;
}

A before and after screenshot:

This also fixes a stylistic inconsistency where the glyph before each channel name doesn't turn white on mouseover like the channel text does. I felt it looked better to have both turn white, but it's up to you.

[jetblackrx89]

Wait, wait, hold up...

So I am trying to remember what Dracula used to look like, and now I am not so sure if if it's correct to make selections in the channel list have a lighter color. I think the issue is that the entire sidebar background got unthemed at one point. The member list on the right also looks unthemed.

If you use this code instead to just fix the background, all other UI colorations seem to make a lot more sense, since even subtle things like the mouseover background color on inactive channels is hard to see until you do this. I'll let you decide what you want to do, but it might be better to just fix it this way. That being said, if I apply both this fix and the previous one with the active channel label recoloration, I think that looks pretty cool as well, even though that's now going beyond the original theme's design.

What also believes me to think this is correct is that the lower button showing your status, mic, and headset just below the sideback also uses "--dracula-background" already.

Final thought: I really wish I didn't need to rely on a static class name like "container_b2ce9c" for the member list, but I can't see any better way to identity it. This means it will eventually break in a future update again if/when they rename it.

/*Theme sidebar*/
div[class^='base'] > div[class^='content'] > div[class^='sidebar'] > *{
background-color: var(--dracula-background) !important;
}

/*Theme member list*/
div.container_b2ce9c, div.container_b2ce9c > aside > div[class^="members"] {
background-color: var(--dracula-background) !important;
}
div[aria-label="Members"] > div{
background-color: var(--dracula-background-alt) !important;
}

[mrhappyma]

The colors are very similar, but it should be themed...

I'll hold on merging for now. I've been really busy lately and haven't had time to look at the theme very much - including breakages in #36. I agree with most of what you've said. I need to find some time and look into this more later.

On your final note: these "container_b2ce9c" style class names have seemed consistent (mostly) and from my knowledge are the only way to theme individual elements.