Adicionar Tema Escuro (Dark Mode)

Mar 9, 2025 by ADMIN 34 views

Introdução

O tema escuro, também conhecido como Dark Mode, é uma característica que tem ganhado popularidade nos últimos anos. Ele pode melhorar a experiência do usuário, especialmente em ambientes com pouca luz. Neste artigo, vamos aprender como implementar um tema escuro em um projeto web, respeitando a preferência do sistema do usuário e salvando a preferência do usuário no localStorage.

Por que o Tema Escuro é Importante?

O tema escuro pode ser especialmente útil em ambientes com pouca luz, como:

Ambientes de trabalho: Em escritórios ou lojas, o tema escuro pode ajudar a reduzir a fadiga visual e melhorar a concentração.
Dispositivos móveis: Em dispositivos móveis, o tema escuro pode ajudar a reduzir a consumo de bateria e melhorar a experiência do usuário.
Pessoas com problemas de visão: O tema escuro pode ser especialmente útil para pessoas com problemas de visão, como a cegueira noturna.

Criar Variáveis CSS para Cores

Para implementar um tema escuro, precisamos criar variáveis CSS para cores. Isso nos permitirá mudar facilmente entre o tema claro e escuro.

:root {
  --cor-fundo-claro: #f0f0f0;
  --cor-fundo-escuro: #2f2f2f;
  --cor-texto-claro: #333;
  --cor-texto-escuro: #fff;
}

Implementar Alternância entre Tema Claro e Escuro

Agora que temos as variáveis CSS para cores, podemos implementar a alternância entre o tema claro e escuro. Isso pode ser feito criando um botão que mude as variáveis CSS.

<button id="botao-tema">Mudar Tema</button>

#botao-tema {
  position: fixed;
  top: 10px;
  right: 10px;
}

const botaoTema = document.getElementById('botao-tema');

botaoTema.addEventListener('click', () => {
  const temaEscuro = document.body.classList.contains('tema-escuro');
  document.body.classList.toggle('tema-escuro');

  if (temaEscuro) {
    document.body.style.backgroundColor = getComputedStyle(document.body).getPropertyValue('--cor-fundo-claro');
    document.body.style.color = getComputedStyle(document.body).getPropertyValue('--cor-texto-claro');
  } else {
    document.body.style.backgroundColor = getComputedStyle(document.body).getPropertyValue('--cor-fundo-escuro');
    document.body.style.color = getComputedStyle(document.body).getPropertyValue('--cor-texto-escuro');
  }
});

Respeitar a Preferência do Sistema do Usuário (prefers-color-scheme)

O prefers-color-scheme é um recurso do CSS que permite que os usuários especifiquem a preferência de cor do sistema. Nós podemos usar isso para determinar se o usuário prefere o tema claro ou escuro.

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo-claro: #2f2f2f;
    --cor-fundo-escuro: #f0f0f0;
    --cor-texto-claro: #fff;
    --cor-texto-escuro: #333;
  }
}

Salvar a Preferência do Usuário no localStorage

Para salvar a preferência do usuário no localStorage, precisamos criar um evento que seja acionado quando o usuário muda o tema.

const botaoTema = document.getElementById('botao-tema');

botaoTema.addEventListener('click', () => {
  const temaEscuro = document.body.classList.contains('tema-escuro');
  document.body.classList.toggle('tema-escuro');

  if (temaEscuro) {
    document.body.style.backgroundColor = getComputedStyle(document.body).getPropertyValue('--cor-fundo-claro');
    document.body.style.color = getComputedStyle(document.body).getPropertyValue('--cor-texto-claro');
  } else {
    document.body.style.backgroundColor = getComputedStyle(document.body).getPropertyValue('--cor-fundo-escuro');
    document.body.style.color = getComputedStyle(document.body).getPropertyValue('--cor-texto-escuro');
  }

  localStorage.setItem('tema', document.body.classList.contains('tema-escuro') ? 'escuro' : 'claro');
});

