🦌 👨🏾‍💼 🈶 Modo escuro: Olá escuridão, meu velho amigo 🤱🏽 👩‍🎓 😽

O modo escuro continua sendo uma tendência importante no design de sites e aplicativos. Encontramos um ótimo artigo sobre este assunto e decidimos compartilhar a tradução. Opinião do usuário, implementação e suporte do modo escuro, recomendações para desenvolvedores estão mais adiante no artigo. De que lado você está?

Apenas um exagero ou uma necessidade? Saiba mais sobre o modo escuro. Vou mostrar como adicionar suporte ao modo escuro para o benefício de seus usuários!

Introdução

Sobre este tema, fiz um estudo volumoso, estudei a história do assunto. Se você está interessado apenas em trabalhar com o modo escuro, fique à vontade para pular a primeira seção.

Modo escuro antes de se tornar popular

Tela verde ( fonte )

Dizem que a história é cíclica. Na situação do modo escuro, estamos de volta onde tudo começou. Nos primeiros dias dos computadores pessoais, o modo escuro era a única opção: monitores CRT monocromáticos funcionavam irradiando feixes de elétrons para uma tela fosforescente, e o fósforo usado nos primeiros CRTs era verde. Como o texto era exibido em verde e o restante da tela em preto, esses modelos eram frequentemente chamados de telas verdes .

Escuro sobre branco ( origem )

Posteriormente, os monitores CRT coloridos começaram a exibir várias cores por meio do uso de fósforos vermelho, verde e azul. Eles criaram o branco ativando todos os três fósforos ao mesmo tempo. Com o advento da editoração eletrônica mais moderna e da tecnologia WYSIWYG , a ideia de fazer um documento virtual parecer uma folha de papel real se tornou popular.

Navegador WorldWideWeb ( fonte )

Neste ponto do design, a tendência "dark on white" nasceu, foi implementada nos primeiros sites da rede - eles eram mais como documentos de texto.

O primeiro navegador do mundo, o WorldWideWeb (imagine que o CSS ainda não tivesse sido inventado ) renderiza páginas da web dessa maneira. Curiosidade: o segundo Line Mode Browser (navegador baseado em terminal) era verde no escuro. Hoje, as páginas da web e os aplicativos são geralmente criados com texto escuro sobre fundo claro, que é a norma aceita. Este esquema de cores é integrado às folhas de estilo de agentes de usuários modernos, incluindo, por exemplo, o Chrome....

Usando smartphones ( fonte ) Os

dias dos monitores CRT já se foram. Agora consumimos e criamos uma grande quantidade de conteúdo em dispositivos móveis que usam LCDs retroiluminados ou AMOLEDs com baixo consumo de energia. Computadores, tablets e smartphones menores e mais práticos levaram a novos padrões de comportamento do usuário. No nosso tempo livre, desaparecemos nas redes sociais, programamos para nos divertirmos ou jogamos jogos de computador. Isso geralmente acontece após o trabalho, à noite, com pouca iluminação ou mesmo à noite, na cama antes de ir para a cama. Quanto mais as pessoas usam seus dispositivos no escuro, mais popular o Modo escuro se torna.

Por que escolher o modo escuro?

Por razões estéticas,

quando as pessoas são questionadas sobre por que gostam do modo escuro , as respostas mais populares são "É mais agradável aos olhos" ou "O modo escuro é lindo". A Apple diz abertamente em sua documentação de desenvolvedor para o Modo escuro : "A escolha de escuro ou claro para a maioria dos usuários é baseada nas preferências estéticas e pode não ser relevante para as condições de iluminação."

Descubra mais no estudo por que as pessoas adoram o modo escuro e como usá-lo.

Sistema 7 CloseView ( fonte )

Modo escuro como ferramenta de acessibilidade para pessoas com deficiência

Algumas pessoas só precisam usar o Modo escuro: por exemplo, usuários com deficiência visual usam o Modo escuro como ferramenta de acessibilidade. O primeiro uso do modo escuro como ferramenta de acessibilidade que consegui encontrar foi o recurso CloseView do System 7, com a capacidade de alterar o esquema de cores de preto em branco e branco em preto. Embora o System 7 suporte uma interface colorida, a interface de usuário padrão era preto e branco.

