Closed ermesonsampaio closed 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:
Ótimo, agora só falta achar o que está fazendo com que o fundo não mude.
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?
@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.
@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!
@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
@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.
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 👍
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.
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?
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:
Ficou lindo demaaais @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)
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.