How to fix light theme images in Dark mode for Modern Category Group Boxes

Contribute UX
,

AI-generated summary

Issue Overview
The discussion revolves around fixing light theme images in Dark mode for Modern Category Group Boxes. Danny_Dainton initially reported the issue, where the light theme images were being used in Dark mode, despite having both light and dark versions set in the Category settings.

Investigation and Code Review
CocoQuark confirmed the issue and provided relevant code parts from the Discourse Minimal Category Boxes repository. They suggested that the solution would be to fix the theme component by sending a pull request to the code repository.

Workaround and Solution
Danny_Dainton asked for steps to apply a workaround for a hosted version of Discourse, and CocoQuark recommended waiting for an official reply or contacting the Discourse team. The issue was eventually fixed by the team, as reported by Danny_Dainton.

Ongoing Issue
However, Heliosurge noted that the fix may not be complete, as the Dark/Light toggle is not being respected, and the component seems to be only respecting the browser’s Dark/Light mode. This issue is similar to one that affected the header logo.

1

Hey folks :wave:,

I’m likely just missing some setting or something else trivial so I’m reaching out for some guidance.

I’m using the Modern Category + Group Boxes component on my site and I have themed images created for each of the Categories.

The issue I’m facing is that I have both light and dark versions of the images set in the Category settings but on the main Categories view, it’s using the Light theme ones, while in the Dark theme.

image
image1046×888 56.3 KB

image
image1810×350 51 KB

When I click into the individual Category, it’s displaying the dark theme image at the top though :thinking:

image
image1068×614 49.1 KB

Is this something that anyone has come across and managed to find a solution for? I’m up for trying any hacky workarounds that folks might have :pray:

3 Likes
2

I had a bit of trouble finding the component, it doesn’t seem there’s a topic on meta, or the name is different.

The repo is GitHub - discourse/discourse-minimal-category-boxes · GitHub

I confirm the issue :full_moon_with_face:

Here are what I think are the relevant code parts:

The logo code from the TC:

Regular category boxes load a template:

The template:

3 Likes
3

I appreciate the response @Canapin :pray:

Are there any steps that you can provide or suggest for applying a workaround for a hosted version of Discourse?

1 Like
4

If you are hosted with Discourse, you can wait for an official reply here or contact team@discourse.org.

If not, hang around for more tech-savvy people replies (I’m not) :stuck_out_tongue:
(or try to contact the hosting company you’ve registered to)

In any case, the solution would be to fix the theme component by sending a pull quest to the code repo.

3 Likes
5

This TC is used in the Air Theme. So maybe also tag bug with Air Theme. As Air has Light & Dark modes.

:persevering_face: Just noticed already done. :joy:

2 Likes
6

Just to close this out - This was fixed. :heart: It was a super quick turnaround by the team. :trophy:

“Hi Danny, we’ve just made an update to the theme component that will automatically use the correct light/dark logo for the categories. This was a case where the component predated the light/dark logo feature, so we just needed to add support for it.”

3 Likes
7

May still need a fix as it is not respecting the Dark/light toggle seems to be just respecting browser dark/light mode. Similar issue that was affecting header logo. :cry: