Esquema de cores claro sobre escuro

Da Wikipédia, a enciclopédia livre
Ir para a navegação Saltar para pesquisar
Tema escuro para GNOME
Versões de um site em modo de exibição normal (esquerda) e modo escuro (direita)

Esquema de cores claro sobre escuro — também chamado de modo preto , modo escuro , tema escuro ou modo noturno — é um esquema de cores que usa texto, ícones e elementos gráficos da interface do usuário em um fundo escuro e é frequentemente discutido em termos de design de interface de usuário de computador e web design . Muitos sites e sistemas operacionais modernos oferecem ao usuário um modo de exibição claro no escuro opcional.

Alguns usuários acham as telas do modo escuro mais atraentes e podem reduzir o consumo de energia. [1] A exibição de branco com brilho total consome aproximadamente seis vezes mais energia do que o preto puro em um Google Pixel 2016 , que possui uma tela OLED . [2] A maioria dos sistemas operacionais modernos oferece suporte a um esquema de cores claro sobre escuro opcional. [3]

História

O videogame Zork rodando em uma tela CRT verde sobre preto

Os predecessores das telas de computador modernas, como os oscilógrafos de raios catódicos, os osciloscópios etc., tendiam a traçar gráficos e introduzir outros conteúdos como traços brilhantes em um fundo preto.

Com a introdução de telas de computador, originalmente as interfaces de usuário foram formadas em CRTs como aqueles usados ​​para oscilógrafos ou osciloscópios. O fósforo normalmente era de uma cor muito escura e se iluminava quando o feixe de elétrons o atingia, parecendo branco, verde, azul ou âmbar em um fundo preto, dependendo do fósforo aplicado em uma tela monocromática . As telas RGB continuaram a operar de forma semelhante, usando todos os feixes definidos como "ligados" para formar o branco.

Com o advento do teletexto , foram feitas pesquisas sobre quais cores e combinações de luzes primárias e secundárias funcionavam melhor para esse novo meio. [4] O ciano ou o amarelo no preto eram normalmente considerados ótimos a partir de uma paleta de preto, vermelho, verde, amarelo, azul, magenta, ciano e branco.

O conjunto de cores oposto, um esquema de cores escuro sobre claro , foi originalmente introduzido nos processadores de texto WYSIWYG para simular tinta no papel e se tornou a norma.

No início de 2018, o designer Sylvain Boyer estendeu o conceito de modo escuro para a interface principal de smartphones com telas OLED para economizar no consumo de energia. [5] [6]

O Firefox e o Chromium têm um tema escuro opcional para todas as telas internas e, em 2019, a Apple anunciou que um modo claro no escuro estaria disponível em todos os aplicativos nativos no iOS 13 e iPadOS . Também será possível que desenvolvedores de terceiros implementem seus próprios temas sombrios. [7]

A Wikipedia tem luz no modo escuro, mas está disponível apenas em seus aplicativos Android e iOS e, portanto, certas extensões do Chromium/Firefox foram feitas para fornecer um modo escuro na Wikipedia.

Em 2019, foi criada uma opção "prefers-color-scheme" para desenvolvedores web front-end , sendo uma propriedade CSS que sinaliza a escolha de um usuário para que seu sistema use um tema de cores claras ou escuras. [8]

Consumo de energia

Esquemas claros em cores escuras requerem menos energia para serem exibidos em telas OLED . Isso afeta positivamente a vida útil da bateria e o consumo de energia. [9]

Embora um OLED consuma cerca de 40% da energia de um LCD exibindo uma imagem principalmente preta, ele pode usar mais de três vezes mais energia para exibir uma imagem com fundo branco, como um documento ou site. [10] Isso pode reduzir a vida útil da bateria e o uso de energia, a menos que seja usado um esquema de cores claro sobre escuro. O uso de energia reduzido a longo prazo também pode prolongar a vida útil da bateria ou a vida útil da tela e da bateria.

A economia de energia que pode ser alcançada usando um esquema de cores claro sobre escuro se deve ao modo como as telas OLED funcionam: em uma tela OLED, cada subpixel gera sua própria luz e só consome energia ao gerar luz. Isso contrasta com o funcionamento de um LCD: em um LCD, os subpixels bloqueiam ou permitem que a luz de uma luz de fundo LED sempre ligada (aceso) passe.

Os esquemas de cores " AMOLED Black" (que usam preto puro em vez de cinza escuro) não economizam necessariamente mais energia do que outros esquemas de cores claro sobre escuro que usam cinza escuro em vez de preto, pois o consumo de energia em uma tela AMOLED diminui proporcionalmente o brilho médio dos pixels exibidos. Embora seja verdade que o preto AMOLED economize mais energia do que o cinza escuro, as economias de energia adicionais geralmente são insignificantes; O preto AMOLED fornecerá apenas uma economia de energia adicional de menos de 1%, por exemplo, sobre o cinza escuro usado no tema escuro dos aplicativos Android oficiais do Google. [11] Em novembro de 2018, o Google confirmou que o modo escuro no Android economizou a vida útil da bateria. [12]

