Como corrigir imagens de tema claro em modo escuro para Modern Category Group Boxes

Danny_Dainton · Janeiro 9, 2025, 10:38am

Olá pessoal ,

Provavelmente estou apenas perdendo alguma configuração ou algo trivial, por isso estou buscando orientação.

Estou usando o componente Modern Category + Group Boxes no meu site e tenho imagens temáticas criadas para cada uma das Categorias.
O problema que estou enfrentando é que tenho versões claras e escuras das imagens definidas nas configurações da Categoria, mas na visualização principal das Categorias, ele está usando as versões do tema claro, enquanto no tema escuro.

Quando clico na categoria individual, ela está exibindo a imagem do tema escuro no topo

Alguém já se deparou com isso e conseguiu encontrar uma solução? Estou disposto a tentar quaisquer soluções alternativas “hacks” que vocês possam ter

Canapin · Janeiro 9, 2025, 11:14am

Tive um pouco de dificuldade em encontrar o componente, não parece haver um tópico no meta, ou o nome é diferente.

O repositório é GitHub - discourse/discourse-minimal-category-boxes

Confirmo o problema

Aqui estão o que eu acho que são as partes relevantes do código:
O código do logo do 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}}

As caixas de categoria regulares carregam um 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}}

O 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;

Danny_Dainton · Janeiro 9, 2025, 11:22am

Agradeço a resposta @Canapin

Existem etapas que você pode fornecer ou sugerir para aplicar uma solução alternativa para uma versão hospedada do Discourse?

Canapin · Janeiro 9, 2025, 11:25am

Se você estiver hospedado com o Discourse, pode aguardar uma resposta oficial aqui ou entrar em contato com team@discourse.org.

Se não, fique por perto para obter respostas de pessoas mais experientes em tecnologia (eu não sou)
(ou tente entrar em contato com a empresa de hospedagem onde você se registrou)

Em qualquer caso, a solução seria corrigir o componente de tema enviando um pull request para o repositório de código.

Heliosurge · Janeiro 10, 2025, 12:15am

Este TC é usado no Tema Ar. Então, talvez também marque o bug com o Tema Ar. Como o Ar tem modos Claro e Escuro.

Acabei de notar que já foi feito.

Danny_Dainton · Janeiro 17, 2025, 12:06pm

Para finalizar - Isso foi corrigido. Foi uma resolução super rápida pela equipe.

“Oi Danny, acabamos de fazer uma atualização no componente de tema que usará automaticamente o logo claro/escuro correto para as categorias. Este foi um caso em que o componente antecedeu o recurso de logo claro/escuro, então só precisávamos adicionar suporte para ele.”

Heliosurge · Janeiro 18, 2025, 8:49am

Pode ainda precisar de uma correção, pois não está respeitando a alternância Claro/Escuro, parecendo respeitar apenas o modo escuro/claro do navegador. Problema semelhante que afetava o logotipo do cabeçalho.

Tópico		Respostas	Visualizações
Selecting dark/light versions of category logos Support	3	622	23 de Junho de 2023
Using LightDarkImg throws error Dev	6	29	7 de Outubro de 2025
Set category background image based on user's selected theme Support	0	380	28 de Dezembro de 2021
Is this still the solution for checking for dark mode? Dev	4	90	20 de Fevereiro de 2025
Adding category images in Air Theme with Modern Category + Group Boxes Support	0	192	5 de Fevereiro de 2024

Como corrigir imagens de tema claro em modo escuro para Modern Category Group Boxes

Tópicos relacionados