Você está em boa companhia com suporte incrível 🤝

Detectar preferência de tema (dark/light)

Detecta o tema preferido do sistema e aplica classes no HTML com suporte a mudanças dinâmicas.

Time Full Services Time Full Services
JavaScript
const mq = window.matchMedia('(prefers-color-scheme: dark)');

function aplicarTema(escuro) {
  document.documentElement.classList.toggle('tema-escuro', escuro);
  document.documentElement.classList.toggle('tema-claro', !escuro);
}

// Aplicar imediatamente
aplicarTema(mq.matches);

// Atualizar ao mudar preferência do sistema
mq.addEventListener('change', (e) => aplicarTema(e.matches));

Seja PRO.

Tenha acesso a snippets de código premium — PHP, JavaScript, CSS e HTML prontos para usar em seus projetos.

Conhecer o plano Pro →