Como ativar o modo escuro em sites automaticamente

08/04/2024

Como ativar o modo escuro em sites automaticamente

Introdução

Este artigo tem por objetivo demonstrar a implementação do modo escuro em páginas web. Através de um exemplo prático, mostraremos como fazer sua página se adaptar automaticamente às preferências de cor do sistema do usuário, alternando entre temas claro e escuro.

Código Pronto para Uso

Apresentamos abaixo o código completo necessário para tornar uma página web adaptativa ao modo escuro. Este exemplo utiliza CSS para definir cores específicas para os modos claro e escuro, ajustando-se automaticamente de acordo com a preferência do sistema operacional do usuário.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Adaptativa ao Modo Escuro</title>
    <style>
        :root {
            /* Cores para o tema claro */
            --background-color: #fafafa;
            --text-color: #444;
            --link-color: #0055cc;
            --title-color: #ff6347;
        }
        
        @media (prefers-color-scheme: dark) {
            :root {
                /* Cores para o modo escuro */
                --background-color: #121212;
                --text-color: #eee;
                --link-color: #4499ff;
                --title-color: #ff9276;
            }
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        a {
            color: var(--link-color);
        }

        h1 {
            color: var(--title-color);
        }

        .container {
            max-width: 720px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Página Adaptativa ao Modo Escuro</h1>
        <p>
            Esta página altera automaticamente suas cores com base na preferência
            de Modo Escuro do sistema do usuário. Experimente mudar entre os modos
            claro e escuro nas configurações do seu sistema para ver a mudança em
            ação!
        </p>
        <p>Descubra mais sobre a implementação do <a href="#">Modo Escuro</a>.</p>
    </div>
</body>
</html>

Explicando o Código

Nesta seção, detalharemos o código fornecido, dividindo-o em partes para explicar a funcionalidade de cada trecho.

Definição das Cores Base e Detecção do Modo Escuro

Inicialmente, definimos variáveis CSS no escopo :root para estabelecer as cores padrão do tema claro. Utilizamos a media query @media (prefers-color-scheme: dark) para detectar se o usuário prefere o modo escuro. Se sim, sobrescrevemos as variáveis com cores apropriadas para o tema escuro. Isso permite que a página se adapte automaticamente ao tema escolhido pelo usuário no sistema operacional.


:root {
    /* Cores para o tema claro */
    --background-color: #fafafa;
    --text-color: #444;
    --link-color: #0055cc;
    --title-color: #ff6347;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Cores para o modo escuro */
        --background-color: #121212;
        --text-color: #eee;
        --link-color: #4499ff;
        --title-color: #ff9276;
    }
}

Aplicando as Cores Definidas

Depois de definir as variáveis de cor para os modos claro e escuro, aplicamos essas cores aos elementos da página usando CSS. Essas variáveis são usadas para estilizar o fundo da página, o texto, os links e os títulos.


body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

a {
    color: var(--link-color);
}

h1 {
    color: var(--title-color);
}

.container {
    max-width: 720px;
    margin: auto;
}

Melhores Práticas para o Modo Escuro

Implementar o modo escuro de forma eficaz requer atenção a detalhes específicos de design. Aqui estão algumas práticas recomendadas focadas na escolha das cores e na adaptação do design:

Evite o Preto Puro e o Branco Puro: Prefira um cinza escuro suave, como #121212, para o fundo, em vez de preto puro (#000000). Isso reduz a tensão ocular e melhora a legibilidade. Para textos, use tons mais suaves de branco, como #E0E0E0, ao invés de branco puro (#FFFFFF), para diminuir o brilho.
Reduza a Saturação: Cores muito brilhantes e saturadas podem ser mais agressivas em fundos escuros. Opte por cores mais suaves e menos saturadas para uma melhor experiência visual.
A Inversão de Esquema de Cores Não é Suficiente: Não basta apenas inverter as cores do modo claro. É necessário desenvolver estratégias e paletas específicas para o modo escuro, garantindo uma interface que seja agradável aos olhos.
Teste em Diversas Condições de Iluminação: É importante verificar como seu design de modo escuro se comporta sob diferentes condições de iluminação. Isso garante que seu design seja confortável para visualização em qualquer ambiente.

Conclusão

Implementar o modo escuro em páginas web não só melhora a acessibilidade e o conforto visual dos usuários, mas também alinha seu site às práticas modernas de design. Com o código fornecido, você tem uma base sólida para adaptar suas páginas às preferências de esquema de cores dos usuários de forma automática e elegante.

Este artigo nas redes sociais: Facebook, Twitter/X, LinkedIn, Telegram, Pinterest, Tumblr, Flipboard, Mastodon

Como ativar o modo escuro em sites automaticamente

Veja como ajustar as cores do site de acordo com as preferências do usuário