Wie fügt man eine bestimmte Body-Klasse für den dunklen (oder hellen) Modus hinzu?

Es scheint derzeit keine spezifische Klasse zu geben.

Ich habe dieses gefunden, aber es funktioniert nicht, da die ID des Themas für den dunklen und hellen Modus dieselbe ist (was das Farbschema definiert, nehme ich an).

Ich vermute, ein kurzes Skript könnte helfen? Und vielleicht dies in den Kern von Discourse aufnehmen?

Könnten Sie bitte erklären, warum Sie bestimmte Klassen zum Body für den dark- oder light-Modus benötigen?

Ermöglicht diese Kernfunktion nicht, was Sie benötigen?

Die Mitarbeiter des Forums, das ich migriere, mögen keine bestimmte generierte Farbvariable (--tertiary-very-low), die diese spezifische bräunliche Farbe erzeugt:

Sie möchten sie ändern, und es scheint, dass ich sie nicht wirklich ändern kann, da sie generiert wird UND es keine elternspezifische Klasse für den Dunkelmodus gibt.

Ich bin jedoch auf diese Informationen gestoßen:

Ich weiß nicht, ob sie gültig ist, ich konnte sie noch nicht ausprobieren, im Moment gibt es zu viele Dinge zu tun :sweat_smile:. Aber wenn sie funktioniert, wird das ausreichen. Es wäre sogar noch besser.

2 „Gefällt mir“

Wir (Entschuldigung, ich sage wir, da ich mit @Canapin an den Anpassungen unseres Forums arbeite) haben ein dunkles Thema erstellt, das die Voreinstellung „Café crème“ in der französischen Version von Discourse („Kaffee“, nehme ich an) verwendet, und wir haben gerade die Farbe des :heart: von Braun auf Rot geändert.
Das Seltsame an diesem Thema ist, dass die Hyperlinks fast die gleiche Farbe wie der Text haben.
Wenn sie also ein eingebetteter Link sind, kann man sie kaum sehen:


(ja, die letzten beiden Wörter „cliquez-ici“ sind ein Link zu einer Webseite…)

Unsere Idee war also, sie ein wenig braun zu machen, damit sie hervorstechen. Aber wenn wir die quaternary-Einstellung in der Farbpalette anpassen, ändert sich eine ganze Reihe von Farben: Der Hintergrund der „Blase“ hinter der DM ändert sich zu etwas, das mehr nach Vogelkot als nach dem Braun in @Canapin 's erster Nachricht aussieht. Die obere Nachrichtenbox ändert sich ebenfalls (die Box „die ausgehende E-Mail wurde deaktiviert“) zu dieser gleichen Vogelkot-Farbe.

Die Idee war also zunächst, die css zu verwenden, um die Hyperlinks einzufärben, aber wir haben noch nicht herausgefunden, wie.

1 „Gefällt mir“

Die Verwendung von .cooked a als CSS-Ziel sollte Ihnen helfen, eine benutzerdefinierte Farbe für diese Links festzulegen.

Während unser Kernsystem jetzt die Verwendung von dunklen/hellen Farbschema-Optionen für die entsprechenden Modi ermöglicht, sollten Sie auch die CSS-Media-Abfrage für dunkle/helle Modi wie folgt verwenden können:

1 „Gefällt mir“
@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

Die Arbeit ist erledigt. Danke!

Ups.
Nein, es hat nicht funktioniert.

Bitte korrigieren Sie mich, wenn ich falsch liege. Basiert prefers-color-scheme auf der Präferenz des Geräts und nicht auf dem tatsächlich ausgewählten Discourse-Theme?

Auf meinem Windows-Gerät habe ich ein dunkles Theme eingestellt. Websites, die die Präferenz meines Geräts nutzen, zeigen also, wenn möglich, ein dunkles Theme an.

Aber in meinem Forum habe ich mich bewusst dafür entschieden, ein helles Theme zu verwenden, kein dunkles.

Die Media Query prefers-color-scheme wird trotzdem geladen, obwohl ich ein helles Theme verwende:

Helles Theme, kein dunkler Modus,

Dennoch wird die Regel für das dunkle Theme trotzdem angewendet:

Vollbild:

1 „Gefällt mir“

Entschuldigung, ich habe Sie missverstanden und dachte, Sie meinen die Systemeinstellung des dunklen Modus, der den dunklen Modus im Forum auslöst.

