Dark mode

[ermesonsampaio]

Contexto

Hoje o TabNews não possui uma opção de escolher tema light ou dark e nem todo mundo gosta do tema light, então essa feature seria interessante para essas pessoas.

Execução

A implementação dessa feature em tese é bem simples, basta adicionar um botão que faz a troca do tema light pro dark e vice e versa por meio do hook de tema do Primer React.

[filipedeschamps]

Show, o tema está hardcoded aqui:

tabnews.com.br/pages/_app.public.js

Line 18 in 5dc6e3d

<ThemeProvider preventSSRMismatch colorMode="day">

Quando testei o tema dark, o fundo não ficava escuro, é preciso identificar o motivo (devo ter feito alguma besteira, não sou um bom frontend).

E por enquanto para facilitar a implementação, isso pode ficar salvo no localStorage do usuário e adicionar um toogle no dropdown no menu, por exemplo:

[ermesonsampaio]

Ótimo, agora só falta achar o que está fazendo com que o fundo não mude.

[ermesonsampaio]

Encontrei durante a adição do suporte a alternância entre temas ao bytemd uma complicação:

https://github.com/filipedeschamps/tabnews.com.br/blob/main/pages/interface/components/Content/index.js#L34

O tema é aplicado por meio de um import de css, porém nós queremos que o tema seja aplicado de acordo com o valor armazenado no localStorage.

Então eu me pergunto se não teria outra maneira de aplicar esse tema, caso não, como podemos contornar isso?

[filipedeschamps]

@ermesonsampaio não sei como funciona muito bem, mas ao invés de importar o github-markdown-light.css, importar o github-markdown.css.

https://github.com/sindresorhus/github-markdown-css

There are 3 themes provided in this package:

• github-markdown.css: (default) Automatically switches between light and dark through @media (prefers-color-scheme).
• github-markdown-light.css: Light-only.
• github-markdown-dark.css: Dark-only.

[ermesonsampaio]

@filipedeschamps o arquivo github-markdown.css faz uso da @media (prefers-color-scheme) pra selecionar o tema dark ou light, então o problema ainda persiste pois não podemos alterar o valor dessa media query(se pudessemos seria uma possível solução, então caso seja possível corrijam-me).

Vou continuar pesquisando pra ver se consigo achar uma solução!

[tembra]

@ermesonsampaio você pode importar cada tema individualmente ...-light.css e ...-dark.css dentro de um seletor raiz para cada um como .light e .dark.

Então você pode usar javascript para identificar o prefers-color-scheme com window.matchMedia e dessa forma atribuir ao elemento html a classe light ou dark automaticamente. Isso também te dará o poder de mudar essa classe no clique de um botão, quando o próprio usuário poderá escolher o tema que quer, independente do preferencial informado pelo navegador.

Ou ainda você pode abstrair toda essa inteligência e utilizar esse maravilho web component: dark-mode-toggle

[ermesonsampaio]

@tembra muito obrigado pela sugestão, ajudou bastante!

Pra resolver esse problema eu achei interessante modificar o github-markdown.css e se vocês analisarem as alterações, eu basicamente troquei o critério do dark mode da media query para uma classe dark ou light, porém eu ainda tive que adicionar um tema dark e light para o codemirror que é utilizado pelo bytemd e alterar algumas coisas desses temas para que ele seguisse o padrão do restante da aplicação.

Resultado:

[filipedeschamps]

Ficou impressionantemente bonito o modo darkmode 🤝

Mas vendo os commits, sinto que estamos encarando a abstração do jeito errado e por isso que estamos precisando dar tantas voltas. Isso dificulta fazermos updates das dependências e abre margem para muita coisa escapar, como blocos de código:

Eu tive uma interação faz um tempo no repositório do Primer sobre os estilos do markdown: primer/react#1680

Uma pessoa tava propondo um componente para markdown, mas não teve nenhum engajamento. Mas veja as respostas ali para baixo, onde ele fala que importou o CSS do próprio Primer (que é a abstração que vem antes do Primer React). Não sei se vai ter o efeito que procuramos e se comporta blocos de código.

De qualquer forma, precisamos encarar esse problema por um outro ângulo 👍

[ermesonsampaio]

Implementando a solução encontrada pelo autor da issue podemos obter um resultado muito semelhante ao anterior.

Se olharem os útimos commits podem ver que agora o tema do codemirror está sendo importado do módulo de tema para codemirror do próprio Primer (codemirror-github-dark) e não mais do arquivo da pasta styles, porém da maneira como o código está hoje, ainda é necessário o arquivo bytemd.css para que o layout do bytemd fique de acordo com o tema selecionado.

[filipedeschamps]

Show! Ótima descoberta e de fato é menos coisas para administrarmos 🤝

Mas testando aqui um bloco de código, ele continua imprimindo uns tokens com a cor errada e fica ilegível. Isso acontece aí do seu lado também?

[ermesonsampaio]

Sim, isso também está acontecendo do meu lado.

Dando uma fuçada na pasta styles do highlight.js ví que existe o github.css e o github-dark.css e até o momento o arquivo que está sendo importado é o github.css que é responsável pelo light mode, explicando assim o motivo das cores erradas 😅

Sabendo disso agora precisamos importar o arquivo de estilo referente ao tema ativo.

---

Importando o arquivo github-dark.css estaticamente apenas pra ver como ficaria:

[filipedeschamps]

Ficou lindo demaaais @ermesonsampaio 😍

[filipedeschamps]

https://www.tabnews.com.br/Cleverson/c8ca4e4e-78b3-4e4e-aa88-9aa0fc4b76d9 🤝

[ermesonsampaio]

Acabei esquecendo de comentar aqui, mas agora o tema do highlight.js também está sendo aplicado de acordo com o tema selecionado pelo usuário, então creio que agora dark mode finalmente está pronto (pelo menos por agora kkkkk)

[filipedeschamps]

Pessoal, vou fechar essa issue para centralizar a conversa no PR #377 pois os detalhes técnicos evoluíram muito mais lá 🤝