Flarum Tag Title not readable

Jarvo

Heyo,

So I have this weird thing that my forum tag titles are not clearly readable...
For the secondary tags, it's readable, but for the primary tags it's not.

I am hosting my forum on Freeflarum, and it's a Dutch forum. I already contacted the owner of Freeflarum and they said it's up to the Flarum team to resolve this issue.

Tag where you can see: https://acteursgezocht.freeflarum.com/t/mededelingen
(Text should be white)

clarkwinkelmann

Jarvo when I visit your website, the primary tags show white text on pink background, so it seems to work as intended?

Is the forum using any kind of night/dark mode extension or custom code, are you using any dark mode plugin in your browser and is your operating system in dark mode?

I tried in Firefox using no special browser plugin. I tried changing the browser/operating system dark mode preference but your website appears to look the same no matter if it's set to auto/light/dark. This is the expected behavior on a basic Flarum installation without extensions.

The color of the text will change according to the tag background, so maybe you tweaked the color in the meantime or added some additional CSS?

Jarvo

clarkwinkelmann Hi Clark,

I have tried on my laptop and now on phone, but it still shows the dark colored text.

I don’t have any custom style applied, neither I have the dark mode feature enabled.

So I don’t know why it is making it dark for me.
For the record, I’m talking about the title of the tag and not the description which is below it. (On top)

I have even tried to disable the dark mode on my phone, but that doesn’t changes it.

ornanovitch

It comes from css:

The normal Tags app rule:

.Hero {
  text-align: center;
  color: var(--contrast-color,var(--hero-color));
}

is overridden by this custom (or other app's) one:

.Hero-title {
  margin-top: 0px;
  text-align: center;
  color: #667c99; /** your tags titles got this color **/
}

I have no idea where it could come from.

Jarvo

ornanovitch Hmmm, strange because I haven’t changed anything. Will look into this. Thanks!

Jarvo

ornanovitch how can I check if it is an app or something else?

[EDIT]
I figured out that I am not the only forum having this. There are more forums hosted on FreeFlarum with this issue.

I contacted the developer about it. Hope they can fix it.

SKevo

Jarvo thanks for providing additional context in e-mail! I was able to check the sources of extensions at FreeFlarum now, and the above-mentioned CSS rule seems to come from the contactme extension: https://github.com/justoverclockl/flarum-ext-contactme/blob/80a95932b85a65363a31f61c6cc48ec8f52eec72/resources/less/forum.less#L13-L17

As FreeFlarum does not maintain any Flarum extensions, this should be fixed by @Justoverclock

Jarvo

SKevo luceos

Thanks for replying, both of you.

I have disabled the extension and now it’s back to normal again.

ornanovitch

SKevo good catch 🙂

luceos

For the time being you can try if this helps:

.Hero-title { color: inherit !important; }

In your Custom CSS of your admin area.