Dark Mode

[filipedeschamps]

Contexto

Inicialmente disponibilizar um controle no Frontend apenas para a pessoa alternar entre os modos de visualização Claro e Escuro e persistir isto em Local Storage. Em outro momento (quando necessário), fazer esta informação persistir no backend (dentro do perfil do usuário), para ser sincronizado entre os devices.

Execução

Dado a alguns detalhes técnicos da stack que usamos (Next.js e BytMD), esta implementação não é tão simples, mas procurando no histórico, encontrei estas duas publicações:

• feat(dark-mode): adiciona suporte ao dark mode #377
• feat(theme) Adicionando temas usando 100% dos recursos do primer #916

Lembro que teve uma terceira tentativa, mas não estou conseguindo encontrar... mas posso estar enganado sobre a existência dela.

[ozzono]

Oi @filipedeschamps , desconheço o Next.JS então vou opinar com o que conheço do Vue.JS.

Que tal acionar o tema da página utilizando info do navegador ou do sistema oepracional do usuário? Dessa forma o tema escuro já seguiria a preferência do usuário, concorda?

Ao menos no VueJS a implementação é relativamente fácil e sou capaz de apostar que o NextJS tb dá uma forcinha.

[alvesa]

com ideia de remover duplicidades, a mesma issue foi aberta #1127

[saraiva1989]

@filipedeschamps ou admins, Eu iniciei a implementação do dark mode;

Ainda tem alguns ajustes a ser feito, colocar no checkbox um css bonitinho e ajustar algumas coisas mais.

basicamente eu criei um CSS e altero as variaveis dependendo do tema

Gostaria de saber se posso dar continuidade na implementação.

[ozzono]

Eu não aprovo nada, mas acho que ficou ótimo, mesmo com o checkbox padrão.

[saraiva1989]

Eu vou deixar melhor não é difícil.
Só não fiz tudo porque não sei se está nos moldes do projeto, aí mandei como estou fazendo para ver se faz sentido. Caso faça eu dou continuidade e devo fazer um PR esse fim de semana ainda .

[aprendendofelipe]

Gostaria de saber se posso dar continuidade na implementação.

@saraiva1989, não precisa pedir permissão para fazer contribuições. 👍

Especificamente sobre o dark mode, vale a pena levar em consideração tudo que foi discutido no #377 e #916 para não ficar travado nos mesmos pontos. 🤝

[saraiva1989]

Eu iniciei então, estou implementando e fazendo os testes.

Agora vou ter que trabalhar um pouco no dark dos "pre" e no markdown na escrita de artigos

TabNews_.Conteudos.para.quem.trabalha.com.Programacao.e.Tecnologia.-.Google.Chrome.2023-02-01.21-46-52.mp4

[birobirobiro]

Eu iniciei então, estou implementando e fazendo os testes.

Agora vou ter que trabalhar um pouco no dark dos "pre" e no markdown na escrita de artigos

TabNews_.Conteudos.para.quem.trabalha.com.Programacao.e.Tecnologia.-.Google.Chrome.2023-02-01.21-46-52.mp4

Parabéns pela iniciativa! Enquanto a sua PR não chega eu desenvolvi uma maneira alternativa de ter o dark mode direto no navegador:

https://www.tabnews.com.br/birobirobiro/tema-catppuccin-para-o-tabnews

[aprendendofelipe]

Foi implementado no PR #1348, e mais ajustes foram realizados nos PRs #1353 e #1394 🎉

Obrigado a todos que contribuíram de alguma forma para o dark mode! 💪