# Automatischer Dunkelmodus auch für eingebettete Kommentare?

**URL:** <https://meta.discourse.org/t/automatic-dark-mode-for-embedded-comments-as-well/184347>\
**Category:** Feature\
**Tags:** embedding\
**Created:** [13. September 2020 um 05:28 UTC](https://meta.discourse.org/t/automatic-dark-mode-for-embedded-comments-as-well/184347 "2020-09-13T05:28:01Z")\
**Posts on this page:** 1\
**Showing post:** 19

<div class="post-metadata">

**Author:** ![Stéfan\_van\_der\_Walt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/st%C3%A9fan_van_der_walt/32/236024_2.png) [@Stéfan\_van\_der\_Walt](https://meta.discourse.org/u/St%C3%A9fan_van_der_Walt)\
**Post date:** [1. Februar 2024 um 00:07 UTC](https://meta.discourse.org/t/automatic-dark-mode-for-embedded-comments-as-well/184347/19 "2024-02-01T00:07:06Z")

</div>

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 🙂 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.

```js
<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** :

```js
<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:

```javascript
    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:

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

```

Ich hoffe, das hilft!

---

_[View the full topic](https://meta.discourse.org/t/automatic-dark-mode-for-embedded-comments-as-well/184347)._