So beheben Sie Bilder im Light-Theme in Dark Mode für Modern Category Group Boxes

Danny_Dainton · 9. Januar 2025 um 10:38

Hallo Leute ,

Ich vermisse wahrscheinlich nur eine Einstellung oder etwas anderes Triviales, daher bitte ich um Rat.

Ich benutze die Komponente Modern Category + Group Boxes auf meiner Website und habe für jede Kategorie themenbezogene Bilder erstellt.
Das Problem, mit dem ich konfrontiert bin, ist, dass ich sowohl helle als auch dunkle Versionen der Bilder in den Kategorieeinstellungen festgelegt habe, aber in der Hauptansicht der Kategorien werden die hellen Bilder verwendet, während im Dark Mode.

Wenn ich jedoch in die einzelne Kategorie klicke, wird oben das Bild im Dark Mode angezeigt

Ist das etwas, auf das jemand gestoßen ist und eine Lösung gefunden hat? Ich bin bereit, alle “hacky” Workarounds auszuprobieren, die ihr vielleicht habt

Canapin · 9. Januar 2025 um 11:14

Ich hatte ein wenig Mühe, die Komponente zu finden. Es scheint kein Thema auf Meta zu geben, oder der Name ist anders.

Das Repository ist GitHub - discourse/discourse-minimal-category-boxes

Ich bestätige das Problem

Hier sind die Code-Teile, die meiner Meinung nach relevant sind:
Der Logo-Code vom 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}}

Reguläre Kategorie-Felder laden eine Vorlage:

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

Die Vorlage:

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. Januar 2025 um 11:22

Ich schätze die Antwort @Canapin

Gibt es Schritte, die Sie für die Anwendung einer Problemumgehung für eine gehostete Version von Discourse bereitstellen oder vorschlagen können?

Canapin · 9. Januar 2025 um 11:25

Wenn Sie mit Discourse gehostet werden, können Sie hier auf eine offizielle Antwort warten oder sich an team@discourse.org wenden.

Wenn nicht, bleiben Sie hier für Antworten von technisch versierteren Personen (ich gehöre nicht dazu)
(oder versuchen Sie, das Hosting-Unternehmen zu kontaktieren, bei dem Sie sich registriert haben)

In jedem Fall wäre die Lösung, die Theme-Komponente zu reparieren, indem Sie eine Pull-Anfrage an das Code-Repository senden.

Heliosurge · 10. Januar 2025 um 00:15

Dieser TC wird im Air-Theme verwendet. Markieren Sie Fehler also vielleicht auch mit Air-Theme. Da Air Licht- und Dunkelmodi hat.

Gerade bemerkt, bereits erledigt.

Danny_Dainton · 17. Januar 2025 um 12:06

Abschließend – dies wurde behoben. Die Umstellung durch das Team war super schnell.

„Hallo Danny, wir haben gerade eine Aktualisierung der Theme-Komponente vorgenommen, die automatisch das richtige helle/dunkle Logo für die Kategorien verwendet. Dies war ein Fall, in dem die Komponente vor der hellen/dunklen Logo-Funktion existierte, sodass wir nur Unterstützung dafür hinzufügen mussten.“

Heliosurge · 18. Januar 2025 um 08:49

Muss möglicherweise noch behoben werden, da die Dunkel-/Hell-Umschaltung nicht beachtet wird und nur der Dunkel-/Hell-Modus des Browsers respektiert wird. Ähnliches Problem, das das Header-Logo betraf.

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

So beheben Sie Bilder im Light-Theme in Dark Mode für Modern Category Group Boxes

Verwandte Themen