Substituindo a configuração do esquema de cores nativo

A implementação de modos escuros tornou-se crucial com a ampla adoção em vários sistemas operacionais. Embora o suporte nativo ao navegador exista por meio da regra de mídia CSS @media (prefers-color-scheme: dark), ele pode não atender totalmente às preferências do usuário ou atender navegadores não suportados, como o Microsoft Edge.

Desacoplando configurações do sistema do tema do site

Para fornecer controle ideal ao usuário, é crucial permitir que os usuários substituam a configuração do esquema de cores do sistema. Isso garante que eles possam escolher o tema de sua preferência para um site específico. Para conseguir isso, uma combinação de variáveis ​​CSS e JavaScript é utilizada.

Configuração CSS

As variáveis ​​CSS definem os parâmetros do tema:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

Variáveis ​​são usadas em toda a folha de estilo para garantir flexibilidade:

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

Implementação de JavaScript

JavaScript desempenha um papel fundamental na detecção de preferências do usuário e na alternância entre temas:

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

A função toggleTheme lida com a troca de tema:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

Este JavaScript garante a detecção automática do tema e permite que os usuários o substituam por uma caixa de seleção:

Conclusão

Ao combinar variáveis ​​CSS e JavaScript, capacitamos os usuários com a capacidade de controlar o esquema de cores de um site, independentemente das configurações do sistema . Essa abordagem garante uma experiência de usuário aprimorada, atendendo às preferências individuais e às limitações de vários navegadores.