# Einzigartiges Farbschema für eine Kategorie

**URL:** https://meta.discourse.org/t/unique-color-scheme-for-a-category/278084
**Category:** Development
**Created:** [6. September 2023 um 21:15 UTC](https://meta.discourse.org/t/unique-color-scheme-for-a-category/278084 "2023-09-06T21:15:14Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Rhababo](https://avatars.discourse-cdn.com/v4/letter/r/5fc32e/32.png) [@Rhababo](https://meta.discourse.org/u/Rhababo)
#### Post date: [6. September 2023 um 21:15 UTC](https://meta.discourse.org/t/unique-color-scheme-for-a-category/278084/1 "2023-09-06T21:15:15Z")

</div>

Hallo.

Ich portiere ein älteres Forum auf Discourse und die ursprüngliche Seite hatte ein einzigartiges Theme (einschließlich eines einzigartigen Header-Logos) für eine ihrer Kategorien.

Meine aktuelle Lösung ist eine Theme-Komponente, die ungefähr so aussieht:

**CSS:**

```css
body.category-target-category{
/// Ersetzen Sie die #hexcodes durch die Farbwerte Ihrer Wahl
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
/// Fahren Sie für alle erforderlichen Farbwerte fort
}

```

**HTML/JS:**

```javascript
    <script type="text/discourse-plugin" version="0.2.0">
        api.onPageChange(() => {
            var logo = document.getElementById("site-logo");
            var categories = document.getElementsByClassName("category-target-category");
            if(categories.length > 0)
            {
               logo.src = "category-specific-logo-url";
            }
            else
            {
                logo.src = "standard-logo-url";
            }
        });
    </script>

```

Derzeit muss ich jeden möglichen Farbwert in [color\_definitions.scss](https://github.com/discourse/discourse/blob/30528eac5cbead70e751f25030573befa32ea50f/app/assets/stylesheets/color_definitions.scss) durchgehen, um sie zu überschreiben. Ich glaube, dass die Werte für diese Datei aus [foundation/color\_transformations.scss](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/foundation/color_transformations.scss) stammen, die sie aus den Werten in [foundation/colors.scss](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/foundation/colors.scss) generiert. Ich weiß, dass man die Root-Farbschemewerte entweder über das Admin-Menü oder in der about.json der Theme-Komponente überschreiben kann, aber ich glaube, dass diese Änderungen seitenweit erfolgen.

Gibt es eine effizientere Möglichkeit, eine bestimmte Kategorie anzupassen, anstatt alle über 100 Variablen in color\_definitions.scss aufzulisten? Könnte beispielsweise die Datei foundation/colors.scss über eine Theme-Komponente modifiziert werden?

Vielen Dank für Ihre Hilfe!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [6. September 2023 um 21:26 UTC](https://meta.discourse.org/t/unique-color-scheme-for-a-category/278084/2 "2023-09-06T21:26:21Z")

</div>

Hi @Rhababo 👋 Willkommen bei Meta 🙂

Falls du noch keine Erfahrung mit Discourse-Themes und -Entwicklung hast, empfehle ich dir, mit den folgenden Ressourcen zu beginnen:

> [@Ich möchte lernen, wie man für Discourse programmiert](https://meta.discourse.org/t/i-want-to-learn-how-to-program-for-discourse/264925/2?u=lilly):
>
> ohne Sie um weitere Details zu bitten, sind dies ein guter Anfang.

Zum Beispiel kannst du das Logo, die Header-Farbe und sogar die Icon-Farben für eine bestimmte Kategorie mit CSS-Code wie diesem ändern:

```scss
.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

```

Wenn du einfach ein neues Theme erstellst, kannst du Code hinzufügen und die Logos als Assets hochladen. `<category-slug>` ist der kleingeschriebene Kategorienamen, der im URL-Feld des Browsers angezeigt wird (Trenne Haupt- und Unterkategorien mit “-” Bindestrichen, wie in `parentcategory-subcategory`.

Es gibt auch verschiedene #customization:theme-components wie dieses, die du durchsuchen kannst:

> [@Bunte Kategorien](https://meta.discourse.org/t/colorful-categories/207267/1):
>
> discourse2Zusammenfassung Colorful Categories verwendet die Farben jeder Kategorie an mehr Stellen, wenn Sie sich auf einer Kategorie-Topic-Liste befinden oder innerhalb eines Topics.eyeglassesVorschau [Vorschau im Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/colorful-categories)hammer_and_wrenchLink zum Repository [https://github.com/discourse/discourse-colorful-categories](https://github.com/discourse/discourse-colorful-categories)open_bookNeu bei Discourse Themes? [Anfängerleitfaden zur Verwendung von Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Dieses Theme-Komponente installieren Fun…

---

<div class="post-metadata">

### Author: ![Rhababo](https://avatars.discourse-cdn.com/v4/letter/r/5fc32e/32.png) [@Rhababo](https://meta.discourse.org/u/Rhababo)
#### Post date: [7. September 2023 um 23:04 UTC](https://meta.discourse.org/t/unique-color-scheme-for-a-category/278084/3 "2023-09-07T23:04:10Z")

</div>

Vielen Dank, Lilly, für deine Hilfe und deine Ressourcen!

Ich schätze die CSS-Anweisungen für das Logo sehr. Viel eleganter als mein klobiges Skript.

Deine Lösung wird für meinen Anwendungsfall absolut funktionieren. Obwohl die Auswahl jedes Elements und die direkte Codierung der Farbe dafür mühsam erschien. Ich frage mich, ob es eine Möglichkeit gibt, den Mechanismus zu nutzen, den Discourse verwendet, um seine Farbpalette aus den nur etwa 12 Basisfarben in colors.scss zu generieren. Ich denke, dies könnte ein Plugin anstelle einer Theme-Komponente erfordern, und das ist eine Herausforderung für einen anderen Tag.

Danke!