Este método baseado em inversão mostrou seus pontos fracos após aumentar o número de cores na interface. Sarit Szpiro e uma equipe de pesquisadores realizaram uma pesquisausuários sobre como pessoas com deficiência visual manipulam dispositivos de computador. Como resultado, descobriu-se que todos os entrevistados não gostavam de cores invertidas, mas muitos preferiam texto claro em um fundo escuro. A Apple aborda essa preferência do usuário com Smart Invert , que muda as cores da tela, excluindo imagens, mídia e alguns aplicativos que usam estilos de cores escuras.

Uma forma especial de baixa visão é a síndrome da visão computacional, também conhecida como fadiga ocular digital. Esses termos significamdiversos problemas de visão que estão associados ao uso frequente de computadores (desktops, laptops e tablets) e outros dispositivos eletrônicos (smartphones e e-books). Cientistas especulam que o uso de dispositivos eletrônicos por adolescentes, principalmente à noite, aumenta o risco de problemas de sono, insônia e síndrome de privação do sono. De acordo com outros estudos , os efeitos da luz azul estão envolvidos na regulação do ritmo circadianoe o ciclo do sono, e ambientes com luz irregular podem levar à privação do sono, o que afeta o humor e a eficiência de uma pessoa na execução de tarefas. Você pode limitar o impacto negativo reduzindo a quantidade de luz azul ajustando a temperatura da cor da tela (recursos como iOS Night Shift ou Android Night Light ) ou evitando luz brilhante ou irregular em geral com Tema escuro ou Modo.

Economizando energia no modo escuro em visores AMOLED

O modo escuro é conhecido por economizar bastante energia em visores AMOLED. Pesquisas em aplicativos populares do Google, como o YouTube, provaram que a economia de energia pode chegar a 60%. O vídeo abaixo fornece mais detalhes sobre esses estudos e a economia de energia para cada aplicação.

Como ativar o modo escuro no sistema operacional

Agora que cobri por que o modo escuro é tão importante para muitos usuários, vamos dar uma olhada em como você pode personalizá-lo.

Configurações de tema escuro em

sistemas operacionais Android Q que suportam modo escuro ou tema escuro geralmente têm a opção de ativá-los nas configurações. No macOS X, isso está na seção Geral das Preferências do Sistema e é denominado Aparência ( captura de tela ), e no Windows 10, em Cores denominado Escolha sua cor ( captura de tela ). No Android Q, você pode alternar o modo para Exibir como tema escuro ( captura de tela ) e, no iOS 13, você pode alterar a cor da interface na seção Exibição e brilho ( captura de tela ).

- prefers-color-scheme

Um pouco mais de teoria antes de continuar. As consultas de mídia permitem que os autores testem e consultem os valores e propriedades de um agente de usuário ou dispositivo, independentemente da renderização do documento. Eles são usados na regra de mídia CSS para aplicar estilos condicionalmente a um documento e em alguns outros contextos e linguagens como HTML e JavaScript. As consultas de mídia de nível 5 introduzem as chamadas propriedades de mídia preferidas do usuário, que é um sinal para os sites descobrirem a maneira preferida do usuário de exibir conteúdo.

O conjunto de propriedades de mídia CSS de movimento reduzido preferencial pode ser usado para determinar se o usuário solicita que o sistema operacional minimize a quantidade de animação que ele usa. eu jáescreveu sobre prefere-redução-movimento anteriormente.

A propriedade de mídia CSS prefere-color-scheme é usada para determinar qual tema, claro ou escuro, é usado por uma pessoa no sistema operacional. Funciona com os seguintes valores:

sem preferência : Indica que o usuário não tornou nenhuma preferência conhecida no sistema. Esta palavra-chave é avaliada como falsa em um contexto lógico .
claro : indica que o usuário notificou o sistema de que prefere uma página com tema claro (texto escuro sobre fundo claro).
escuro : indica que o usuário notificou o sistema de que prefere uma página com tema escuro (texto claro sobre fundo escuro).

Suporte para modo escuro

Descubra se o modo escuro é compatível com o navegador

Como o modo escuro é comunicado por meio de uma consulta de mídia, você pode facilmente verificar se o navegador atual oferece suporte para o modo escuro, descobrindo se a consulta de mídia com esquema de cores preferencial é apropriada . Observe que não estou definindo o valor, mas apenas verificando se há uma correspondência na consulta de mídia.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log(' Dark mode is supported');
}