if (localStorage.getItem('tema') === 'escuro') {
  document.body.classList.add('tema-escuro');
} else {
  document.body.classList.remove('tema-escuro');
}

Conclusão

Pergunta 1: O que é o tema escuro (Dark Mode)?

Resposta: O tema escuro, também conhecido como Dark Mode, é uma característica que permite que os usuários mudem a cor de fundo e de texto de um aplicativo ou site para uma cor mais escura, reduzindo a fadiga visual e melhorando a experiência do usuário.

Pergunta 2: Por que o tema escuro é importante?

Resposta: O tema escuro é importante porque pode ser especialmente útil em ambientes com pouca luz, como escritórios ou lojas, e pode ajudar a reduzir a fadiga visual e melhorar a concentração. Além disso, o tema escuro pode ser especialmente útil para pessoas com problemas de visão, como a cegueira noturna.

Pergunta 3: Como criar variáveis CSS para cores?

Resposta: Para criar variáveis CSS para cores, você pode usar a sintaxe :root { --cor-fundo-claro: #f0f0f0; --cor-fundo-escuro: #2f2f2f; --cor-texto-claro: #333; --cor-texto-escuro: #fff; }. Isso permite que você defina as cores de fundo e de texto para o tema claro e escuro.

Pergunta 4: Como implementar alternância entre tema claro e escuro?

Resposta: Para implementar alternância entre tema claro e escuro, você pode criar um botão que mude as variáveis CSS. Isso pode ser feito usando JavaScript e a API do DOM.

Pergunta 5: Como respeitar a preferência do sistema do usuário (prefers-color-scheme)?

Resposta: Para respeitar a preferência do sistema do usuário (prefers-color-scheme), você pode usar a sintaxe @media (prefers-color-scheme: dark) { :root { --cor-fundo-claro: #2f2f2f; --cor-fundo-escuro: #f0f0f0; --cor-texto-claro: #fff; --cor-texto-escuro: #333; } }. Isso permite que você defina as cores de fundo e de texto para o tema claro e escuro com base na preferência do sistema do usuário.

Pergunta 6: Como salvar a preferência do usuário no localStorage?

Resposta: Para salvar a preferência do usuário no localStorage, você pode usar a API do localStorage e armazenar a preferência do usuário em uma chave específica. Isso permite que você recupere a preferência do usuário no futuro e aplique as configurações correspondentes.

Pergunta 7: Qual é a diferença entre tema escuro e modo noturno?

Resposta: A diferença entre tema escuro e modo noturno é que o tema escuro é uma característica que permite que os usuários mudem a cor de fundo e de texto de um aplicativo ou site para uma cor mais escura, enquanto o modo noturno é uma característica que permite que os usuários mudem a cor de fundo e de texto de um aplicativo ou site para uma cor mais escura e também reduz a intensidade da luz do dispositivo.

Pergunta 8: Como implementar tema escuro em um aplicativo móvel?

Resposta: Para implementar tema escuro em um aplicativo móvel, você pode usar a API do sistema operacional e a API do aplicativo para mudar a cor de fundo e de texto do aplicativo. Além disso, você pode usar a API do localStorage para salvar a preferência do usuário e aplicar as configurações correspondentes.

Pergunta 9: Qual é a vantagem de usar tema escuro em um aplicativo ou site?

Resposta: A vantagem de usar tema escuro em um aplicativo ou site é que ele pode reduzir a fadiga visual e melhorar a experiência do usuário, especialmente em ambientes com pouca luz. Além disso, o tema escuro pode ser especialmente útil para pessoas com problemas de visão, como a cegueira noturna.

Pergunta 10: Como manter a consistência de design com tema escuro?

Resposta: Para manter a consistência de design com tema escuro, você pode usar a mesma paleta de cores e a mesma tipografia que você usou no tema claro. Além disso, você pode usar a mesma estrutura de layout e a mesma organização de conteúdo para garantir que o aplicativo ou site continue a ter a mesma aparência e a mesma experiência do usuário.