Aplicando modo escuro ao Velog

Escrevi sobre a experiência de introduzir o modo escuro em um serviço que não havia considerado modo escuro inicialmente.

O texto foi escrito somando tanto a perspectiva de um designer de UX quanto a de um desenvolvedor.

• Escolha de tecnologia

  • O Velog usa React e Styled Components

  • O ThemeProvider do Styled Components define o tema em JS, então há limitações para exibir o tema do sistema como padrão. Para seguir o tema do sistema, é preciso fazer uma chamada de JS no navegador, então, a menos que o tema padrão seja fixado, isso não é adequado para o Velog, que aplica SSR.

  • Usando CSS Variables, é possível fazer com que o tema do sistema seja usado como valor padrão

  • Para usar CSS Variables em um ambiente CSS in JS, as cores são gerenciadas em objetos JS, e estamos usando funções utilitárias para evitar erros e aproveitar o autocompletar do TypeScript

• Considerações sobre a paleta do modo escuro

  • As cores foram definidas com base em cor de fundo, cor do texto, cor da borda, Primary e Destructive

  • No caso da cor de fundo, no início ela foi organizada por níveis de luminosidade 1 2 3 4, mas na UI real nem sempre havia correspondência 1:1, então ela foi ajustada um pouco para lidar com situações de exceção

  • Ao definir a cor do texto, é importante verificar se a taxa de contraste está adequada. No WebAIM é possível ver se passa no WCAG

  • As cores Primary e Destructive mantêm bom contraste em fundos escuros mesmo usando as cores existentes, mas usar cores desaturadas dá uma sensação mais adequada ao tema escuro

• Trabalho de substituição de cores

  • O que podia ser substituído automaticamente com ajuda da IDE foi processado dessa forma

  • As demais cores de exceção foram ajustadas manualmente, observando caso a caso e definindo cores adequadas

  • Quando parecia estranho implementar com as cores já existentes, novas cores eram adicionadas à paleta conforme necessário e gerenciadas dessa forma

  • Na prática, essa foi a etapa que exigiu mais esforço

• Função de alternância do tema escuro

  • O efeito de transição foi implementado com dois SVGs usando transições CSS de rotate e scale

  • Quando o usuário alterna o tema escuro, a preferência é salva no localStorage e em cookies

  • O localStorage é usado no CSR, e os cookies no SSR

Depois de aplicar o tema escuro uma vez, senti o quanto é extremamente difícil aplicar um tema escuro a uma UI que não foi projetada levando isso em conta. Daqui para frente, ao planejar algo, vou considerar obrigatoriamente o tema escuro no design, e ao usar cores, em vez de nomes como gray1, gray2, parece mais prático no futuro nomear por finalidade, como text1, text2.