22.12.2024

Mudando o Tema de Cores do Site com JS usando Variáveis CSS :root

Resposta Rápida

Trocar variáveis CSS para :root com JavaScript é simples e rápido. Você só precisa referenciar document.documentElement (o elemento HTML raiz) e usar o método style.setProperty():

// Mude para o tema claro alterando `--color-var` para '#ff4500'
document.documentElement.style.setProperty('--color-var', '#ff4500');

--color-var é o nome da sua variável, e #ff4500 é o novo valor de cor. Substitua de acordo com suas necessidades.

Flexibilidade em Temas JavaScript

Salvando Configurações do Tema

A opção de preservação da experiência do usuário nos permite manter o tema da interface entre as sessões do navegador. Isso pode ser feito usando localStorage:

// Ative o tema claro, altere o valor de --color-var e salve no localStorage
const novaCor = '#ff4500';
document.documentElement.style.setProperty('--color-var', novaCor);
localStorage.setItem('temaCor', novaCor);

Restaurar as configurações quando o usuário voltar ao site pode ser feito facilmente:

// Seja bem-vindo de volta! Aqui estão as configurações de tema que você usou da última vez:
const corSalva = localStorage.getItem('temaCor');
if (corSalva) {
  document.documentElement.style.setProperty('--color-var', corSalva);
}

Considerando Preferências do Usuário

Leve em conta as preferências dos usuários com temas claros e escuros usando a função window.matchMedia() em JavaScript:

// Todo mundo tem sua escolha. Qual tema você prefere: claro ou escuro?
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // Mude para o tema escuro para amantes do modo noturno
  document.documentElement.style.setProperty('--background-color', '#333');
  document.documentElement.style.setProperty('--text-color', '#fff');
} else {
  // Mude para o tema claro, criando uma atmosfera de dia ensolarado
  document.documentElement.style.setProperty('--background-color', '#fff');
  document.documentElement.style.setProperty('--text-color', '#333');
}

Mudança em Lote de Variáveis

Se você precisar mudar várias variáveis ao mesmo tempo, isso também pode ser feito. Basta reuni-las em um objeto e aplicar em um loop JavaScript:

const coresTema = {
  '--background-color': '#282c34',
  '--text-color': '#f7f7f7',
  '--highlight-color': '#ff4081'
};

// Mude os estilos da interface com um único comando!
Object.entries(coresTema).forEach(([chave, valor]) => {
  document.documentElement.style.setProperty(chave, valor);
});

Visualização

Pense assim:

Sua página HTML é uma 🏠. Nesta casa, existem lâmpadas coloridas 💡, marcadas por variáveis CSS :root.

Controlar essas "lâmpadas" é semelhante a gerenciar variáveis de :root usando JavaScript:

// Acenda a luz PINK! (Uma escolha incomum, mas é sua alavanca de controle)
document.documentElement.style.setProperty('--light-color', '#FF69B4');

Aqui está a mudança dinâmica:

Antes: 🏠 iluminada por lâmpadas 💡[Azul, Verde, Vermelho]

Depois: 🏠 ganha vida na paleta de cores 💡[💗, Verde, Vermelho]

O azul se transforma em rosa ao seu comando!

Usando JavaScript em Todo Seu Potencial: Técnicas Avançadas e Desafios Potenciais

Criando Temas Dinâmicos

Você gostaria de tornar o design do seu site mais interessante, introduzindo novas soluções estilísticas? Adicione-as ao arquivo de estilo "na hora", enriquecendo a interface do usuário usando o método insertRule():

// Adicione um novo estilo com um comando mágico!
const novoEstilo = '--nova-cor-tema: #4a90e2;';
document.styleSheets[0].insertRule(`:root { ${novoEstilo} }`, 0);

Recuperando Valores de Variáveis CSS

Para extrair gentilmente o valor de uma variável existente, use a função getComputedStyle():

// Espiando os estilos. Qual é o valor da nossa cor principal?:
const estilosRoot = getComputedStyle(document.documentElement);
const corPrincipal = estilosRoot.getPropertyValue('--main-color').trim();
// Agora você sabe qual valor está sendo usado para --main-color.

Variáveis Locais para Elementos

Embora :root forneça acesso global, há momentos em que é útil mudar variáveis CSS especificamente para certos elementos:

let botao = document.querySelector('.meu-botao');
botao.style.setProperty('--button-hover-color', '#FF6347');

Aqui, a variável --button-hover-color se aplicará apenas a elementos com a classe .meu-botao.

Usando a Propriedade color-scheme

Você pode utilizar a propriedade color-scheme para alternância automática entre temas claro e escuro:

:root {
    color-scheme: light dark;
}

Com color-scheme, o navegador lidará com a troca de temas por conta própria.

Recursos Úteis

1. Usando Propriedades CSS Personalizadas (Variáveis) - CSS: Cascading Style Sheets | MDN — Familiarize-se com os fundamentos das propriedades CSS personalizadas.
2. JavaScript DOM CSS - W3Schools — Explore ferramentas para gerenciar DOM e estilos em JavaScript: personalize CSS para atender às suas necessidades!
3. Guia Completo para Propriedades Personalizadas | CSS-Tricks — Mergulhe nas complexidades de trabalhar com variáveis CSS no guia do CSS-Tricks.
4. Atualizando uma Variável CSS com JavaScript | CSS-Tricks — Aprenda como aplicar variáveis CSS dinâmicas junto com JavaScript.
5. Estilos e Classes - JavaScript.info — Domine a arte de modificar estilos do documento.
6. Gerando um Número Aleatório Entre Dois Números em JavaScript - Stack Overflow — Experimente e descubra novas soluções nas discussões sobre geração de números aleatórios!

Video

Navigation