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

Canapin · 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 · GitHub

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

javascripts/discourse/components/category-box.hbs

3e11019f0


      
            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

app/assets/javascripts/discourse/app/components/categories-boxes.hbs

8d3c86d98


      
            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

app/assets/javascripts/discourse/app/components/category-logo.gjs

8d3c86d98

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;

Topic		Replies	Views
Selecting dark/light versions of category logos Product Support	2	713	October 7, 2022
Using LightDarkImg throws error Development	5	165	October 7, 2025
Set category background image based on user's selected theme Product Support	0	426	December 28, 2021
Is this still the solution for checking for dark mode? Development	4	251	February 20, 2025
Adding category images in Air Theme with Modern Category + Group Boxes Product Support	0	234	February 5, 2024

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

Related topics