Con la posibilidad de cambiar (automáticamente) el esquema de colores, me pregunto si también podría existir alguna forma de alternar entre los modos claro y oscuro de Discourse cuando se incrusta como comentarios en un blog. En concreto, mi blog de Ghost tiene un interruptor que los usuarios pueden hacer clic para cambiar manualmente entre los modos claro y oscuro. Sé que el CSS de mi blog no puede afectar al CSS dentro del iframe de Discourse, pero con esta nueva adición, ¿podría existir otra forma de que el interruptor también cambie el esquema de colores de Discourse? Puedes ver un ejemplo de publicación con comentarios al final de esta publicación.
Esto es potencialmente factible, pero un poco complicado. Por el momento, no hemos añadido el cambio automático a modo oscuro al punto final de comentarios incrustados. Podríamos añadirlo, y funcionaría si tu sitio de Ghost cambiara automáticamente a modo oscuro cuando el navegador lo hace. Pero, por lo que puedo ver, tu sitio de Ghost utiliza un botón para el modo oscuro, lo cual no funcionará con la implementación de Discourse.
Lo que puedes hacer en tu caso específico es alternar una clase en el iframe de comentarios incrustados de Discourse al hacer clic en el botón y, a continuación, usar esa clase para alternar los colores en tu hoja de estilos incrustada.
Suena bien. Actualmente estoy preparando varios temas (Ghost) que utilizan el modo oscuro para mis colegas, todos los cuales compartirán una única instancia de Discourse, pero eso todavía está un poco más adelante.
Por desgracia, no termino de entender qué estás sugiriendo aquí. Actualmente, cualquier elemento que quiera que utilice estilos de modo oscuro dentro de mi blog tiene su CSS duplicado precediendo dichos elementos con body.dark. Es decir:
p {
color: #000;
}
body.dark p {
color: #FFF;
}
¿Estás sugiriendo que use ese código body.dark para cambiar cosas en el iframe de Discourse? Porque intenté insertar lo siguiente en el campo CSS Incrustado de Discourse, lo cual, por desgracia, no tuvo ningún efecto:
.FF2F-discourse p {
color: #000;
}
body.dark .FF2F-discourse p {
color: #FFF;
}
Dado esto, ¿estás sugiriendo en su lugar que escriba algún JavaScript separado para que el botón alterne un cambio específico mediante la selección de una clase en el iframe? Porque, como mencioné en mi comentario anterior, no creía que el código externo pudiera afectar al CSS dentro de un iframe, de ahí mi confusión. Pero soy únicamente un aficionado a HTML/CSS, así que sin duda sabes más que yo y/o estoy malinterpretando algo más.
Sí, eso es lo que estoy sugiriendo. Las hojas de estilo de tu blog no pueden aplicarse al iframe, pero puedes usar JS para alternar la clase dark en el elemento html o body del iframe y, a continuación, actualizar tu hoja de estilo incrustada de Discourse en consecuencia.
He encontrado dos páginas que explican cómo se podría realizar el cambio entre los modos claro y oscuro para la incrustación de Discourse, pero la persona que escribe mi código JS se pregunta si el método que sugieres implica el uso de postMessage (como indican las páginas que encontré) o algo distinto.
Aquí hay una página que explica cómo implementar la comunicación entre ventanas con postMessage:
Mientras que esta otra es en realidad un tutorial sobre cómo cambiar el CSS dentro de un iframe mediante postMessage, específicamente para alternar entre los modos claro y oscuro:
Actualmente no tenemos planes de añadir esta función. Los sitios pueden añadir estilos de modo oscuro a su hoja de estilos incrustada como solución alternativa (o utilizar la técnica postMessage comentada anteriormente).
El bloque de código ① agrega un detector de eventos en el iframe de Discourse incrustado que enviará un mensaje a mi sitio web que contiene el iframe de Discourse incrustado una vez que Discourse incrustado se cargue.
Cuando mi sitio web reciba el mensaje de Discourse incrustado, realizará una validación, como se muestra en el bloque de código ②, y si pasa, llamará a la función setIframeStyle para configurar Discourse incrustado.
La función setIframeStyle, que se muestra en el bloque de código ③, pasa el modo de color, “oscuro” o “claro”, al iframe llamando a postMessage. Además, una vez que se cambie el modo oscuro, la función se puede llamar para mantener Discourse incrustado con el mismo modo de color que mi sitio web.
El bloque de código ④ permite que Discourse incrustado pueda procesar el mensaje del modo de color enviado desde mi sitio web. Aquí cambio el modo de color cambiando el nombre de la clase a la etiqueta del cuerpo.
Además, los bloques de código ① y ④ se agregan a través de la página de administración de Discourse, como se muestra a continuación:
¡Gracias por el esquema anterior @mikeguo, está maravillosamente explicado!
Además, ten en cuenta que necesitas tener la última versión de Discourse para lograr esto, la capacidad de Encabezado Embebido se agregó hace solo unos días.
Confirmo que el método anterior todavía funciona, pero habría sido bueno no tener que escribir código de una captura de pantalla Así que, aquí está, ligeramente actualizado:
Pasos
El iframe de comentarios termina de renderizarse y envía un mensaje a la ventana principal del navegador, informándole.
El navegador consulta su configuración de modo oscuro/claro y envía el valor de vuelta al iframe.
El iframe recibe el mensaje y establece un atributo de datos, una clase o similar, basándose en la configuración de modo oscuro/claro.
Código
Una vez que el iframe se carga, envía una notificación a la ventana principal. Esto debe introducirse en Discourse, en Admin -> Personalizar -> (seleccionar tema) -> Editar CSS/HTML -> Encabezado incrustado.
Maneja este disparador entrante en la ventana principal. Este código vive en tu sitio de blog:
const discourse_url = "https://your.discourse-instance.org";
// Aquí, determinamos el tema y enviamos un mensaje al iframe para que sepa cuál es el tema
// Ver más abajo cómo conectamos notifyFrameStyle
const notifyIFrameOfTheme = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
// Modifica la línea de abajo para obtener la configuración del modo oscuro, dependiendo de cómo la almacenes
theme: document.documentElement.getAttribute("data-theme")
},
discourse_url
);
}
};
// Llama a setFrameStyle cuando recibimos el mensaje "iframe loaded"
const handleMessageListener = (event) => {
var origin = event.origin;
if ((origin === discourse_url) && (event.data == "iframe loaded")) {
notifyIFrameOfTheme();
}
};
En el bloque <script> de (1), añade un listener para el mensaje del tema enviado por notifyFrameStyle:
window.addEventListener("message", (event) => {
const payload = event.data;
if (payload.theme) {
// Haz algo con la configuración del tema; establecí el atributo `data-theme` en el `<html>` del iframe,
// pero es posible que desees establecer un atributo de clase o similar
document.documentElement.setAttribute("data-theme", payload.theme);
}
}, false);
Estilo
En Admin -> Personalizar -> (seleccionar tema) -> Editar CSS/HTML -> CSS incrustado, ahora puedes proporcionar CSS para cada modo. Por ejemplo, puedes anular las variables de estilo de Discourse:
¡Gracias por darte cuenta! Ya no puedo editar la publicación anterior, pero window.addEventListener va al final del fragmento de código debajo del (2).
Así que, aquí está, ligeramente actualizado: