Modo escuro

Versões de um site em modo de exibição normal (esquerda) e modo escuro (direita).

Tema escuro para GNOME.

Em vez de um papel branco, um papel escuro, feito com CoCalc e o documento LaTeX.

Um modo escuro, tema escuro ou modo noturno, é um esquema de cores que utiliza texto, ícones e elementos gráficos da interface do usuário em cores claras sobre um fundo escuro. É frequentemente discutido em termos de design de interface do usuário e web design. Muitos sites e sistemas operacionais modernos oferecem ao usuário um modo de exibição escuro opcional.

Alguns usuários acham que as telas do modo escuro são visualmente mais atraentes e afirmam que podem reduzir o cansaço visual. Exibir o branco com brilho máximo usa cerca de seis vezes mais energia do que o preto puro em um Google Pixel 2016, que tem uma tela OLED. No entanto, as telas de LED convencionais podem não se beneficiar do consumo de energia reduzido; mas se uma tela de LED tiver os recursos de escurecimento parcial, ela ainda se beneficiará do consumo de energia reduzido. A maioria dos sistemas operacionais modernos oferece suporte a um modo escuro opcional.

O videogame Zork rodando em uma tela CRT verde sobre preto.

História

Com a introdução das telas de computador, as interfaces de usuário eram originalmente formadas em tubos de raios catódicos (CRTs), como os usados em oscilógrafos ou osciloscópios. O fósforo normalmente tinha uma cor muito escura e brilhava intensamente quando o feixe de elétrons o atingia, parecendo branco, verde, azul ou âmbar sobre um fundo preto, dependendo do fósforo aplicado em uma tela monocromática.

A Microsoft introduziu um tema escuro na atualização de aniversário do Windows 10 em 2016. Em 2018, a Apple seguiu no macOS Mojave. Em setembro de 2019, o iOS 13 e o Android 10 introduziram modos escuros. Alguns sistemas operacionais fornecem ferramentas para alterar o estado do modo escuro automaticamente ao pôr do sol ou ao nascer do sol.

O Firefox e o Chromium têm um tema escuro opcional para todas as telas internas. Também será possível para desenvolvedores terceirizados implementarem seus próprios temas escuros. Há também uma variedade de complementos de navegador que podem re-tematizar sites com esquemas de cores escuras, também alinhando-se com o tema do sistema.

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

Em julho de 2024, o site móvel da Wikipédia recebeu um modo escuro. O site para desktop também recebeu um modo escuro posteriormente.

Uso de energia

Esquemas de cores claras sobre escuras requerem menos energia para serem exibidos em telas OLED. Isso impacta positivamente a vida útil da bateria e reduz o consumo de energia.

Embora um OLED consuma cerca de 40% da energia de um LCD exibindo uma imagem predominantemente preta, ele pode consumir mais de três vezes mais energia para exibir uma imagem com fundo branco, como um documento ou site. Isso pode levar à redução da vida útil da bateria e ao maior consumo de energia, a menos que seja utilizado um modo escuro. A redução do consumo de energia a longo prazo também pode prolongar a vida útil da bateria ou a vida útil do monitor e da bateria.

Os esquemas de cores "AMOLED Black" (que usam preto puro em vez de cinza escuro) não necessariamente economizam mais energia do que outros esquemas de cores claro-escuro que usam cinza escuro em vez de preto, pois o consumo de energia em uma tela AMOLED diminui proporcionalmente ao brilho médio dos pixels exibidos. Embora seja verdade que o AMOLED Black economiza mais energia do que o cinza escuro, a economia de energia adicional costuma ser insignificante; o AMOLED Black só proporcionará uma economia de energia adicional de menos de 1%, por exemplo, em relação ao cinza escuro usado no tema escuro dos aplicativos oficiais do Google para Android. Em novembro de 2018, o Google confirmou que o modo escuro no Android economizava bateria.

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 menor brilho geral causa menos cansaço visual. Outros argumentam o contrário.

Há um recurso de mídia "prefers-color-scheme" no CSS, para detectar se o usuário solicitou um esquema de cores claro ou escuro e atender ao esquema de cores solicitado. Ele pode ser indicado pela preferência do sistema operacional do usuário ou por um agente do usuário.

Exemplo de CSS:

@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: #222;
    }
}

<span style="background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"></span>

Exemplo de JavaScript:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark();
}

Ver também

• AMOLED
• Blackle.com
• OLED
• Solarizado (esquema de cores)

Notas

• Este artigo foi inicialmente traduzido, total ou parcialmente, do artigo da Wikipédia em inglês cujo título é «Light-on-dark color scheme».