No momento em que este artigo foi escrito, o esquema de cores preferenciais era compatível com computadores e dispositivos móveis (quando disponível) no Chrome e Edge da versão 76, Firefox da versão 67 e Safari da versão 12.1 no macOS e da versão 13 no iOS. Para todos os outros navegadores, você pode encontrar informações no artigo Posso usar tabelas de suporte .

Um elemento <dark-mode-toggle> personalizado está disponível e adiciona suporte ao modo escuro para navegadores mais antigos. Vou escrever mais sobre isso .

Modo escuro na prática

Vamos dar uma olhada na aparência do suporte ao modo escuro na prática. Assim como no filme "Highlander" , no final só pode haver um: escuro ou claro! Por que estou me concentrando nisso? Porque esse fato afeta a estratégia de carregamento. Não force os usuários a baixar CSS em um estágio crítico de renderização para um modo que não está sendo usado atualmente. Portanto, para otimizar a velocidade de carregamento, dividi meu CSS no exemplo em três partes para atrasar o carregamento de CSS não crítico :

style.css contém regras gerais que são usadas em todo o site
dark.css contém as regras necessárias para o modo escuro
light.css contém as regras necessárias apenas para o modo light.

Estratégia de carregamento

Os dois últimos, light.css e dark.css, são carregados seletivamente por meio de uma solicitação <link media>.

Inicialmente, nem todos os navegadores suportam a propriedade de mídia CSS prefers -color-scheme (encontrada no exemplo acima ), isso é resolvido selecionando o padrão light.css por meio de um elemento em nosso script embutido (a luz é uma escolha arbitrária, eu também poderia escurecer por padrão). Para evitar que apareça conteúdo não estilizado, oculto o conteúdo da página até que light.css seja carregado.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = ``">'
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">

<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

Arquitetura da folha de estilo

Estou usando variáveis CSS , o que permite que o style.css seja genérico, toda a configuração do modo claro ou escuro acontece em dois outros arquivos: dark.css e light.css. Abaixo está um exemplo que deve ser suficiente para explicar a ideia geral. Eu declaro duas variáveis, -⁠-⁠color e -⁠-⁠background-color, que criam um tema base escuro sobre claro e claro sobre escuro.

/* light.css:  dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}
/* dark.css:  light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

Então, em style.css , uso essas variáveis no corpo {...} . Por serem definidos na pseudoclasse CSS : root , um seletor que representa o elemento <html> em HTML e é idêntico ao seletor html , exceto que sua especificidade é maior: as variáveis são cascateadas, permitindo assim a definição de variáveis CSS globais.

/* style.css */
:root {
  color-scheme: light dark;
}
body {
  color: var(--color);
  background-color: var(--background-color);
}

No exemplo acima, você provavelmente notou a propriedade do esquema de cores com valores claros escuros separados por um espaço.

A propriedade informa ao navegador quais temas de cores meu aplicativo suporta e permite que ele ative variações especiais da folha de estilo do agente do usuário. Isso é útil, por exemplo, para permitir que o navegador exiba campos de formulário com um fundo escuro e texto claro, personalize as barras de rolagem ou habilite uma cor de destaque específica do tema. Os detalhes da propriedade do esquema de cores são especificados no Módulo de Ajuste de Cores CSS Nível 1 .

Saiba mais sobre o esquema de cores .

Todo o resto é apenas estilo CSS para o resto da marcação que tenho em meu site. A organização semântica dos estilos ajuda muito ao trabalhar com o modo escuro. Por exemplo, em vez de -⁠-⁠highlight-yellow, considere nomear a variável -⁠-⁠accent-color , uma vez que “yellow” pode não ser realmente amarelo no modo escuro ou vice-versa. Abaixo está um exemplo de mais algumas variáveis que estou usando.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Análise detalhada

No quadro a seguir Glitch você pode ver um exemplo que usa tudo o que está descrito acima, na prática. Tente alternar o modo escuro nas configurações do sistema operacional e veja como a página reage.

Impacto na velocidade de download

Ao brincar o suficiente com este exemplo, você pode ver por que carrego meu dark.css e light.css por meio de consultas de mídia. Tente alternar o modo escuro e recarregar a página: certas folhas de estilo incompatíveis no momento ainda estão carregando, mas com a prioridade mais baixa para que não concorram com os recursos de que o site precisa no momento.

