Minor bug with dark theme & emoji buttons (FIXED)

[lah7]

The background colour on emoji reaction buttons seems a bit jarring in its current state. I’m using Firefox on a KDE desktop under a Breeze Dark theme.

Firefox:

Chrome:

As I was writing this, I remembered that my controls are this colour because I made a change in about:config -

widget.content.gtk-theme-override  Breeze:light

I think this was because some websites years ago showed a clashing background/text colour, but it seems okay now. (Edit: Well, still an issue on some sites) Back to native:

However, I did patch the CSS for myself during this time using Stylus extension to get this result:

It turns out this happens anyway in Chrome, and in Firefox by visiting the site using the dark forum theme but a light OS theme.

This is my snippet of code, which might be useful to add to the dark theme, so buttons are custom styled to match the post buttons and don’t rely on the native look, which may or may not have a dark background button.

Code

.post-retort {
    background: var(--secondary);
    color: white;
    border-color: transparent;
    border-radius: 5px;
    padding: 6px;
}

.post-retort:hover {
    background: var(--primary-low);
}

.post-retort .post-retort__tooltip {
    color: black;
    z-index: 10;
}

.post-controls > button:first-child {
    margin-left: 5px;
}

.post-retort span {
    background: var(--secondary);
    color: white;
}

.post-retort span::after {
    display: none;
}

.post-retort .post-retort__tooltip {
    background: var(--secondary-high);
    color: white;
}

[Kresimir]

While an improvement compared to the white background, pure black is not good either, because of emojis like and …

A nice dark grey is perfect. Garuda Linux Forum has it tuned perfectly, with really nice borders, as well. It would be wise to borrow their code,¹ as I don’t think any improvement upon that is possible. Or ask @jonathon, IIRC I think it was him who implemented that change for the Garuda Forum.

Fortunately for me, looks good on any background, except green.

---

¹ With maybe a handful of exceptions, borrowing settings and config from Garuda is generally a good idea, not only when it comes to their website, but the OS in general.

[Bryanpwo]

@lah7
My apologies for the late reply, I just noticed this post.
Thank you for sharing the code and I have implemented it on the dark theme, it looks good.