The Discourse Q&A “Upvote” button looks bad in dark themes. Watercolor_Games reported that the upvote buttons have a light background in dark themes, making them hard to see. They tried a CSS override with .qa-button but it didn’t work. Mittineague suggested that the issue might be due to the use of the shorthand background property or CSS specificity. However, Watercolor_Games later revealed that they had actually used background-color and found that overriding .qa-post .btn instead fixed the issue, making the upvote button a dark gray color.
My friend Trey discovered a weird issue on my forum. If you look at this bug report post for my game, you’ll see it. The upvote buttons next to my replies look extremely ugly on our dark theme.
Like this:
The button uses a light themed background in the dark theme. Only thing is, the button foreground is light too - so you can’t see the up arrow until you hover over the button and it goes dark grey. Buttons in my theme should be a dim gray color and not white like this.
It looks pretty bad and I can’t see a way to fix it. I tried a CSS override:
.qa-button
{
background: #222;
}
but it did not work from what I can tell. Any thoughts?
As with all shorthand properties, any omitted sub-values will be set to their initial value.
In other words, by using the shorthand property instead of only the background-color property there is a chance that another property is reverting to its initial value interfering with the desired change.
My best guess, however, is that there is other CSS with more specificity and the class selector you are using is less specific and being over-ridden.
The best way to diagnose the problem would be to use the browsers developer tools to see what CSS is involved with the display.
