[Suggestion]: Lighter Scroll (track & thumb)

[Alyaqdhans]

Client Mod

Better Discord

Please provide screenshots of the unthemed areas.

For better contrast make the scroll track and thumb a bit lighter than this This is the main scroll (chat & settings)

other scrolls (channels & users) just need the scroll thumb to be changed, track isn't visible anyways

Before Submitting

• [X] I checked for similar reports of this issue.
• [X] I am on the latest stable Discord version.
• [X] I am on the latest version of the theme.
• [X] I have reinstalled the theme.

[Alyaqdhans]

would be nice too if search boxes were lighter too, to see the box edges clearly

[LuckFire]

For the scroll bars, I have no plans to modify them. They appear fine on an actual OLED display (from personal testing as well). If you want to change them, refer to this issue's comment: https://github.com/LuckFire/amoled-cord/issues/88#issuecomment-2251375194

Maybe the search bar could be a bit brighter, but again, it still also appears fine on an actual OLED display so I personally don't have any plans to change it at the moment.

It's really hard to get colors right for a theme that's just pitch black, monitor and brightness are huge factors. If you turn your brightness up, it's perfectly noticeable regardless of the display you're using.

Changing the color makes it too bright for those who have their brightness up. You're always free to manually adjust colors with your Custom CSS.

[Alyaqdhans]

made them to this and seems it didn't change

  --scrollbar-auto-scrollbar-color-thumb: var(--primary-100) !important;
  --scrollbar-auto-scrollbar-color-track: var(--primary-160) !important;
  --scrollbar-auto-thumb: var(--primary-100) !important;
  --scrollbar-auto-track: var(--primary-160) !important;
  --scrollbar-thin-thumb: var(--primary-100) !important;
  --scrollbar-thin-track: hsl(var(--black-hsl)/0) !important;

am I crazy?

[LuckFire]

That's very strange, when I paste it into Vencord's Quick CSS, it works. What client mod are you using?

[Alyaqdhans]

Better Discord

[LuckFire]

Yeah I'm not entirely sure how to get around it then, you can always just fork the theme and make your own changes to it then use those imports.

[Alyaqdhans]

Wait, in custom css it works, but when using the edit to theme it doesnt.

[LuckFire]

When you put it in the theme's file, it doesn't work because of the overrides. From what I understand, it gives priority to whatever applies the style first with !important, and I'm assuming BetterDiscord/Vencord import Custom CSS before everything else (not sure if that's really how it works, just based on my understanding with CSS).

[Alyaqdhans]

What do you mean overrides, I replaced the themes values so it should technically work..

[Alyaqdhans]

in case you didn't know, better discord allows theme editing

[LuckFire]

I know what it is, that is not what I'm referring to. I advise you look into the documentation for the !important property, as that's what I'm referring to when I say "overrides". I'm not really sure how I can explain it in an understandable way, I apologize.

https://developer.mozilla.org/en-US/docs/Web/CSS/important

[Alyaqdhans]

I know what !important does, but the thing is my custom CSS is empty, so when changing the theme values it should do something, if not then the theme itself does not change scroll colors.

[LuckFire]

It doesn't change anything since the source is being imported from a URL as well, it gets loaded before everything else, and since you cannot put anything before URL imports, you cannot apply your styling first. My explanation is my assumption on how quick css is loaded, which is before any other theme, but again in my original explanation I'm not really sure if that's how it loads.

CSS prioritizes how things load in order, it will not prioritize an attempt at overriding variables if they are already present. So since they are being overwritten already in the URL import, they will not override in the theme file. However if quick css is loaded before the theme file, then they will be.

https://github.com/LuckFire/amoled-cord/blob/main/clients/amoled-cord.theme.css#L12 -- Import for the main source in the theme.css file. https://github.com/LuckFire/amoled-cord/blob/main/src/amoled-cord.css#L123-L128 -- Existing overrides for the variables

[Alyaqdhans]

Wait so the styling wasn't local on the client? it was an imported url? then what is the use of those variables?

[LuckFire]

It's imported from a URL, but the actual theme file having the compiled source is a fallback. It's not really the best system, ideally I would rather just have everything in the theme file, but for some reason there's no reliable theme updater that actually updates the theme file.

I should probably look into removing having !important on every single variable so they can easily be changed in the actual theme file.

[Alyaqdhans]

This is for the other clients? because Better Discord have plugin & theme updater.

[LuckFire]

From my experience, it rarely works

[FedeIlLeone]

I know what !important does, but the thing is my custom CSS is empty, so when changing the theme values it should do something, if not then the theme itself does not change scroll colors.

In this case, the problem is likely that the variables being edited are under .theme-dark, but those get overridden right after by color-mix variables. To actually see changes to things like scrollbars, you'd need to adjust the variables specifically used in color-mix. This setup was done to handle profile themes and other parts of the app that need blended theme colors.

If you want to make this simpler, you can put any overrides at the end of the file, which would apply to both regular and color-mix variables (but you may need to throw in an !important). So, it would be enough to put

.theme-dark {
  --scrollbar-auto-scrollbar-color-thumb: var(--primary-100) !important;
  --scrollbar-auto-scrollbar-color-track: var(--primary-160) !important;
  --scrollbar-auto-thumb: var(--primary-100) !important;
  --scrollbar-auto-track: var(--primary-160) !important;
  --scrollbar-thin-thumb: var(--primary-100) !important;
  --scrollbar-thin-track: hsl(var(--black-hsl)/0) !important;
}

at the end of the file.

Also, just to clarify what Luck said about the rule overrides: once you import the URL, any variable changes that come afterward will override what's in that import. That means if you update variables after the import, those new values take priority over the imported ones. So yeah, any changes that are done after importing the URL should be editable.