¿Modo oscuro automático también para los comentarios embebidos?

Contribuir Característica
19

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 :slight_smile: Así que, aquí está, ligeramente actualizado:

Pasos

  1. El iframe de comentarios termina de renderizarse y envía un mensaje a la ventana principal del navegador, informándole.
  2. El navegador consulta su configuración de modo oscuro/claro y envía el valor de vuelta al iframe.
  3. 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

  1. 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.
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
  1. 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();
    }
  };
  1. 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:

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

¡Espero que eso ayude!

6 Me gusta