Dark mode sem flash e nova versão do editor de markdown

[aprendendofelipe]

Implementa o modo escuro com a mitagação do problema das versões anteriores, que era a piscada do tema diferente antes da exibição do tema correto. Ainda está como rascunho porque falta configurar highlights, mas já estou disponibilizando para a turma dar uma navegada e ver se encontra alguma cor incoerente ou qualquer necessidade de ajuste:

https://tabnews-156o2ppuy-tabnews.vercel.app

Foi criado o componente Theme Provider para isolar a solução do flash. Foi inserido um script que muda a página inteira para visibility: hidden antes da renderização e volta para visible assim que o tema correto é aplicado. O ponto de diferença de uma das soluções anteriores é que a página estática vem carregada normalmente (pode ser conferido desabilitando o JS).

Essa solução não resolve definitivamente o problema, pois se em alguma alteração futura for adicionado algum componente setado com visibility: visible, então esse componente pode aparecer sozinho na tela com o tema indevido. Isso caso esse componente esteja presente na primeira página acessada.

Pra quem for analisar o código, recomendo olhar cada commit separadamente:

• 1fb96d9 Foram reorganizadas boa parte das importações dos componentes de UI.

• 3abd1a9 Cria o Theme Provider e adiciona o script que permite alterar o esquema de cores sem piscar a tela.

• 54d77fc Adiciona ao menu um seletor de tema com opções de claro, escuro ou automático. Para usuários não logados o botão aparece no header, mas somente dá a opção de inverter o tema, não tendo a alternativa automática.

• 6e85989 Inicia as adequações de todo o sistema para funcionar bem em qualquer dos temas (claro ou escuro):

• Muitas mudanças de variáveis de cores ocorreram para que a mesma variável faça sentido em diferentes temas, mas na maioria dos casos a cor permanece a mesma.

• A maior exceção são os campos de entrada de texto em que mudei para a versão de contraste, seguindo o padrão aqui do GitHub;

• Fixação das cores de tabcash e tabcoins para não mudarem ao selecionar outro tema;

• Adicionados espaçamentos que permitem às bordas dos componentes aparecerem sem sobreposições;

• Cria um componente apenas de estilização do editor de markdown (trabalho em andamento);

• Ao mexes nas estilização do ByteMD, aproveitei para corrigir alguns problemas que ocorriam em telas pequenas, ou em respostas muito profundas na árvore, em que havia sobreposição do campo de texto com os botões;

• Habilitei a a possibilidade de redimensionar o campo de texto.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
tabnews	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 29, 2023 at 8:54PM (UTC)

[filipedeschamps]

@aprendendofelipe melhor designer, ficou sensacional:

E testei o máximo que consegui aqui e não peguei nenhum flash 🤝 💪

[aprendendofelipe]

Acho que está pronto! 😅

Como eu tive que entender bem a estilização do ByteMD para corrigir as cores, acabei corrigindo mais coisas e agora dá pra escolher diferentes formas de visualização, inclusive vendo o preview ao mesmo tempo em que escreve. 🎉

Digam o que acharam do tema escuro e da nova versão do editor, por favor! 🤝

[aprendendofelipe]

https://tabnews-git-dark-mode-tabnews.vercel.app/

[aprendendofelipe]

Subi a última versão com um aumento no tempo limite para estabelecer conexão com o banco de dados.

É só para ver se diminuem os erros de timeout.

[filipedeschamps]

Como eu tive que entender bem a estilização do ByteMD para corrigir as cores, acabei corrigindo mais coisas e agora dá pra escolher diferentes formas de visualização, inclusive vendo o preview ao mesmo tempo em que escreve. 🎉

Eu propositalmente escondi aquela bandeja porque é muito ruído 😂 😂 😂 😂 mas vamos ver o que a turma acha 🤝

E testando aqui, tudo continua 100% 😍

[aprendendofelipe]

Parece que com 3s de timeout tudo funcionou bem no ambiente de homologação. Alterei para 2s para vermos o que acontece. 🤝

Modifiquei também o tema default para permanecer o modo claro e não assustar ninguém. 😅

Vou enviar para produção 🚀

[filipedeschamps]

SEN-SA-SI-O-NAL!!!!!!

[rodrigoKulb]

Nossa que TOP!

Nos meus testes apenas no firefox com o F5 está dando um flash totalmente branco, não sei se será possivel resolver.

2023-03-29.18-38-19.mp4

[aprendendofelipe]

Nos meus testes apenas no firefox com o F5 está dando um flash totalmente branco, não sei se será possivel resolver.

No Edge e no Chrome também é visível de vez em quando. A minha curiosidade é mais em entender porque não acontece sempre. Como será que os navegadores lidam com isso? Pois a versão do servidor sempre vem com um tema padrão fixo no código, que deixei o claro para não mudar automaticamente de todo mundo. Será que fazem algum cache do tema usado pela última vez e usam ele enquanto não for renderizado nada na tela? E talvez o Firefox não faça isso.

Como curiosidade, esse link vem com o modo dark como padrão, então ocorre o inverso, pisca preto no Firefox se estiver usando o tema claro:

https://tabnews-b7aozfckn-tabnews.vercel.app/

Parece que o Chrome faz mesmo algum cache, mas não é só do último acesso, pois eu inverti manualmente a configuração do tema no localStorage e confundi o navegador. A agora o flash ocorre como no Firefox. 😅

Mas o importante é que é só a cor do background que é preenchida. Nenhum componente é renderizado no tema errado, como ocorre usando o modo padrão de mudar o tema do Primer que faz isso para evitar o erro de hidratação do React.

Acho que é possível resolver definitivamente, mas não sei se tem jeito sem vir o tema certo do servidor. Para as páginas estáticas dá pra resolver isso com cookies, a Edge e diferentes versões para cada página. Daí ainda pode ocorrer no primeiro acesso enquanto não houver nenhum cookie, mas a partir daí a Edge lê esse cookie e envia a versão já com o tema de preferência do usuário.