Descubra por que os navegadores carregam folhas de estilo com consultas de mídia incompatíveis .

O site claro carrega os

estilos escuros de prioridade mais baixa: O site escuro carrega os estilos claros de prioridade mais baixa:

O site padrão com uma capa clara em um navegador que não oferece suporte ao esquema de cores preferenciais carrega os estilos escuros com a prioridade mais baixa:

Como responder às mudanças do modo escuro

Como acontece com qualquer alteração de consulta de mídia, você pode assinar uma alteração de modo escuro via JavaScript. Você pode usar isso, por exemplo, para alterar dinamicamente o ícone da página ou alterar o <meta name = "theme-color"> , que determina a cor da barra de URL no Chrome. O exemplo acima mostra o que é descrito em ação. Para ver as mudanças no tema e na cor do ícone, abra a demonstração em uma guia separada .

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkModeMediaQuery.addListener((e) => {
    const darkModeOn = e.matches;
    console.log(`Dark mode is ${darkModeOn ? ' on' : '️ off'}.`);
  });

Práticas recomendadas do modo escuro

Evite

branco puro Você deve ter notado um pequeno detalhe: não estou usando branco puro. Em vez disso, para evitar que o conteúdo escuro circundante brilhe, escolhi um branco ligeiramente mais escuro, algo como rgb (250, 250, 250) .

Alterando a cor e o escurecimento das imagens fotográficas

Se você comparar as duas capturas de tela abaixo, notará que não apenas o tema principal mudou de escuro para claro para claro para escuro, mas a imagem parece um pouco diferente. Minha pesquisa descobriu que a maioria dos usuários prefere imagens um pouco menos brilhantes e saturadas quando o modo escuro está ativo. Eu chamo isso de recoloração.

As cores da imagem ficam mais opacas no modo escuro

Cores da imagem no modo claro Você pode

recolorir imagens usando um filtro CSS. Estou usando um seletor CSS que se encaixa em todas as imagens que não têm .svg em seus urls. A ideia é que eu possa dar aos gráficos vetoriais (ícones) um tratamento diferente, mais sobre isso na próxima seção . Observe como estou usando a variável CSS novamente para que possa mudar rapidamente meu filtro mais tarde.

Saiba mais sobre as preferências do usuário com base na pesquisa .

Como a repintura só é necessária no modo escuro, ou seja, quando dark.css está ativo, não há regras correspondentes em light.css .

/* dark.css */
--image-filter: grayscale(50%);
img:not([src*=".svg"]) {
  filter: var(--image-filter);
}

Ajustando a intensidade da recoloração do modo escuro com JavaScript

Somos diferentes, e cada pessoa terá suas próprias ideias de como exatamente o modo escuro deve ser. Seguindo o método de recoloração descrito acima, posso facilmente tornar a intensidade da escala de cinza uma preferência do usuário, que é alterada pelo JavaScript , e ao definir o valor como 0% , posso desativar a recoloração por completo. Observe que document.documentElement fornece um link para o elemento raiz do documento, ou seja, o mesmo elemento que posso fazer referência usando a pseudoclasse CSS : root .

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Inverta vetores e ícones

Para gráficos vetoriais (no meu caso, usados como ícones, aos quais me refiro por meio de elementos <img> ), uso um método de recoloração diferente. Embora a pesquisa tenha mostrado que as pessoas não gostam de inversão de fotos, ela funciona muito bem para a maioria dos ícones. Mais uma vez, uso variáveis CSS para determinar o grau de inversão nos estados normal e : hover .

O ícone está invertido no modo escuro:

Ícone no modo claro:

observe como, novamente, eu apenas inverto os ícones em dark.css, mas não em light.css , e como : hover obtém diferentes intensidades de inversão em dois casos para fazer o ícone parecer um pouco mais escuro ou um pouco mais claro, dependendo do modo selecionado pelo usuário.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*=".svg"] {
  filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*=".svg"]:hover {
  filter: var(--icon-filter_hover);
}

Use currentColor para SVG embutido

Em vez de usar filtros inversos para imagens SVG embutidas, você pode adicionar a palavra-chave currentColor , que é o valor da cor do elemento.

