Como colocar o Poe em preto e branco
A interface do Poe não tem um modo nativo preto e branco. O que a maioria das pessoas quer é basicamente transformar o visual em algo mais sóbrio, com tons de cinza e fundo escuro. Vou explicar como fazer isso de forma prática, sem enrolação.
poe em preto e branco na prática
A forma mais confiável é usar uma extensão de tema no navegador. Eu usei o Stylus (disponível para Chrome e Firefox) porque ele permite salvar estilos personalizados que sobrevivem a atualizações da página. A alternativa é o Stylish, mas essa já foi descontinuada e costuma ter problemas de segurança, então não recomendo. Passo a passo:
1. Instale o Stylus na loja do seu navegador. 2. Vá para o site do Poe (poe.com).
3. Clique no ícone do Stylus e selecione "Escrever estilo para poe.com". 4. Cole o CSS abaixo no editor.
O código funciona assim: você sobrescreve as variáveis de cor originais e aplica um filtro de escala de cinza na página inteira. O resultado é uma interface onde os botões, mensagens e background ficam em tons de preto, cinza e branco. Aqui está um CSS que eu uso e funcionou até a última atualização do Poe em 2025:
👉 Clique no botão abaixo para saber mais sobre o assunto!
poe.com::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; filter: grayscale(100%); } Na verdade, o pseudo-elemento acima não funciona bem porque interfere na interação. O jeito certo é aplicar filter: grayscale(100%) diretamente no html ou body.
O CSS completo que eu recomendo: html { filter: grayscale(100%); }
/* opcional: escurecer fundo */
body { background-color: #0d0d0d; color: #c0c0c0; }
Isso já resolve 90% do problema. O restante fica com cores originais porque o Poe carrega alguns ícones SVG inline que fogem ao filtro CSS. Para corrigir isso, adicione * { filter: grayscale(100%) !important; } no Stylus também. Problema real que encontrei: Quando o Poe lançou a nova versão da interface com o chat dividido em colunas, o filtro grayscale começou a dejar alguns elementos (botões de sugestão rápida) com aparência estranha — eles ficavam cinza mas ainda mantinham um brilho azulado nos ícones. A solução foi mais específica: aplicar o filtro apenas nos containers principais com .page-container, .chat-view { filter: grayscale(100%); } em vez de jogar no html inteiro. Isso preservou a interatividade e eliminou os resquícios de cor.
Outro detalhe importante: se você usa o modo escuro oficial do Poe junto com o filtro, o contraste fica excessivamente forte. Sugiro desativar o tema escuro nativo antes de aplicar o estilo personalizado. No menu de configurações do Poe, deixe o tema como "claro" e deixe o CSS cuidar do fundo escuro. Para quem prefere não instalar nada e quer algo temporário, dá para usar a extenção Dark Reader configurada para modo preto e branco. Ela detecta automaticamente o site e aplica um tema. O resultado não é tão limpo quanto o Stylus com CSS manual, mas funciona em segundos e não precisa de manutenção quando o Poe atualiza.
O downside real aqui é que o filtro grayscale afeta toda a página, inclusive imagens e avatares. Se você conversa com agentes que têm ícones coloridos importantes, perde essa informação visual. Nesse caso, o ideal é criar duas versões do estilo: uma completa com grayscale e outra seletiva que aplica o filtro apenas nos containers de texto, deixando ícones de fora. Exige um pouco mais de trabalho mas faz diferença em sessões longas. Se o objetivo é simplesmente reduzir o cansaço visual, uma alternativa mais simples que funciona bem é ajustar a luminosidade do monitor ou usar ferramentas como f.lux no Windows / Night Shift no macOS. Mas se a questão é estética mesmo — ter o Poe num visual monocromático consistente — o Stylus com o CSS acima é o caminho mais direto. Configurações levam uns 5 minutos e depois é só esquecer que existe.
