Farbdefinitionen für mehr als helle/dunkle Farbschemata

Unterstützung
1

Hallo, ich möchte wissen, wie man Farbdefinitionen für mehr als ein Farbschema festlegt, z. B. Hell, Dunkel, Gedimmt, ähnlich wie bei Twitter.

Mein aktuelles Problem:
Ich kann derzeit die Standard-Hell- und Dunkelfarben, die nicht aufgeführt sind, wie z. B. primary-low, in einer benutzerdefinierten Theme-Komponente stylen, weiß aber nicht, wie ich diesen benutzerdefinierten Farbmodus zu einem anderen Farbschema hinzufügen kann.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins};

}
2

Hallo :wave:

Discourse unterstützt zwei Farbschemata: Hell und Dunkel. Wenn du das Gerät in den Dunkelmodus schaltest, wird standardmäßig die default dark mode color scheme id-Site-Einstellung verwendet.

Du kannst Discourse auch mit benutzerdefinierten Farbpaletten versehen.

Neue Farbpaletten kannst du auf der Seite /admin/customize/colors festlegen.

oder

Wenn du beispielsweise ein benutzerdefiniertes Theme verwendest, kannst du diese Einstellungen in der Datei about.json vornehmen.
So machen wir es zum Beispiel im FKB Pro-Theme.

In diesem Fall werden diese Farbpaletten zu /admin/customize/colors hinzugefügt.

Wenn diese Farbpaletten hinzugefügt wurden, können Benutzer sie in den Einstellungen der Benutzervorlieben auswählen, sofern du diese Funktion aktivierst.

Screenshot 2024-01-06 at 9.43.56
Screenshot 2024-01-06 at 9.43.56512×134 4.66 KB

dark-light-choose()

Die Funktion dark-light-choose() kann nur mit den beiden Farbschemata Hell/Dunkel umgehen, nicht jedoch mit den Farbpaletten. Ich empfehle, sie nur zur Erstellung benutzerdefinierter Farbvariablen zu verwenden, nicht zum Überschreiben der Standardwerte. Um die Standard-Farbvariablen zu überschreiben, kannst du die oben gezeigte Methode anwenden.

Wenn ein Benutzer in den Einstellungen der Benutzervorlieben eine andere Farbpalette als das Standard-Hell/Dunkel des Forums auswählt, werden die mit dark-light-choose() erstellten Farbvariablen für alle Hell- oder Dunkel-Farbpaletten der Farbschemata verwendet.

Dies ist einer der Gründe, warum ich das folgende Customization > Theme component erstellt habe.

Mit diesem Theme-Component kannst du die color-scheme="id"s separat ansprechen.

Was du also tun kannst, ist :arrow_down_small:

Erstelle Farbpaletten (Hell, Dim, Dunkel)

Verwende das oben genannte Component, um Anpassungen an den Farben der Dim-color-scheme="id" oder anderen Einstellungen vorzunehmen, falls erforderlich.