Wie überschreibe ich eine Farbvariable nur für ein Theme?

[Queth (Q)]

(Entschuldigung, ich konnte nicht herausfinden, wo dies am besten passt, habe mich für „dev“ entschieden)

Ich habe drei Themes. In einem Theme ergibt die Berechnung von $primary_low eine Farbe, die zu wenig Kontrast zur Hintergrundfarbe hat. Ich habe versucht, die Primärfarbe anzupassen (die Hintergrundfarbe kann nicht geändert werden, da es sich um eine Markenfarbe handelt), aber ohne Erfolg. Entweder ergibt sich fast kein Kontrast, oder es entsteht ein sehr „hervorgehobener“ Effekt, was genau das Gegenteil von dem ist, was ich erreichen möchte.

Die Lösung (wie ich dachte) wäre, einfach einen Farbwert für $primary_low in dem spezifischen Theme-CSS zuzuweisen. Aber das setzt sich nicht durch. Selbst das Hinzufügen von !important hilft nicht. Gibt es eine Möglichkeit, dies nur für ein Theme zu ändern? Hinweis: Dies sind lokale Themes.

[david (David Taylor)]

Schaut euch hier @awesomerobots Anleitung an:

Override values for auto-generated color variables

As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color_schemes": { “My_colors”: { "primary": "000000…

[Queth (Q)]

Ahh, danke! Leider handelt es sich um ein lokales Theme, das nicht remote genutzt werden kann.
Gibt es eine andere Möglichkeit, dies zu realisieren?

[david (David Taylor)]

Dies gilt als eine erweiterte Funktion und ist daher nicht in der Benutzeroberfläche verfügbar. Du kannst die theme cli für „lokale Themes

[Queth (Q)]

Schön, dass es auf irgendeine Weise möglich ist Das ganze Ruby-Thema ist für mich jedoch noch viel zu fortgeschritten. Ich hoffe wirklich, dass die Überschreibung irgendwann in Zukunft auch für lokale Themes verfügbar sein wird.

Ich werde überlegen, was ich mit meinem Wissensstand bewerkstelligen kann… Ich bin ein totaler GitHub-Anfänger, daher wirkt ein Remote-Theme auf mich sehr einschüchternd. (Ja, ich habe die Anleitung gelesen).

[smrtey]

Remote Themes sind wirklich einfach. Ich hatte GitHub vorher noch nie benutzt und wusste nicht, was about.json bedeutet, aber ich habe es bereits für einige Themes ohne Probleme verwendet. Man erstellt einfach ein lokales Theme, lädt es dann auf GitHub hoch und kann anschließend im about.json-Datei auf GitHub Dinge hinzufügen. Wenn du das Theme später von GitHub wieder auf deiner Seite installierst, hast du eine Reihe cooler, anpassbarer Optionen für dein Theme.

Ich sollte heute später Zeit haben, einen Beitrag zu verfassen, der dich Schritt für Schritt durch den Prozess führt. Dann wird alles ziemlich schnell Sinn ergeben.

ETA: lol, ich dachte eigentlich an settings.yml, was auch eine großartige Sache bei Remote Themes ist. Aber wenn man sich Davids Link oben ansieht, ist about.json sogar noch einfacher.

[smrtey]

Hier sind die viel zu detaillierten Anweisungen. Lassen Sie mich wissen, falls es nicht wie beschrieben funktioniert.

1. Erstellen Sie ein GitHub-Konto, falls Sie noch keines haben.

2. Exportieren Sie in Discourse Ihr Theme:
   Admin → Anpassen → Wählen Sie das zu exportierende Theme aus
   

   
   
   Dadurch wird das Theme als .zip-Datei auf Ihrem Computer gespeichert.

3. Entpacken Sie die Dateien auf Ihrem Computer.

4. Gehen Sie zu GitHub und erstellen Sie ein neues Repository:
   

   
   
   
   

5. Klicken Sie auf „Vorhandene Datei hochladen“
   

   

6. Ziehen Sie die entpackten Ordner und Dateien aus dem exportierten Theme (etwa wie folgt):
   

   
   
   von Ihrem Computer in Ihr Repository und klicken Sie auf „Änderungen committen“.

7. Jetzt können Sie die Datei about.json bearbeiten. Klicken Sie auf den Dateinamen.
   
   

Die Datei sieht etwa so aus:

{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

8. Klicken Sie auf das Stiftsymbol zum Bearbeiten.

Jetzt können Sie sie bearbeiten. Ich empfehle, den Namen des Farbschemas zu ändern; andernfalls haben Sie nach dem erneuten Importieren des Themes in Ihre Website zwei verschiedene Farbschemata mit demselben Namen. Im Folgenden habe ich also "blue-light": { in "blue-lite": { geändert.

Fügen Sie einfach Ihre Farbvariablen-Überschreibungen am Ende des Farbschemas nach love hinzu und stellen Sie sicher, dass nach dem love-Wert ein Komma steht.

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

9. Klicken Sie auf „Änderungen committen“.

10. Klicken Sie auf den Repository-Namen, um zur Hauptseite des Repositorys zurückzukehren.
    

    

11. Kopieren Sie den Link zum Klonen oder Herunterladen.
    

    

12. Importieren Sie in Discourse Ihr Theme:
    Admin → Anpassen → Installieren → Aus einem Git-Repository: Fügen Sie den Link ein und installieren Sie das Theme.
    

    

13. Sie können dieses Theme jetzt genau wie jedes lokale Theme bearbeiten, und zwar mit Ihren benutzerdefinierten Werten für $primary-high, $primary-medium, $primary-low-mid und $primary-low.

[Queth (Q)]

Vielen Dank @smrtey für die Erstellung dieser Schritt-für-Schritt-Anleitung! Heute hatte ich endlich Zeit, mich hinzusetzen und sie zu befolgen. Es hat wunderbar funktioniert!

Das waren auch meine ersten Schritte auf GitHub; ich hatte noch nie einen Account oder ein Repository erstellt. Also nochmals vielen Dank.

Vielleicht könnte das in den Leitfaden zur Erstellung von Themes aufgenommen oder darauf verwiesen werden?

[smrtey]

Benutzerdefinierte Einstellungen sind auch eine großartige Entdeckung. Sie müssen eine settings.yml-Datei zu Ihrem Theme oder der GitHub-Repository-Komponente hinzufügen. Hier ist eine Beispielkomponente mit anpassbaren Einstellungen:

GitHub - oerog/CustomSettings

Dies ist die settings.yml-Datei, die die Variablen $header_text, $header_text_color und $header_bg festlegt:

header_text: 
  type: bool
  default: false
  description:
    en: 'Wählen Sie diese Option, um Text neben dem Logo im Header hinzuzufügen.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'Textfarbe (Standard ist „header primary“)' 
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'Textfarbe (Standard ist „header background“)' 

Dies bietet Ihnen beim Installieren der Komponente folgende Einstellungsmöglichkeiten:

Dies setzt das folgende CSS:

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Hier ist ein Text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

Sie können dieselbe Komponente mehrmals installieren (benennen Sie sie einfach nach der Installation um, um den Überblick zu behalten), sodass Sie die Komponente in verschiedenen Themes mit unterschiedlichen Einstellungen für jedes Theme hinzufügen können.

So erstellen Sie die settings.yml-Datei: Erstellen Sie eine neue Datei:

Geben Sie den Code ein (ich schreibe ihn in eine Textdatei und kopiere ihn dann):

Speichern Sie die Datei mit „Commit new file“:

Installieren Sie dann die Komponente auf Ihrer Website und bearbeiten Sie die Einstellungen.