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

**URL:** https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325
**Category:** UX
**Tags:** dark-theme, air-theme
**Created:** [9 Janeiro , 2025 10:38 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325 "2025-01-09T10:38:26Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Danny\_Dainton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danny_dainton/32/486326_2.png) [@Danny\_Dainton](https://meta.discourse.org/u/Danny_Dainton)
#### Post date: [9 Janeiro , 2025 10:38 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/1 "2025-01-09T10:38:27Z")

</div>

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.

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/1/7/91722f2f12e3e8975bbba6809147e41950d0903b.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/4/3/f43f5f5242709e2cdeae58b4c9f72171d8ae06c3.png)

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/0/f/d0fdedcafb6f6789449337424666f51cce0ae607.png)

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 🙏

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [9 Janeiro , 2025 11:14 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/2 "2025-01-09T11:14:13Z")

</div>

> [@Danny\_Dainton](#):
>
> Modern Category + Group Boxes

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](https://github.com/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:

> <https://github.com/discourse/discourse-minimal-category-boxes/blob/3e11019f018483643a2c76a8a51b5a1d141b8839/javascripts/discourse/components/category-box.hbs#L18>

As caixas de categoria regulares carregam um template:

> <https://github.com/discourse/discourse/blob/8d3c86d98496b31096763874217a59e27dc997c3/app/assets/javascripts/discourse/app/components/categories-boxes.hbs#L23>

O template:

> <https://github.com/discourse/discourse/blob/8d3c86d98496b31096763874217a59e27dc997c3/app/assets/javascripts/discourse/app/components/category-logo.gjs>

---

<div class="post-metadata">

### Author: ![Danny\_Dainton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danny_dainton/32/486326_2.png) [@Danny\_Dainton](https://meta.discourse.org/u/Danny_Dainton)
#### Post date: [9 Janeiro , 2025 11:22 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/3 "2025-01-09T11:22:32Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [9 Janeiro , 2025 11:25 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/4 "2025-01-09T11:25:49Z")

</div>

Se você estiver hospedado com o Discourse, pode aguardar uma resposta oficial aqui ou entrar em contato com [team@discourse.org](mailto: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.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [10 Janeiro , 2025 00:15 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/5 "2025-01-10T00:15:35Z")

</div>

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. 😂

---

<div class="post-metadata">

### Author: ![Danny\_Dainton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danny_dainton/32/486326_2.png) [@Danny\_Dainton](https://meta.discourse.org/u/Danny_Dainton)
#### Post date: [17 Janeiro , 2025 12:06 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/6 "2025-01-17T12:06:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [18 Janeiro , 2025 08:49 UTC](https://meta.discourse.org/t/how-to-fix-light-theme-images-in-dark-mode-for-modern-category-group-boxes/346325/7 "2025-01-18T08:49:38Z")

</div>

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. 😢