Modo escuro

O que é o modo escuro?

Você pega o celular na cama antes de dormir, com a luz do quarto apagada, e a tela branca acende no seu rosto como uma lâmpada. É exatamente por causa desse momento que o modo escuro existe.

O modo escuro (Dark Mode) é um jeito de mostrar as telas de um site ou aplicativo com fundo escuro e textos e ícones claros, no lugar do texto preto sobre fundo branco de sempre. O conteúdo continua igual: os mesmos botões, os mesmos menus, as mesmas palavras. Só as cores mudam, para a tela ficar suave para os olhos quando a luz ao redor está fraca.

Ele também é chamado de modo noturno ou tema escuro. Hoje já vem nos sistemas de celulares e computadores e na maioria dos aplicativos que usamos todo dia, e por isso as pessoas esperam encontrá-lo em qualquer site ou app novo.

Como o modo escuro funciona?

O celular e o computador têm uma configuração geral em que o usuário escolhe entre a aparência clara e a escura, e alguns aparelhos trocam de uma para a outra sozinhos ao pôr do sol. Um site ou aplicativo bem feito lê essa configuração e abre com as cores certas desde o primeiro segundo.

Existe também um segundo caminho. Um pequeno botão dentro do site ou do app, muitas vezes com o desenho de um sol e uma lua, deixa o usuário trocar de modo por conta própria. Depois disso o sistema lembra a escolha e não volta ao modo claro a cada visita.

Por dentro, o designer prepara dois conjuntos de cores para tudo o que aparece na tela: o fundo, o texto, os botões, as bordas e as tabelas. Então o sistema usa o conjunto certo para cada modo. É como um cômodo com duas iluminações, uma para o dia e outra para a noite, enquanto os móveis continuam no mesmo lugar.

Por que o modo escuro importa para você?

Se você tem um site ou aplicativo, seus visitantes o abrem em horários diferentes do dia. Muitos navegam à noite. O modo escuro muda bastante a experiência deles nessas horas:

• Conforto para os olhos com pouca luz: a tela escura não ofusca em um quarto escuro, e o leitor consegue terminar o artigo ou olhar produtos por mais tempo sem incômodo.
• Economia de bateria: nos celulares com tela OLED, cada ponto preto fica praticamente apagado e não gasta energia. Por isso o modo escuro consome menos bateria nessas telas.
• Menos cansaço para quem trabalha muitas horas: o funcionário que passa o dia diante de um painel de controle ou de um sistema de gestão sente a diferença no fim do expediente, principalmente nos turnos da noite.
• Respeito à escolha do usuário: quem escolheu a aparência escura no celular e abre o seu site todo branco vai sentir que o site não presta atenção nele.

Isso quer dizer que o modo escuro é sempre melhor? Não. No sol ou em um escritório bem iluminado, muita gente lê com mais facilidade o texto preto no branco. O objetivo é deixar a escolha nas mãos do usuário.

Diferenças entre o modo claro e o modo escuro

Como criar um modo escuro confortável para os olhos

Só inverter as cores costuma dar um resultado ruim. Um modo escuro que agrada às pessoas depende de muitas pequenas decisões:

1. Cinza escuro no lugar do preto puro: o preto total ao lado do branco forte cria um contraste duro que cansa a vista. Um fundo cinza escuro ou azul-marinho é mais suave.
2. Texto claro, mas não brilhante: o branco levemente acinzentado é mais fácil de ler do que o branco puro.
3. Contraste suficiente: contraste é a diferença entre a cor do texto e a cor do fundo. Se for pequena demais, a leitura fica difícil, principalmente para idosos e pessoas com pouca visão. O padrão de acessibilidade WCAG define um mínimo para essa diferença.
4. Cores da marca mais suaves: um azul ou um vermelho muito forte parece gritante no fundo escuro e precisa de um tom um pouco mais calmo.
5. Logotipo e imagens que funcionem nos dois fundos: um logotipo preto some no fundo escuro e precisa de uma versão clara. Fotos muito claras podem pedir um leve ajuste.
6. Tabelas e gráficos: nos painéis de controle, é preciso revisar as cores das barras e das linhas para que continuem claras nos dois modos.

Erros comuns ao adicionar o modo escuro

• Ativar o modo escuro na página inicial e esquecer outras páginas, como a de pagamento ou a janela de login, que de repente aparecem brancas.
• Textos cinza-claros sobre fundo escuro que quase ninguém consegue ler.
• Não salvar a escolha do usuário, e o site volta ao modo claro toda vez.
• Ignorar a configuração do aparelho e obrigar todo mundo a usar um único modo.
• Não testar o modo escuro em celulares de verdade antes do lançamento, mesmo que as cores mudem de uma tela para outra.
• Deixar para o fim do projeto, com o design já pronto, e o modo escuro vira um remendo em vez de fazer parte da interface.

O modo escuro nos sites e aplicativos que criamos

Na Linkysoft, planejamos o modo escuro desde o primeiro dia do design, e não depois que ele termina. Cada site que fazemos com o nosso serviço de criação e desenvolvimento de sites já vem com modo escuro integrado, suporte ao árabe e à escrita da direita para a esquerda (RTL) e o padrão de acessibilidade WCAG 2.2, e testamos tudo em celulares de verdade antes do lançamento.

No desenvolvimento de aplicativos, criamos cada app do zero com modo claro, modo escuro e telas acessíveis, para iPhone e Android. Depois publicamos na App Store e no Google Play e cuidamos das atualizações.

O seu projeto é um sistema de gestão que a equipe usa o dia inteiro, como um sistema de vendas, estoque ou RH? Então nós o construímos com o nosso serviço de aplicações web e sistemas de gestão, em torno do jeito que a sua empresa trabalha, e ele roda em todos os aparelhos. Aqui o conforto dos olhos merece entrar no plano, porque a mesma tela fica aberta na frente do funcionário por oito horas ou mais.

Está pensando em um site ou aplicativo novo? Comece com uma consultoria gratuita com a gente, e juntos vamos ver o que os seus usuários precisam de dia e de noite.