Cómo solucionar las imágenes de tema claro en modo oscuro para Modern Category Group Boxes

Danny_Dainton · 9 Enero, 2025 10:38

Hola a todos ,

Probablemente me esté perdiendo alguna configuración o algo trivial, así que pido orientación.

Estoy usando el componente Modern Category + Group Boxes en mi sitio y tengo imágenes temáticas creadas para cada una de las Categorías.
El problema que enfrento es que tengo versiones de imágenes claras y oscuras configuradas en los ajustes de Categoría, pero en la vista principal de Categorías, está usando las de tema claro, mientras que en el tema oscuro.

Sin embargo, cuando hago clic en la Categoría individual, se muestra la imagen del tema oscuro en la parte superior

¿Es esto algo que alguien ha encontrado y ha logrado encontrar una solución? Estoy dispuesto a probar cualquier solución alternativa “hacky” que la gente pueda tener

Canapin · 9 Enero, 2025 11:14

Tuve un poco de dificultad para encontrar el componente, no parece que haya un tema en meta, o el nombre es diferente.

El repositorio es GitHub - discourse/discourse-minimal-category-boxes

Confirmo el problema

Aquí están las partes del código que creo que son relevantes:
El código del logo del 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}}

Los cuadros de categoría normales cargan una plantilla:

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}}

La plantilla:

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 · 9 Enero, 2025 11:22

Agradezco la respuesta @Canapin

¿Hay algún paso que pueda proporcionar o sugerir para aplicar una solución alternativa para una versión alojada de Discourse?

Canapin · 9 Enero, 2025 11:25

Si está alojado con Discourse, puede esperar una respuesta oficial aquí o ponerse en contacto con team@discourse.org.

Si no, espere a que respondan personas más expertas en tecnología (yo no lo soy)
(o intente ponerse en contacto con la empresa de alojamiento con la que se registró)

En cualquier caso, la solución sería arreglar el componente de tema enviando una solicitud de extracción al repositorio de código.

Heliosurge · 10 Enero, 2025 00:15

Este TC se usa en el tema Air. Así que tal vez también etiquetar el error con el tema Air. Ya que Air tiene modos claro y oscuro.

Acabo de notar que ya está hecho.

Danny_Dainton · 17 Enero, 2025 12:06

Para finalizar esto, se solucionó. Fue una respuesta muy rápida por parte del equipo.

“Hola Danny, acabamos de hacer una actualización del componente temático que utilizará automáticamente el logo claro/oscuro correcto para las categorías. Este fue un caso en el que el componente era anterior a la función de logo claro/oscuro, por lo que solo necesitábamos agregarle soporte.”

Heliosurge · 18 Enero, 2025 08:49

Aún puede necesitar una corrección, ya que no respeta el cambio de modo oscuro/claro, parece que solo respeta el modo oscuro/claro del navegador. Problema similar que afectaba al logotipo del encabezado.

Tema		Respuestas	Vistas
Selecting dark/light versions of category logos Support	3	622	23 Junio 2023
Using LightDarkImg throws error Dev	6	31	7 Octubre 2025
Set category background image based on user's selected theme Support	0	380	28 Diciembre 2021
Is this still the solution for checking for dark mode? Dev	4	95	20 Febrero 2025
Adding category images in Air Theme with Modern Category + Group Boxes Support	0	192	5 Febrero 2024

Cómo solucionar las imágenes de tema claro en modo oscuro para Modern Category Group Boxes

Temas relacionados