Verwenden Sie also persönlich das helle Farbschema, aber Ihre Benutzer verwenden das dunkle Farbschema?
Der vorherige Screenshot zeigte das dunkle Farbschema in Aktion, aber Ihre letzte Antwort besagt, dass Sie das helle Farbschema verwenden.

Hallo, tut mir leid, ja, es ist nicht klar, besonders da ich über zwei Dinge derselben Art, aber mit unterschiedlichen Farbschemata gesprochen habe. Außerdem war es für mich etwas verwirrend.

Meine Frage wäre also: Wie erkenne ich in Discourse, welches Farbschema verwendet wird, unabhängig von den Dark/Light-Modus-Einstellungen des Geräts?

Wenn ich die Dinge richtig verstehe:
Wenn mein Gerät (Windows 10) auf den Dunkelmodus eingestellt ist, ich aber in Discourse ein helles Farbschema auswähle, gibt die Media Query (prefers-color-scheme: dark) in der CSS meines Forums trotzdem irgendwie „wahr“ zurück und meine verschachtelten Regeln werden angewendet, obwohl ich ein helles Farbschema in meinem Forum gewählt habe (auch wenn Windows auf den Dunkelmodus eingestellt ist).

Also: Woher weiß ich im HTML-Code von Discourse, ob ich gerade ein helles oder ein dunkles Farbschema verwende? Ich habe keine übergeordnete Klasse wie „light-color-scheme“ oder „dark-color-scheme“ gefunden. Daher kann ich keine spezifischen Farbschemata in CSS unterscheiden/anvisieren und Regeln nur für das eine oder andere erstellen.

1 „Gefällt mir“

Vielen Dank für die Klarstellung, jetzt verstehe ich es.

Wir fügen keine Klasse zum Body hinzu, basierend auf dem aktuell vom Benutzer ausgewählten Farbschema.

Wenn ich weiter nachfragen darf: Ist der Grund, dass Ihnen die Farbe, die unsere Farb-Funktionen für --tertiary in Ihrem aktuell ausgewählten dunklen Schema generieren, nicht gefällt?

Was möchten Sie mit einer Body-Klasse erreichen, die Sie Ihrer Meinung nach derzeit nicht erreichen können?

Yup, genau :slight_smile:

Wenn ich diese Frage jetzt lese… bin ich mir nicht sicher, da die einzige Möglichkeit, eine generierte Farbe zu ersetzen, soweit ich weiß, darin besteht,

:root {
  --primary-medium: #666666;
}

Aber da es sich um einen Root-Selektor handelt, konnte eine Klasse im html- oder body-Element kein Farbschema vor :root ansprechen.
Also… ich weiß nicht.

Aber kurz gesagt, die Idee wäre, eine bestimmte generierte Farbe für ein bestimmtes Farbschema zu ändern. :person_shrugging:

Kein großes Problem, wenn es nicht möglich ist. Wir haben einige Experimente mit unseren Schemafarben durchgeführt und sind derzeit mit den generierten Farben zufrieden genug. :slight_smile: Könnte besser sein, aber das ist weit davon entfernt, ein großes Problem zu sein. :slight_smile:

1 „Gefällt mir“

Wenn Sie möchten, gibt es eine Art versteckten Workaround.

Sie können einen Ordner erstellen und nur eine about.json-Datei darin hinzufügen.

Ich habe dies tatsächlich getan, um ein solarized light-Farbschema zu erstellen, da ich meine eigenen Varianten festlegen wollte, anstatt mich auf die integrierten Farbfunktionen zu verlassen.

Hier ist die tatsächliche about.json-Datei, die ich erstellt habe.

Sie würden dann dieses “Theme” installieren, das wiederum dieses Farbschema auf Ihrem Forum installiert. Zu diesem Zeitpunkt könnten Sie es auch für andere Themes verfügbar machen.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
2 „Gefällt mir“

Ich erinnere mich, das vor langer Zeit gesehen zu haben, als ich tiefer an meinen Discourse-Installationen gearbeitet habe!

Definitiv eine gute Problemumgehung. Danke. Ich werde das als die richtige Lösung betrachten, auch wenn es als etwas hackelig angesehen werden mag.

1 „Gefällt mir“

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.