Closed ermesonsampaio closed 2 years ago
filipedeschamps
commented
2 years ago Show, o tema está hardcoded aqui:
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
commented
2 years ago Ótimo, agora só falta achar o que está fazendo com que o fundo não mude.
ermesonsampaio
commented
2 years ago Encontrei durante a adição do suporte a alternância entre temas ao bytemd uma complicação:
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
commented
2 years ago @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
commented
2 years ago @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
commented
2 years ago @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
commented
2 years ago @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.
filipedeschamps
commented
2 years ago 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: https://github.com/primer/react/issues/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
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago Ficou lindo demaaais @ermesonsampaio 😍
filipedeschamps
commented
2 years ago ermesonsampaio
commented
2 years ago 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
commented
2 years ago Pessoal, vou fechar essa issue para centralizar a conversa no PR #377 pois os detalhes técnicos evoluíram muito mais lá 🤝
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.