Mode sombre automatique également pour les commentaires intégrés ?

Contribuer Fonctionnalité
19

Je peux confirmer que la méthode ci-dessus fonctionne toujours, mais il aurait été agréable de ne pas avoir à taper le code à partir d’une capture d’écran :slight_smile: Donc, le voici, légèrement mis à jour :

Étapes

  1. L’iframe des commentaires finit de se rendre et envoie un message à la fenêtre principale du navigateur, l’en informant.
  2. Le navigateur interroge son réglage de mode sombre/clair et renvoie la valeur dans l’iframe.
  3. L’iframe reçoit le message et définit un attribut de données, une classe ou similaire, en fonction du réglage du mode sombre/clair.

Code

  1. Une fois l’iframe chargé, envoyez une notification à la fenêtre parente. Cela doit être saisi sur Discourse, sous Admin -> Personnaliser -> (sélectionner le thème) -> Modifier CSS/HTML -> En-tête intégré.
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
  1. Gérez ce déclencheur entrant dans la fenêtre principale. Ce code se trouve sur votre site de blog :
  const discourse_url = "https://your.discourse-instance.org";

  // Ici, nous déterminons le thème et envoyons un message à l'iframe pour lui faire savoir quel est le thème
  // Voir ci-dessous comment nous configurons notifyFrameStyle
  const notifyIFrameOfTheme = () => {
    const iframe = document.getElementById("discourse-embed-frame");
    if (iframe && iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        {
          // Modifiez la ligne ci-dessous pour récupérer le réglage du mode sombre, en fonction de la façon dont vous le stockez
          theme: document.documentElement.getAttribute("data-theme")
        },
        discourse_url
      );
    }
  };

  // Appelez setFrameStyle lorsque nous recevons le message "iframe loaded"
  const handleMessageListener = (event) => {
    var origin = event.origin;
    if ((origin === discourse_url) && (event.data == "iframe loaded")) {
      notifyIFrameOfTheme();
    }
  };
  1. Dans le bloc <script> de (1), ajoutez un écouteur pour le message de thème envoyé par notifyFrameStyle :
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // Faites quelque chose avec le réglage du thème ; j'ai défini l'attribut `data-theme` sur le `<html>` de l'iframe,
          // mais vous voudrez peut-être définir un attribut de classe ou similaire
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

Style

Sous Admin -> Personnaliser -> (sélectionner le thème) -> Modifier CSS/HTML -> CSS intégré, vous pouvez maintenant fournir du CSS pour chaque mode. Par exemple, vous pouvez remplacer les variables de style de Discourse :

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

J’espère que cela vous aidera !

6 « J'aime »