Função CSS Light-Dark: Alternância Automática de Temas para um Público Global

No ambiente web atual, atender às preferências do usuário é fundamental. Um aspecto significativo disso é oferecer a opção de alternar entre temas claros e escuros. Não se trata apenas de estética; trata-se de acessibilidade e redução do cansaço visual, principalmente para usuários em diferentes fusos horários ou que trabalham em diferentes condições de iluminação. A consulta de mídia `prefers-color-scheme` do CSS oferece uma maneira limpa e eficiente de ajustar automaticamente o tema do seu site com base nas preferências do sistema do usuário. Este artigo o guiará na implementação desse recurso para um público global, garantindo uma experiência perfeita e amigável.

Por que implementar a alternância de tema claro/escuro?

Oferecer temas claros e escuros oferece vários benefícios importantes:

• Experiência do usuário aprimorada: muitos usuários acham o modo escuro mais confortável para os olhos, especialmente em ambientes com pouca luz. Por outro lado, o modo claro pode ser preferível em espaços bem iluminados. Fornecer a opção de escolha aumenta a satisfação do usuário.
• Acessibilidade: usuários com deficiência visual podem achar um tema mais acessível que o outro. Dar-lhes a escolha melhora a inclusão.
• Redução do cansaço visual: o modo escuro pode reduzir o cansaço visual, especialmente para usuários que passam longas horas em frente às telas. Isso é particularmente relevante para usuários em diferentes fusos horários que trabalham até tarde da noite.
• Duração da bateria (telas OLED): em dispositivos com telas OLED, usar o modo escuro pode prolongar significativamente a duração da bateria.
• Tendência de design moderno: o modo escuro é uma tendência de design popular e oferecê-lo demonstra que seu site está atualizado e considera as preferências do usuário.

Compreendendo `prefers-color-scheme`

A consulta de mídia `prefers-color-scheme` permite que seu site detecte a configuração de esquema de cores preferida do usuário em seu sistema operacional ou navegador. Ele pode ter três valores possíveis:

• `light`: Indica que o usuário solicitou um tema claro.
• `dark`: Indica que o usuário solicitou um tema escuro.
• `no-preference`: Indica que o usuário não expressou preferência. Este é o valor padrão se o usuário não tiver escolhido explicitamente um tema claro ou escuro.

Você pode usar esta consulta de mídia em seu CSS para aplicar estilos diferentes com base na preferência do usuário.

Etapas de implementação: um guia prático

Aqui está um guia passo a passo para implementar a troca automática de tema claro e escuro usando CSS:

1. Defina propriedades personalizadas CSS (variáveis)

Exemplo:

            
:root {
  --background-color: #ffffff; /* Fundo do modo claro */
  --text-color: #000000; /* Texto do modo claro */
  --link-color: #007bff; /* Cor do link do modo claro */
}

            

              
                Copy
              
            
          

Este código define três propriedades personalizadas: `--background-color`, `--text-color` e `--link-color`. Essas propriedades são inicialmente definidas com valores adequados para um tema claro.

2. Use propriedades personalizadas em seus estilos

Aplique essas propriedades personalizadas em todo o seu CSS para estilizar os elementos do seu site.

Exemplo:

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

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

            

              
                Copy
              
            
          

Este código define o `background-color` do elemento `body` para o valor da propriedade personalizada `--background-color`, a `color` do elemento `body` para o valor da propriedade personalizada `--text-color` e a `color` do elemento `a` (link) para o valor da propriedade personalizada `--link-color`.

3. Implemente a consulta de mídia `prefers-color-scheme`

Agora, use a consulta de mídia `prefers-color-scheme` para redefinir as propriedades personalizadas para o tema escuro.

Exemplo:

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

            

              
                Copy
              
            
          

Este código define uma consulta de mídia que aplica os estilos dentro das chaves somente se a preferência do sistema do usuário estiver definida para o modo escuro. Dentro da consulta de mídia, as propriedades personalizadas são redefinidas com valores adequados para um tema escuro.

4. Lidando com `no-preference`

Embora não seja estritamente necessário, você pode lidar explicitamente com o caso `no-preference` se quiser garantir um tema padrão específico. Se nenhuma preferência for selecionada no sistema operacional, os navegadores geralmente usarão a luz como padrão. No entanto, ser explícito garante que o site seja renderizado da mesma forma em diferentes navegadores.

Exemplo:

            
@media (prefers-color-scheme: no-preference) {
  :root {
    --background-color: #f0f0f0; /* Fundo padrão (cinza claro) */
    --text-color: #333333; /* Texto padrão (cinza escuro) */
  }
}

            

              
                Copy
              
            
          

Neste exemplo, estamos definindo um fundo cinza claro e um texto cinza escuro para usuários que não selecionaram explicitamente um tema.

Exemplo completo

