Alternador de Modo Claro/Escuro para o Dez

[breakzplatform]

Motivado por uma discussão de ontem no Órbita, notei que era um desejo por parte dos usuários de ter algum alternador entre modos do tema com base na preferência do usuário.

Dado a como o Dez é simples (isso é uma qualidade) foi possível implementar isso de uma forma que gerasse o mínimo de complexidade possível para manutenção.

No fluxo de trabalho dos bastidores, a única alteração a se fazer é que ao invés de se escrever CSS para o modo escuro dentro de um escopo (prefers-color-scheme: dark) será necessário escrever o seletor [data-theme="dark"] antes das classes que se referem ao tema escuro. O styles.css já está com essa troca feita - dado que é requisito para o funcionamento - e creio que é bem simples de entender.

Visualmente falando, fiz um alternador extremamente simples, mas que ainda sim creio que se encaixa com o leiaute do Dez. Por opção, ao menos nesta versão, não quis fazer aqueles toggles belíssimos cheios de fru-frus que pesam uma tonelada de CSS (mas nada contra, é uma opção no futuro!).

Ele fica no rodapé:

Para salvar a preferência do usuário é escrita uma chave no localStorage do navegador. Não é um cookie e essa informação nunca é passada pro servidor (ou seja, não tem como da forma que se está, o Manual saber se alguém está com determinado tema ativo ou não). Desta forma, creio que ainda que seja uma preferência pessoal do usuário, nada precisa ser alterado na Política de Privacidade do Manual.

O "plugin" creio que está devidamente comentado, mas sigo a disposição para esclarecimentos e também alterações.

Espero que gostem, e que seja minha primeira contribuição de muitas! 🚀

[rghedin]

Parece muito bom! Meu único receio, à primeira vista (ainda não testei o código), é a apresentação em telas pequenas. Provavelmente vai quebrar linhas e pode ficar um pouco confuso.

Não sei se é viável tecnicamente, mas talvez mostrar só a opção alternativa ao tema ativo e o reset (padrão do sistema)?

Alguém que acesse o site no modo escuro, por exemplo, veria apenas 🌞 Modo claro. Ao alternar para o modo claro (diferente da aparência do sistema), a opção alternativa apareceria, 🌛 Modo escuro. (Pensando aqui agora, talvez nem precise da opção Seguir o sistema. Quando o tema do site e do sistema for o mesmo, em vez de registrar como claro ou escuro, registra como sistema.)

[breakzplatform]

@rghedin, em telas menores realmente quebra em linhas o leiaute atual. No entanto, com uma linha de CSS conseguiria que ficasse assim no mobile, o que acha?

É possível sim fazer apenas um botão para "Alterar para modo X". Eu teria que repensar um pouco sobre a estrutura de como seria, já que ao invés de ter um botão pra cada possibilidade, teria que ter um só pra múltiplas (com contextos diferentes: as vezes "Alternar para modo escuro" vai significar definir tema escuro as vezes, sistema).

É um pouco complexo, mas definitivamente possível.

No entanto, confesso que como usuário, ter um botão de cada me dá mais certeza. No sistema de um único botão, por exemplo, pode acontecer um cenário de alguém achar que está definindo uma visualização fixa (sempre escuro ou claro) quando na verdade está entregando de volta pro sistema.

Se um usuário de tema escuro, troca pra tema claro no Manual, depois troca novamente no Manual, apesar de estar escrito "Alternar para modo escuro" ele estaria alternando para sistema. Se ele em algum momento trocar o tema do sistema (ou tem uma automação que troca isso durante o dia) e entrar no site novamente, ele vai alinhar o tema ao sistema, não ao que estava escrito na seleção. Não é o fim do mundo, seria só clicar de novo pra trocar, mas poderia passar a sensação de que o site não salva corretamente a preferência do usuário.

[rghedin]

Fiquei pensando muito nesse PR ontem, @breakzplatform (alugou um terreno na minha cabeça 😄) e acho que cheguei a alguns insights que não estavam muito claros antes.