Problemas com a web

Alguns argumentam que um esquema de cores com texto claro em um fundo escuro é mais fácil de ler na tela, porque o brilho geral mais baixo causa menos fadiga ocular. Outros [13] [14] [15] argumentam o contrário. A ressalva é que a maioria das páginas na web são projetadas para fundos brancos; Imagens GIF e PNG com um bit de transparência em vez de canais alfa tendem a aparecer com contornos irregulares, além de causar problemas com outros elementos gráficos.

Existe um prefers-color-schemerecurso de mídia no CSS , para detectar se o usuário solicitou o esquema de cores claras ou escuras e atender o esquema de cores solicitado. Ele pode ser indicado a partir da preferência do sistema operacional do usuário ou de um agente do usuário . [8] [16]

Exemplo de CSS:

@ media  ( prefere esquema de cores :  dark )  { 
    body  { 
        color :  #ccc ; 
        fundo :  #222 ; 
    } 
}

Exemplo de JavaScript: [17]

if  ( window . matchMedia ( '(prefere esquema de cores: escuro)' ). matches )  { 
    dark (); 
}

Veja também

Referências

  1. ^ "O modo escuro é mais fácil para os olhos e para a bateria" . 21 de novembro de 2018.
  2. Emily Price (11 de novembro de 2018). "Use o modo escuro para conservar a energia da bateria do seu telefone" . Lifehacker . Recuperado 2021-03-20 .
  3. ^ David Murphy. "Abrace o mal ativando o modo escuro em todos os aplicativos" . Lifehacker . Recuperado 2020-11-15 .
  4. ^ Petterson, Rune (março de 1985). "Uso das Cores no Teletexto e Videotex" . ResearchGate .{{cite web}}: CS1 maint: url-status (link)
  5. ^ Wilson, Marcos. "Esta interface do usuário do smartphone economiza sua bateria (e parece elegante AF)" . Empresa Rápida .
  6. ^ Duong, Amy. "Sylvain Boyer projeta o telefone Friendlui com elementos orgânicos" . Caçador de tendências .
  7. ^ Porter, Jon (2019-06-03). "O modo escuro está chegando ao iOS 13" . A Verge . Recuperado 2019-06-05 .
  8. ^ a b "prefere-color-scheme - CSS: Cascading Style Sheets | MDN" . Documentos da Web MDN . Recuperado 2021-03-18 .{{cite web}}: CS1 maint: url-status (link)
  9. ^ Gottsegen, Gordon. "Usar o modo escuro do Android melhora a vida útil da bateria, confirma o Google" . CNET .
  10. ^ Stokes, Jon. (2009-08-11) Em setembro, o OLED não está mais "a três a cinco anos de distância" Arquivado em 2012-01-25 na Wayback Machine . Arstechnica. com. Recuperado em 2011-10-04.
  11. ^ Raga, Dylan (27 de junho de 2019). "Não, "AMOLED Black" NÃO economiza mais bateria do que Dark Gray" . XDA .
  12. ^ Welch, Chris (2 de novembro de 2018). "O Google confirma que o modo escuro é uma grande ajuda para a duração da bateria no Android" . A Verge .
  13. ^ "Ama o modo escuro? É por isso que você ainda pode querer evitá-lo" . Autoridade Android . 2020-06-29 . Recuperado 2020-09-12 .
  14. ^ Clarke, Laurie (2019-07-30). "O modo escuro não é tão bom para seus olhos quanto você acredita" . Com fio Reino Unido . ISSN 1357-0978 . Recuperado 2020-09-12 . 
  15. ^ Budiu, Raluca (2 de fevereiro de 2020). "Modo escuro vs. Modo claro: qual é melhor?" . nngroup . com .
  16. ^ Walsh, David (2019-01-28). "prefers-color-scheme: CSS Media Query" . Blog David Walsh . Recuperado 2021-03-18 .
  17. ^ "Window.matchMedia() - APIs da Web | MDN" . desenvolvedor.mozilla.org . Recuperado 2021-03-18 . O método matchMedia() da interface Window retorna um novo objeto MediaQueryList que pode ser usado para determinar se o documento corresponde à string de consulta de mídia, bem como para monitorar o documento para detectar quando ele corresponde (ou deixa de corresponder) a essa consulta de mídia{{cite web}}: CS1 maint: url-status (link)