Introdução

O modo escuro é uma configuração de exibição que usa um fundo escuro com texto e elementos claros. Ganhou popularidade porque tem boa aparência e oferece vários benefícios práticos.

Os benefícios do modo escuro incluem:

1. Redução da fadiga ocular: O modo escuro pode ser mais agradável para os olhos, especialmente em ambientes com pouca luz, pois reduz a quantidade de luz brilhante emitida pelas telas.
2. Maior vida útil da bateria em telas OLED: Em telas OLED (Diodo Emissor de Luz Orgânico), o modo escuro pode economizar bateria porque os pixels pretos são essencialmente desligados, consumindo menos energia em comparação com a exibição de cores brilhantes.

Neste tutorial, abordaremos como mudar seu site para o modo escuro usando CSS e JavaScript. Começaremos com um modelo simples de página da web com tema claro e o transformaremos em um site com modo claro/escuro alternável, permitindo aos usuários alternar suavemente entre temas claros e escuros.

Configurando o Projeto

Vamos começar com um modelo simples de página da web com tema leve. Em seguida, vamos transformá-lo em um site com modo claro/escuro alternável, permitindo aos usuários alternar entre temas claros e escuros.

Implementando estilos de modo escuro

Escolhendo as cores

O primeiro passo é listar todas as cores que estamos usando e escolher uma versão com tema escuro para cada uma. Na tabela abaixo, listei todas as cores da página e suas versões escuras correspondentes.

Variáveis ​​personalizadas

Em seguida, usamos variáveis ​​CSS para criar uma classe escura e clara no corpo com essas variáveis.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

Você pode ler sobre variáveis ​​CSS em Usando propriedades personalizadas CSS. Essencialmente, são entidades definidas por dois travessões (--) que armazenam valores para reutilização em um documento. As variáveis ​​CSS facilitam a manutenção, permitindo que as alterações sejam atualizadas automaticamente.

Cores dos Elementos Dinâmicos

Usamos a função CSS var() para inserir os valores das variáveis ​​CSS. Dessa forma, podemos alterar dinamicamente a cor e atualizar uma variável para refletir as alterações em todo o documento, em vez de alterar cada uma manualmente.

Aqui está um exemplo do elemento nav e seus filhos:

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

Alternar modo claro/escuro com JavaScript

Agora podemos mudar a classe do corpo para escuro ou claro para mudar o tema. Primeiro, adicione um botão ao cabeçalho e defina a função changeTheme() para seu evento de clique:

Defina a função changeTheme() que alterna a classe do corpo:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

E agora os usuários podem alterar o tema do site clicando no botão.

Você pode ver o código do tutorial no CodePen abaixo

Próximas etapas

Além disso, você pode armazenar a preferência de tema do usuário no armazenamento local. Atualizar a função changeTheme() para salvar o tema selecionado e verificá-lo quando a página carregar garantirá que a escolha do usuário seja lembrada e aplicada automaticamente em sua próxima visita.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

Adicionando o esquema de cores: escuro; propriedade quando no tema escuro também pode garantir que alguns elementos, que de outra forma seriam difíceis de estilizar, terão seus estilos alterados pelo navegador.

body.dark {
  color-scheme: dark;
}

Conclusão

Concluindo, adicionar o modo escuro ao seu site pode melhorar a experiência do usuário, reduzindo o cansaço visual e prolongando a vida útil da bateria em telas OLED. Seguindo este guia, você pode configurar facilmente uma alternância de modo claro/escuro usando CSS e JavaScript. Personalize o modo escuro para se adequar ao seu design.

Compartilhe suas implementações ou faça perguntas nos comentários abaixo.