M

MLOG

Português

Explore o poder das media queries e propriedades personalizadas do CSS para criar temas claros e escuros automáticos que se adaptam às preferências do usuário, melhorando a acessibilidade e o apelo visual para um público global.

Função Light-Dark do CSS: Adaptação Automática de Tema para uma Web Global

No mundo globalmente conectado de hoje, os sites precisam ser acessíveis e visualmente atraentes para usuários de diversas origens e preferências. Uma das maneiras mais eficazes de alcançar isso é através da adaptação automática de temas, oferecendo especificamente temas claros e escuros que se ajustam com base nas configurações do sistema do usuário. Este post de blog irá guiá-lo na implementação dessa funcionalidade usando media queries e propriedades personalizadas do CSS, garantindo uma experiência de navegação contínua e confortável para seu público internacional.

Por que Implementar Temas Claros e Escuros Automáticos?

Existem várias razões convincentes para incorporar a adaptação automática de temas em seus projetos web:

Como Implementar a Adaptação Automática de Tema com CSS

O cerne da adaptação automática de tema está na prefers-color-scheme media query. Esta media query do CSS permite que você detecte o esquema de cores preferido do usuário (claro ou escuro) e aplique os estilos correspondentes.

Passo 1: Defina Propriedades Personalizadas (Variáveis CSS)

Comece definindo propriedades personalizadas (variáveis CSS) para armazenar os valores de cor para seus temas claro e escuro. Isso facilita a alternância entre temas, simplesmente atualizando os valores das variáveis.


:root {
  --background-color: #ffffff; /* Fundo do tema claro */
  --text-color: #000000; /* Texto do tema claro */
  --link-color: #007bff; /* Link do tema claro */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Fundo do tema escuro */
    --text-color: #ffffff; /* Texto do tema escuro */
    --link-color: #66b3ff; /* Link do tema escuro */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Neste exemplo, definimos variáveis para a cor de fundo, cor do texto, cor do link e cores do botão. O seletor :root aplica essas variáveis a todo o documento. A media query @media (prefers-color-scheme: dark) então substitui essas variáveis com valores do tema escuro quando o usuário configurou seu sistema para o modo escuro.

Passo 2: Aplique Propriedades Personalizadas aos Seus Estilos

Em seguida, aplique essas propriedades personalizadas aos seus estilos CSS para controlar a aparência dos elementos do seu site.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Transição suave */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Aqui, estamos usando a função var() para acessar os valores de nossas propriedades personalizadas. Também adicionamos uma propriedade transition ao elemento body para criar uma transição suave entre os temas.

Passo 3: Teste e Refinamento

Teste exaustivamente sua implementação em diferentes navegadores e sistemas operacionais. Navegadores modernos como Chrome, Firefox, Safari e Edge suportam totalmente a media query prefers-color-scheme. Você pode alternar entre os modos claro e escuro nas configurações do seu sistema operacional para ver as alterações refletidas em seu site.

Técnicas Avançadas e Considerações

Fornecendo um Interruptor de Tema Manual

Embora a adaptação automática de tema seja um ótimo ponto de partida, alguns usuários podem preferir substituir manualmente as configurações de seus sistemas. Você pode fornecer um interruptor de tema manual usando JavaScript e armazenamento local (local storage).

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Padrão para automático

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Aplica o tema inicial no carregamento da página
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Se definido como automático, permite que o prefers-color-scheme decida
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Adicione o seguinte CSS junto com o CSS anterior. Observe a substituição manual:


body.light-theme {
  --background-color: #ffffff; /* Fundo do tema claro */
  --text-color: #000000; /* Texto do tema claro */
  --link-color: #007bff; /* Link do tema claro */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Fundo do tema escuro */
  --text-color: #ffffff; /* Texto do tema escuro */
  --link-color: #66b3ff; /* Link do tema escuro */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Este trecho de código adiciona um botão que permite aos usuários alternar entre os temas claro, escuro e automático. O tema selecionado é armazenado no armazenamento local para que persista entre os carregamentos da página.

Manuseio de Imagens e SVGs

Algumas imagens e SVGs podem não ficar bem em ambos os temas, claro e escuro. Você pode usar media queries CSS para exibir condicionalmente diferentes versões desses ativos.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Este trecho de código mostra uma imagem (com a classe light-mode) no modo claro e uma imagem diferente (com a classe dark-mode) no modo escuro.

Considerações sobre a Paleta de Cores para Públicos Internacionais

Ao escolher paletas de cores para seus temas claro e escuro, esteja ciente das associações culturais e das considerações de acessibilidade. Aqui estão algumas diretrizes gerais:

Considerações de Desempenho

Embora a implementação da adaptação automática de temas seja relativamente simples, é importante considerar o potencial impacto no desempenho. Evite usar seletores CSS ou animações excessivamente complexos que possam retardar a renderização. Além disso, certifique-se de que suas propriedades personalizadas sejam definidas de forma eficiente para minimizar a sobrecarga das buscas de variáveis.

Aqui estão algumas melhores práticas para otimizar o desempenho:

Melhores Práticas de Acessibilidade

Garanta que seus temas claro e escuro atendam às diretrizes de acessibilidade, como as WCAG (Diretrizes de Acessibilidade para Conteúdo da Web). Isso inclui fornecer contraste de cor suficiente, usar HTML semântico e garantir que todos os elementos interativos sejam acessíveis por teclado.

Aqui estão algumas práticas recomendadas de acessibilidade específicas a seguir:

Exemplos em Diferentes Regiões

Considere estes exemplos de como os temas claro e escuro podem ser adaptados para diversos públicos globais:

Conclusão

A implementação de temas claros e escuros automáticos é um passo crucial para criar uma experiência web mais acessível e amigável para um público global. Ao aproveitar as media queries e as propriedades personalizadas do CSS, você pode adaptar facilmente a aparência do seu site para corresponder às preferências do usuário, reduzir a fadiga ocular e melhorar a acessibilidade para usuários com deficiências visuais. Lembre-se de considerar as associações culturais, as diretrizes de acessibilidade e as considerações de desempenho para garantir uma experiência de navegação contínua e inclusiva para todos.

Ao adotar essas técnicas, você demonstra um compromisso com os princípios modernos de web design e atende às diversas necessidades do seu público internacional, tornando seu site um espaço acolhedor e confortável para todos.