Datenauswahl für Themes

Entwickler
1

Hallo,

ich möchte einen Daten-Selektor für Themes vorschlagen, um das Bearbeiten vollständiger Themes aus einer Komponente heraus zu erleichtern.

Ich bin mir nicht sicher, wie einzigartig mein Fall ist, aber ich habe ein Beispiel, bei dem ich zwei Instanzen von Graceful installiert habe, sodass ich eine dunkle und eine helle Farbpalette verwenden kann. Ich verwende eine Theme-Komponente, um Änderungen an diesen Remote-Themes vorzunehmen, um universelle Anpassungen vorzunehmen, wie z. B. die Änderung des Like-Buttons. Das funktioniert hervorragend für universelle Änderungen, die durch Stile gesteuert werden, aber das Problem entsteht, wenn ich eine Änderung nur für die dunkle Version vornehmen möchte, die nicht im hellen Theme erscheinen soll. Ich sehe keine Möglichkeit, mit CSS Änderungen basierend auf der Theme-ID vorzunehmen. Um das zu erreichen, was ich aktuell möchte, müsste ich für jede Theme-Komponente individuelle Theme-Komponenten für die kleinen Änderungen erstellen, die ich wünsche.

Vielleicht etwas wie [data-theme-id].

Wenn dies bereits möglich ist, können Sie mich gerne ignorieren. Ich denke nur, dass dies vielen Seiten helfen würde, die Änderungen an mehreren Themes vornehmen möchten, ohne die Liste der Komponenten aufzublähen.

2

Ich bin mir nicht sicher, ob ich es verstehe, aber du kannst CSS direkt in diese hellen und dunklen Themes einfügen.

Meiner Meinung nach sind Komponenten wirklich großartig für universelle Änderungen wie Margin, Display, Padding und Breite, aber bei Farben ist es – es sei denn, du verwendest Variablen – besser, die Themes direkt zu bearbeiten.

Sieht nach einer unnötigen Komplikation einer bereits verfügbaren Lösung aus :thinking:

3

Aber beim Bearbeiten von Remote-Themes gehen deine Änderungen beim nächsten Update doch verloren, oder?

Es geht hier nicht nur um Farben, sondern darum, spezifische Änderungen an bestimmten Themes von einer einzigen Komponente aus vorzunehmen, ohne weitere Komponenten erstellen zu müssen, die dann nur auf einige Themes angewendet werden.

4

Du hast recht. Für ein Remote-Theme könntest du drei Komponenten verwenden:

universal theme fix für gemeinsame Änderungen
und dark theme fix / light theme fix für spezifische Änderungen (wie Farben). Du kannst eine Komponente nur mit einem Theme verknüpfen.

Light graceful wird universal und light fix enthalten.
Dark graceful wird universal und dark fix enthalten.

Als letztes Mittel kannst du !important an eine Zeile dieser light/dark fixes anfügen, wenn eine Änderung nicht funktioniert.

5

Ich nehme an, du hast recht. Ich hatte bereits an eine universelle Komponente und dann eine Komponente pro Theme gedacht, also insgesamt drei in diesem Beispiel. Doch es erschien mir als übertrieben, drei Repositories zu haben, wenn man das vielleicht leicht mit einem Daten-Selektor hätte lösen können, da fast alles andere in Discourse einen solchen hat.

Als Hinweis: Die Theme-ID befindet sich im Meta-Attribut „name“ als „content“-ID, wobei das Schlüsselwort „discourse_themes_id“ lautet. In dem Link zum Wechseln des Themes wird sie als [data-id=“#”] angegeben – zumindest, wenn ich den von dieser Komponente erstellten Hamburger-Theme-Selektor-Link hier auf Meta oder auf einer meiner Testseiten inspiziere. Es ist also nicht so, als stünde die Information nicht zur Verfügung.

6

Wenn Sie dies zum Header-Tab Ihrer Theme-Komponente hinzufügen

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

wird dem <body>-Tag ein data-theme-id-Attribut hinzugefügt, das Sie wie folgt verwenden können:

[data-theme-id="1"] {
  // CSS für das helle Theme
}

[data-theme-id="2"] {
  // CSS für das dunkle Theme
}
7

In diesem sehr spezifischen Fall könntest du unsere SCSS-Hilfsfunktionen verwenden. Hier ein Beispiel aus dem Kernbereich, das jedoch auch in einem Theme funktionieren sollte:

Du kannst auch @is-dark-color-scheme verwenden.

Auf diese Weise ist deine Komponente nicht von Theme-IDs abhängig, die sich ändern würden, wenn du das Theme auf einer anderen Site installieren würdest.

8

Ihr beide seid die Besten, vielen Dank :slight_smile: