Avec la possibilité de basculer automatiquement entre les schémas de couleurs, je me demande s’il existe également un moyen de passer de l’un à l’autre entre les modes clair et sombre de Discourse lorsqu’il est intégré sous forme de commentaires dans un blog. Plus précisément, mon blog Ghost dispose d’un interrupteur que les utilisateurs peuvent cliquer pour basculer manuellement entre les modes clair et sombre. Je sais que le CSS de mon blog ne peut pas affecter le CSS à l’intérieur de l’iframe de Discourse, mais avec cette nouvelle fonctionnalité, y aurait-il une autre façon pour que l’interrupteur puisse également changer le schéma de couleurs de Discourse ? Vous pouvez voir un exemple de publication avec des commentaires en bas de cette publication.
C’est potentiellement réalisable, mais un peu délicat. Pour l’instant, nous n’avons pas ajouté le basculement automatique du mode sombre au point de terminaison des commentaires intégrés. Nous pouvons l’ajouter, et cela fonctionnerait si votre site Ghost passait automatiquement au mode sombre lorsque le navigateur bascule en mode sombre. Mais à en juger par ce que je vois, votre site Ghost utilise un bouton pour le mode sombre, ce qui ne fonctionnera pas avec l’implémentation de Discourse.
Dans votre cas spécifique, vous pouvez basculer une classe dans l’iframe des commentaires intégrés de Discourse lors du clic sur le bouton, puis utiliser cette classe pour basculer les couleurs dans votre feuille de style intégrée.
Cela semble bon. Alors que je prépare actuellement plusieurs thèmes (Ghost) utilisant le mode sombre pour mes collègues, qui partageront tous une seule instance Discourse, cela reste encore un peu plus loin sur la route.
Je ne comprends malheureusement pas tout à fait ce que vous suggérez ici. Actuellement, tous les éléments que je souhaite styliser en mode sombre dans mon blog voient leur CSS doublé en les précédant de body.dark. Comme ceci :
p {
color: #000;
}
body.dark p {
color: #FFF;
}
Suggérez-vous d’utiliser ce code body.dark pour modifier les éléments dans l’iframe Discourse ? Parce que j’ai essayé d’insérer ce qui suit dans le champ CSS intégré de Discourse, ce qui malheureusement n’a eu aucun effet :
.FF2F-discourse p {
color: #000;
}
body.dark .FF2F-discourse p {
color: #FFF;
}
Dans ce cas, suggérez-vous plutôt que j’écrive un JS séparé afin que le basculement affecte un changement distinct via le ciblage spécifique d’une classe dans l’iframe ? Car comme je l’ai indiqué dans mon commentaire précédent, je ne pensais pas qu’un code externe puisse affecter le CSS à l’intérieur d’une iframe, d’où ma confusion. Mais je suis uniquement un amateur en HTML/CSS, il est donc indéniable que vous en savez plus que moi et/ou que je malcomprends autre chose.
Oui, c’est bien ce que je suggère. Les feuilles de style de votre blog ne peuvent pas s’appliquer à l’iframe, mais vous pouvez utiliser du JS pour basculer la classe dark dans l’élément html ou body de l’iframe, puis mettre à jour votre feuille de style intégrée de Discourse en conséquence.
J’ai trouvé deux pages expliquant comment basculer entre les modes clair et sombre pour l’intégration de Discourse, mais le développeur JS qui travaille sur mon projet se demande si la méthode que vous suggérez implique l’utilisation de postMessage (comme l’indiquent les pages que j’ai trouvées) ou autre chose.
Voici une page expliquant comment mettre en œuvre la communication inter-fenêtres avec postMessage :
Quant à celle-ci, il s’agit en fait d’un tutoriel sur la façon de modifier le CSS dans une iframe via postMessage, spécifiquement pour basculer entre les modes clair et sombre :
Désolé de déterrer un sujet aussi ancien, mais y a-t-il des projets pour implémenter la commutation automatique du mode sombre pour le point de terminaison des commentaires intégrés ?
Nous n’avons actuellement pas l’intention d’ajouter cette fonctionnalité. Les sites peuvent ajouter des styles de mode sombre à leur feuille de style intégrée comme solution de contournement (ou utiliser la technique postMessage décrite ci-dessus).
Le bloc de code ① ajoute un écouteur d’événements dans l’iframe Discourse intégrée qui enverra un message à mon site Web contenant l’iframe Discourse intégrée une fois que Discourse intégrée sera chargée.
Lorsque mon site Web reçoit un message de Discourse intégrée, il effectuera une validation, comme montré dans le bloc de code ②, et si elle réussit, appellera la fonction setIframeStyle pour définir Discourse intégrée.
La fonction setIframeStyle, juste montrée dans le bloc de code ③, transmet le mode couleur, « dark » ou « light », à l’iframe en appelant postMessage. De plus, une fois le mode sombre activé, la fonction peut être appelée pour maintenir Discourse intégrée dans le même mode couleur que mon site Web.
Le bloc de code ④ permet à Discourse intégrée de pouvoir traiter le message de mode couleur envoyé depuis mon site Web. Ici, je bascule le mode couleur en changeant le nom de classe du tag body.
De plus, les blocs de code ① et ④ sont ajoutés par la page d’administration de Discourse, comme ci-dessous :
Merci pour le plan ci-dessus @mikeguo, c’est merveilleusement expliqué !
Notez également que vous devez utiliser la dernière version de Discourse pour y parvenir, la fonctionnalité d’en-tête intégré n’ayant été ajoutée qu’il y a quelques jours.
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 Donc, le voici, légèrement mis à jour :
Étapes
L’iframe des commentaires finit de se rendre et envoie un message à la fenêtre principale du navigateur, l’en informant.
Le navigateur interroge son réglage de mode sombre/clair et renvoie la valeur dans l’iframe.
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
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é.
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();
}
};
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 :
Merci d’avoir signalé cela ! Je ne peux plus modifier le message ci-dessus, mais window.addEventListener doit être placé en bas de l’extrait de code sous (2).
Donc, le voici, légèrement mis à jour :