Um aspecto que pesa muito a favor da solução mais compacta é espaço na página mesmo. A solução proposta ocupa relativamente bastante para um recurso que é tangencial/não é essencial ao site — diferente da busca, por exemplo. Faz umas semanas dei uma boa enxugada no rodapé para reduzir o espaço vertical ocupado por ele (PR #33); nesse sentido, acrescentar quatro linhas seria uma regressão.

Outra coisa que refleti é o potencial de confusão do item Seguir o sistema (padrão). Se tivermos um seletor mais destacado (no topo da página), aquela solução binária que mencionei talvez comunique melhor as alternativas disponíveis — duas, no caso: Seguir o sistema (padrão) e Cor alternativa.

Gosto do seletor da 404 Media, acho que pode ser uma inspiração para nós:

https://github.com/manualdousuario/dez/assets/19216581/e3e6de66-56a4-4741-a000-7eb99d90889f

Como o topo do site está bem enxuto agora, com espaço sobrando mesmo em telas minúsculas, um ícone extra caberia ali. Mockup simples:

(Ou talvez do outro lado do menu. Alguém me disse que ia mandar um PR de um campo de busca contraído para colocar no topo; se rolar, copiamos o estilo da 404 Media e boa, fica dez.)

O que lhe parece?

[breakzplatform]

Oi @rghedin! Fiz as alterações sugeridas.

Pela reflexão que você trouxe, reestruturei a lógica para ter justamente o tema Sistema e o tema Alternativo. Ou seja, quando Sistema está ativo, que é o padrão que funciona hoje, o tema segue o Sistema Operacional. Alternativo sempre irá retornar o inverso de Sistema.

Isso faz com que a implementação do botão binário seja mais trivial. Traz algumas questões, como já levantamos (o usuário nunca vai poder escolher sempre Escuro, por exemplo) mas entendo que é de fato a melhor solução para a proposta.

Usei dois ícones CC-BY, que estão comentados no código. Teria que dar a atribuição em algum lugar do Manual, não sei exatamente onde. Claro, pode-se usar outro ícone ou também pagar alguns poucos dólares pra ter a licença completa.

Segue um pequeno preview de como ficou:

https://github.com/manualdousuario/dez/assets/597126/2b36c500-f2cb-4081-8fe6-c685e4036974

Peço que teste exaustivamente em diferentes cenários, pois sempre há a chance de ter deixado algo escapar na lógica.

No mais, bom fim de semana!

[rghedin]

Aparentemente, está funcionando certinho, @breakzplatform. Ficou muito bom!

Fiz um pequeno commit para trocar os ícones (peguei dois do mesmo pacote e otimizei/comprimi bastante eles) e um ajuste na organização do style.css.

Vou deixar o PR aberto para fazermos mais testes ao longo da semana. (Se @claromes puder dar uma olhada também, será ótimo!) Se não encontrarmos problemas nos testes, faço o merge e oi deploy no próximo sábado (27/1).

[breakzplatform]

@rghedin obrigado pelos testes!

Subi duas pequenas alterações agora:

• Os ícones do alternador estavam apenas em preto puro, agora eles tem a mesma cor do ícone de usuário
• Fiz um pequeno script para minificar o darkMode.js, gerando uma versão .min.js e usando esta última no leiaute. Funciona da mesma forma que é feito pra minificar o style.css. O comando está no package.json como compile:js:darkMode

Agora só aguardando os testes e review final da @claromes pra saber se tá tudo redondinho pra ir pra rua!

[rghedin]

Ah, bem lembrado. Se quiser/puder ver isso no CSS do Órbita, massa. Se não, dou uma olhada sábado de manhã.

Vamos rolar a implementação do seletor claro/escuro para a outra semana (versão 2.6), para não segurar as alterações da 25/PR #37. Acho que é mais garantido, né?

[claromes]

@rghedin Beleza. Eu olho o Órbita, daí você revisa.

[claromes]

@breakzplatform Editei os comentários pois subimos um PR hoje. :D