Discourse Q&A "Upvote" button looks bad in dark themes

ux
1

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?

1 Like
2

is a rather ambiguous description of the problem, and this is only a guess.

background - CSS: Cascading Style Sheets | MDN

The property is a shorthand that sets the following properties in a single declaration: background-clip , background-color , background-image , background-origin , background-position , background-repeat , background-size , and background-attachment .

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.

2 Likes
3

Ahhh, I actually did use background-color. I forgot I had.

Anyway, overriding .qa-post .btn instead worked perfectly and now my upvote button is a nice dark gray.

1 Like