Modalità scura automatica anche per i commenti incorporati?

Contribuisci Funzionalità
19

Posso confermare che il metodo sopra funziona ancora, ma sarebbe stato bello non dover digitare il codice da uno screenshot :slight_smile: Quindi, eccolo qui, leggermente aggiornato:

Passaggi

  1. L’iframe dei commenti finisce di renderizzarsi e invia un messaggio alla finestra principale del browser, informandola.
  2. Il browser interroga la sua impostazione di modalità scura/chiara e invia il valore indietro nell’iframe.
  3. L’iframe riceve il messaggio e imposta un attributo data, una classe o simile, in base all’impostazione della modalità scura/chiara.

Codice

  1. Una volta caricato l’iframe, invia una notifica alla finestra padre. Questo deve essere inserito su Discourse, sotto Admin -> Personalizza -> (seleziona tema) -> Modifica CSS/HTML -> Intestazione incorporata.
    <script type="text/javascript">
        window.addEventListener("load", (event) => {
            window.parent.postMessage("iframe loaded", "*");
        }, false);
    </script>
  1. Gestisci questo trigger in arrivo nella finestra principale. Questo codice si trova sul tuo sito blog:
    <script type="text/javascript">
      const discourse_url = "https://your.discourse-instance.org";

      // Qui, determiniamo il tema e inviamo un messaggio all'iframe per informarlo del tema
      // Vedi sotto come impostiamo notifyFrameStyle
      const notifyIFrameOfTheme = () => {
        const iframe = document.getElementById("discourse-embed-frame");
        if (iframe && iframe.contentWindow) {
          iframe.contentWindow.postMessage(
            {
              // Modifica la riga sottostante per recuperare l'impostazione della modalità scura, a seconda di come la memorizzi
              theme: document.documentElement.getAttribute("data-theme")
            },
            discourse_url
          );
        }
      };

      // Chiama setFrameStyle quando riceviamo il messaggio "iframe loaded"
      const handleMessageListener = (event) => {
        var origin = event.origin;
        if ((origin === discourse_url) && (event.data == "iframe loaded")) {
          notifyIFrameOfTheme();
        }
      };
    </script>
  1. Nel blocco <script> da (1), aggiungi un listener per il messaggio del tema inviato da notifyFrameStyle:
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // Fai qualcosa con l'impostazione del tema; ho impostato l'attributo `data-theme` sull' `<html>` dell'iframe,
          // ma potresti voler impostare un attributo di classe o simile
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

Stile

Sotto Admin -> Personalizza -> (seleziona tema) -> Modifica CSS/HTML -> CSS incorporato, puoi ora fornire CSS per ogni modalità. Ad esempio, puoi sovrascrivere le variabili di stile di Discourse:

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

Spero che questo aiuti!

6 Mi Piace