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

Danny_Dainton · January 9, 2025, 10:38am

Hey folks ,

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.

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

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

CocoQuark · January 9, 2025, 11:14am

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

I confirm the issue

Here are what I think are the relevant code parts:

The logo code from the TC:

github.com

discourse/discourse-minimal-category-boxes/blob/3e11019f018483643a2c76a8a51b5a1d141b8839/javascripts/discourse/components/category-box.hbs#L18


      
            class="category category-box category-box-{{@category.slug}}
              {{if @category.isMuted 'muted'}}
              {{if this.noCategoryStyle 'no-category-boxes-style'}}"
          >
            <div class="category-box-inner">
              <div
                class="category-logo
                  {{if @category.uploaded_logo.url '' 'no-logo-present'}}"
                style={{this.backgroundColor}}
              >
                {{#if @category.uploaded_logo.url}}
                  {{cdn-img
                    src=@category.uploaded_logo.url
                    class="logo"
                    width=@category.uploaded_logo.width
                    height=@category.uploaded_logo.height
                    alt=""
                  }}
                {{else}}
                  <span class="category-abbreviation">
                    {{this.getAbbreviation}}

Regular category boxes load a template:

github.com

discourse/discourse/blob/8d3c86d98496b31096763874217a59e27dc997c3/app/assets/javascripts/discourse/app/components/categories-boxes.hbs#L23


      
            data-category-id={{c.id}}
            data-notification-level={{c.notificationLevelString}}
            data-url={{c.url}}
            class="category category-box category-box-{{c.slug}}
              {{if c.isMuted 'muted'}}"
          >
            <div class="category-box-inner">
              {{#unless c.isMuted}}
                <div class="category-logo">
                  {{#if c.uploaded_logo.url}}
                    <CategoryLogo @category={{c}} />
                  {{/if}}
                </div>
              {{/unless}}
          
              <div class="category-details">
                <div class="category-box-heading">
                  <a class="parent-box-link" href={{c.url}}>
                    <h3>
                      <CategoryTitleBefore @category={{c}} />
                      {{#if c.read_restricted}}

The template:

github.com

discourse/discourse/blob/8d3c86d98496b31096763874217a59e27dc997c3/app/assets/javascripts/discourse/app/components/category-logo.gjs

import LightDarkImg from "discourse/components/light-dark-img";

const CategoryLogo = <template>
  <div class="category-logo aspect-image">
    <LightDarkImg
      @lightImg={{@category.uploaded_logo}}
      @darkImg={{@category.uploaded_logo_dark}}
    />
  </div>
</template>;

export default CategoryLogo;

Danny_Dainton · January 9, 2025, 11:22am

I appreciate the response @CocoQuark

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

CocoQuark · January 9, 2025, 11:25am

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)
(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.

Heliosurge · January 10, 2025, 12:15am

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

Just noticed already done.

Danny_Dainton · January 17, 2025, 12:06pm

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

“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.”

Heliosurge · January 18, 2025, 8:49am

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.

Topic		Replies	Views
Category logo image overlaid by text after recent update Bug	17	1007	January 23, 2023
Category Banners Theme component official , category-banners	64	45535	October 20, 2024
Category Groups Theme component official , category-groups	15	7689	July 19, 2024
Featured Categories Header Theme component	22	3418	September 19, 2024
Selecting dark/light versions of category logos Support	3	607	June 23, 2023

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

Related topics