Modo escuro automático para comentários incorporados também?

Contribuir Funcionalidade
19

Posso confirmar que o método acima ainda funciona, mas teria sido bom não ter que digitar o código de uma captura de tela :slight_smile: Então, aqui está ele, ligeiramente atualizado:

Passos

  1. O iframe de comentários termina de renderizar e envia uma mensagem para a janela principal do navegador, informando isso.
  2. O navegador consulta sua configuração de modo escuro/claro e envia o valor de volta para o iframe.
  3. O iframe recebe a mensagem e define um atributo de dados, classe ou similar, com base na configuração de modo escuro/claro.

Código

  1. Assim que o iframe for carregado, envie uma notificação para a janela pai. Isso precisa ser inserido no Discourse, em Admin -> Personalizar -> (selecionar tema) -> Editar CSS/HTML -> Cabeçalho Embutido.
<script type="text/javascript">
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
</script>
  1. Manipule este gatilho de entrada na janela principal. Este código fica no seu site de blog:
<script type="text/javascript">
  const discourse_url = "https://your.discourse-instance.org";

  // Aqui, determinamos o tema e enviamos uma mensagem para o iframe para informá-lo sobre o tema
  // Veja abaixo como configuramos notifyFrameStyle
  const notifyIFrameOfTheme = () => {
    const iframe = document.getElementById("discourse-embed-frame");
    if (iframe && iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        {
          // Modifique a linha abaixo para capturar a configuração do modo escuro, dependendo de como você a armazena
          theme: document.documentElement.getAttribute("data-theme")
        },
        discourse_url
      );
    }
  };

  // Chama setFrameStyle quando recebemos a mensagem "iframe loaded"
  const handleMessageListener = (event) => {
    var origin = event.origin;
    if ((origin === discourse_url) && (event.data == "iframe loaded")) {
      notifyIFrameOfTheme();
    }
  };
</script>
  1. No bloco <script> de (1), adicione um listener para a mensagem de tema enviada por notifyFrameStyle:
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // Faça algo com a configuração do tema; eu defino o atributo `data-theme` no `<html>` do iframe,
          // mas você pode querer definir um atributo de classe ou similar
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

Estilização

Em Admin -> Personalizar -> (selecionar tema) -> Editar CSS/HTML -> CSS Embutido, você agora pode fornecer CSS para cada modo. Por exemplo, você pode substituir as variáveis de estilo do Discourse:

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

Espero que isso ajude!

6 curtidas