Automatischer Dunkelmodus auch für eingebettete Kommentare?

Beitragen Merkmal
19

Ich kann bestätigen, dass die obige Methode immer noch funktioniert, aber es wäre schön gewesen, wenn ich den Code nicht von einem Screenshot hätte abtippen müssen :slight_smile: Hier ist er also, leicht aktualisiert:

Schritte

  1. Der Kommentare-Iframe ist gerendert und sendet eine Nachricht an das Haupt-Browserfenster, dass er fertig ist.
  2. Der Browser fragt seine Dunkel-/Hellmodus-Einstellung ab und sendet den Wert zurück in den Iframe.
  3. Der Iframe empfängt die Nachricht und setzt ein data-Attribut, eine Klasse oder Ähnliches basierend auf der Dunkel-/Hellmodus-Einstellung.

Code

  1. Sobald der Iframe geladen ist, senden Sie eine Benachrichtigung an das übergeordnete Fenster. Dies muss in Discourse unter Admin -> Anpassen -> (Thema auswählen) -> CSS/HTML bearbeiten -> Eingebetteter Header eingegeben werden.
<script type="text/javascript">
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
</script>
  1. Behandeln Sie diesen eingehenden Trigger im Hauptfenster. Dieser Code befindet sich auf Ihrer Blog-Website:
<script type="text/javascript">
  const discourse_url = "https://your.discourse-instance.org";

  // Hier bestimmen wir das Thema und senden eine Nachricht an den Iframe, um ihn darüber zu informieren
  // Siehe unten, wie wir notifyFrameStyle einrichten
  const notifyIFrameOfTheme = () => {
    const iframe = document.getElementById("discourse-embed-frame");
    if (iframe && iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        {
          // Ändern Sie die folgende Zeile, um die Dunkelmodus-Einstellung abzurufen, je nachdem, wie Sie sie speichern
          theme: document.documentElement.getAttribute("data-theme")
        },
        discourse_url
      );
    }
  };

  // Rufen Sie setFrameStyle auf, wenn wir die Nachricht "iframe loaded" erhalten
  const handleMessageListener = (event) => {
    var origin = event.origin;
    if ((origin === discourse_url) && (event.data == "iframe loaded")) {
      notifyIFrameOfTheme();
    }
  };
</script>
  1. Fügen Sie im script-Block aus (1) einen Listener für die vom notifyFrameStyle gesendete Thema-Nachricht hinzu:
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // Tun Sie etwas mit der Thema-Einstellung; ich setze das `data-theme`-Attribut auf dem `html`-Element des Iframes,
          // aber Sie möchten vielleicht ein class-Attribut oder Ähnliches setzen
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

Styling

Unter Admin -> Anpassen -> (Thema auswählen) -> CSS/HTML bearbeiten -> Eingebettetes CSS können Sie nun CSS für jeden Modus bereitstellen. Sie können z. B. die Discourse-Styling-Variablen überschreiben:

html[data-theme="dark"] {
  --primary: #ced6dd;
  --primary-low: #48566b;
  --secondary: #14181e;
  --tertiary: #2b7e8d;
}

Ich hoffe, das hilft!

6 „Gefällt mir“