Isso permite que você defina um valor de cor para propriedades que não o recebem por padrão. Na verdade, se currentColor for usado como o valor para os atributos de preenchimento ou traço SVG, ele obtém seu valor da propriedade de cor herdada. Isso também funciona para <svg> <use href = "…"> </svg> , então você pode ter recursos separados e currentColor ainda será aplicado no contexto. Observe que isso só funciona para inline ou <use href = "...">SVG, mas não para SVG, que são chamados de imagens src ou via CSS. Mais detalhes aqui .

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Transições suaves entre modos

Mudar de escuro para claro ou vice-versa pode ser suavizado devido ao fato de que a cor e o fundo são propriedades CSS animáveis . A animação é tão fácil quanto declarar duas transições para duas propriedades. O exemplo abaixo ilustra a ideia geral.

body {
  --duration: 0.5s;
   --timing: ease;
  color: var(--color);
  background-color: var(--background-color);
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}

Design artístico com modo escuro

Embora, por motivos de desempenho de carregamento em geral, eu recomende trabalhar exclusivamente com o esquema preferencial de cores no atributo de mídia dos elementos (e não embutido nas folhas de estilo), há situações em que você pode realmente querer trabalhar com o esquema preferencial de cores embutido em seu HTML- o código. A decoração é exatamente essa situação. Design artístico - o design visual geral da página: como o site afeta o usuário, que sentimentos ele evoca.

No modo escuro, o designer deve decidir qual imagem escolher e se as imagens serão recoloridas.adequado. Usando o elemento <picture>, a imagem exibida <source> pode se tornar dependente do atributo de mídia. No exemplo abaixo, estou mostrando o hemisfério ocidental para o modo escuro e o hemisfério oriental para o modo claro ou, quando nenhuma configuração for especificada, o padrão para o hemisfério oriental de qualquer maneira. As imagens, é claro, apenas ilustram meu exemplo . Ative o modo escuro em seu dispositivo para ver a diferença.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
  <source srcset="eastern.webp" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
  <img src="eastern.webp">
</picture>

Modo escuro desativado

Como mencionado acima, a maioria dos usuários escolhe o Modo escuro com base em seus gostos e preferências estéticas. Alguns usuários gostam de ver a IU do sistema operacional escura e as páginas da web como estão acostumados. Plano de ação: primeiro aguarde o sinal que o navegador envia por meio do esquema de cores preferenciais e, em seguida, permita que os usuários substituam as configurações do sistema, se desejarem.

Elemento personalizado <dark-mode-toggle>

Claro, você mesmo pode criar esse código, mas pode simplesmente usar um elemento pronto (componente da web) que criei especificamente para esse propósito. É chamado de <dark-mode-toggle> e adiciona uma alternância (modo escuro: ligado / desligado) ou alternador de tema (tema: claro / escuro) à sua página que você pode personalizar completamente. A demonstração abaixo mostra o elemento em ação (ah, e usei-o discretamente em todos os outros exemplos acima ).

<dark-mode-toggle
    legend="Theme Switcher"
    appearance="switch"
    dark="Dark"
    light="Light"
    remember="Remember this"
></dark-mode-toggle>

<dark-mode-toggle> no modo claro:

<dark-mode-toggle> no modo escuro:

experimente clicar ou tocar nos controles do modo escuro no canto superior direito da demonstração abaixo. Se você marcar as caixas no terceiro e quarto controles, veja como sua escolha de modo é lembrada mesmo durante as recargas de página. Isso permite que seus visitantes mantenham o sistema operacional no modo escuro, mas aproveitem o site no modo claro ou vice-versa.

Conclusão

Trabalhar e manter o Modo escuro é divertido! Novas possibilidades de design estão se abrindo. Escolher um modo escuro pode deixar seu usuário mais feliz. Sim, existem armadilhas, testes rigorosos são necessários, mas o modo escuro é uma ótima oportunidade para mostrar que você se preocupa com seus usuários. As práticas recomendadas mencionadas neste artigo e um hack de vida como o elemento <dark-mode-toggle> personalizado devem ajudá-lo a criar um modo escuro incrível.

Links Úteis

Consulta de mídia de esquema de cores preferenciais :

Esquema de cores meta tag :

dark mode:

Modo escuro: Olá escuridão, meu velho amigo