Aqui está um exemplo completo combinando todas as etapas:

            
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
  --header-background-color: #f8f9fa;
  --header-text-color: #212529;
}

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

a {
  color: var(--link-color);
  text-decoration: none;
}

header {
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

h1, h2, h3 {
  margin-top: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
    --link-color: #66b3ff;
    --header-background-color: #212529;
    --header-text-color: #f8f9fa;
  }
}

            

              
                Copy
              
            
          

Indo além: adicionando uma alternância manual

Embora a troca automática de tema seja conveniente, alguns usuários podem preferir escolher manualmente seu tema. Você pode adicionar um botão de alternância ao seu site que permite aos usuários substituir a preferência do sistema.

1. Estrutura HTML

Adicione um botão ou caixa de seleção ao seu HTML para atuar como a alternância de tema.

            
Alternar tema

            

              
                Copy
              
            
          

2. Lógica JavaScript

Use JavaScript para detectar cliques na alternância e atualizar uma classe CSS no elemento `body` (ou qualquer outro elemento pai adequado). Armazene a preferência do usuário em `localStorage` para persistir entre as sessões.

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body; // or document.documentElement
const localStorageKey = 'theme';

// Function to set the theme
function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
  } else {
    body.classList.remove('dark-theme');
  }
  localStorage.setItem(localStorageKey, theme);
}

// Function to get the stored theme
function getStoredTheme() {
  return localStorage.getItem(localStorageKey) || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}

// Set the initial theme
const initialTheme = getStoredTheme();
setTheme(initialTheme);

// Toggle the theme on button click
themeToggle.addEventListener('click', () => {
  const currentTheme = body.classList.contains('dark-theme') ? 'light' : 'dark';
  setTheme(currentTheme);
});

// Listen for system preference changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
    if(localStorage.getItem(localStorageKey) === null) {
        const newColorScheme = event.matches ? "dark" : "light";
        setTheme(newColorScheme)
    }
});

            

              
                Copy
              
            
          

3. Estilo CSS

Modifique seu CSS para aplicar os estilos do tema escuro com base na classe `dark-theme`.

            
.dark-theme {
  --background-color: #121212;
  --text-color: #ffffff;
  --link-color: #66b3ff;
  --header-background-color: #212529;
  --header-text-color: #f8f9fa;
}

            

              
                Copy
              
            
          

Esta abordagem permite que os usuários alternem manualmente os temas, substituindo a preferência do sistema. O `localStorage` garante que a escolha do usuário seja lembrada entre as sessões. O ouvinte de eventos garante que, se o usuário NÃO tiver selecionado manualmente um tema, mas a preferência do sistema mudar, o site responderá adequadamente.

Práticas recomendadas para um público global

Ao implementar a alternância de tema claro/escuro para um público global, considere estas práticas recomendadas:

• Acessibilidade: garanta que ambos os temas atendam às diretrizes de acessibilidade (WCAG). Preste atenção ao contraste de cores e à legibilidade. Ferramentas como o WebAIM Color Contrast Checker (https://webaim.org/resources/contrastchecker/) podem ser úteis.
• Teste do usuário: teste seus temas com usuários de diferentes regiões e culturas para coletar feedback sobre suas preferências e identificar quaisquer problemas potenciais.
• Desempenho: otimize seu CSS para minimizar o impacto no tempo de carregamento da página. Evite seletores complexos e estilos desnecessários.
• Design consistente: mantenha uma estética de design consistente em ambos os temas. Evite transições bruscas ou elementos que pareçam deslocados em um tema ou outro.
• Localização: se seu site for localizado, certifique-se de que o mecanismo de troca de tema também seja localizado. Por exemplo, o texto no botão de alternância de tema deve ser traduzido para o idioma do usuário.

Considerações avançadas

• Animações e transições: Use animações e transições sutis para tornar o processo de troca de tema mais suave e visualmente atraente. Use a propriedade `transition` em CSS.
• Imagens e ícones: Considere usar diferentes versões de imagens e ícones para temas claros e escuros. As imagens SVG são particularmente adequadas para isso, pois suas cores podem ser facilmente modificadas usando CSS.
• Bibliotecas de terceiros: Existem várias bibliotecas e estruturas JavaScript que podem simplificar a implementação da alternância de tema claro/escuro. No entanto, esteja atento às suas dependências e ao potencial impacto no desempenho.
• Renderização do lado do servidor (SSR): Se você estiver usando SSR, certifique-se de que o tema seja renderizado corretamente no servidor. Isso pode exigir a passagem da preferência de tema do usuário do cliente para o servidor.
• Arquiteturas baseadas em componentes: Para aplicativos de página única (SPAs) ou sites construídos com arquiteturas baseadas em componentes como React, Vue ou Angular, aplique classes de tema ou propriedades personalizadas no nível do componente para um controle mais granular.

Conclusão