0

Tenho um sistema de mudança de tema no meu blog, porém ele tem uns problemas, tipo, ele não consegue trocar o estilo de uma div.class adicionada por jquery (addClass) nem estilos pseudo elementos (after/before/active etc) e fica tudo desorganizado!!

Estou procurando uma forma nova de fazer isso (OU UMA SOLUÇÃO, se existir) e vou adorar se me derem sugestões...

Amostra simplificada do meu sistema atual no JSFiddle: https://jsfiddle.net/ybocfr7n/1/

Nele eu mostro como funciona, trocando o estilo do elemento, salvando-o no localStorage, e a indiferença ao tentar mudar o tema de um .elemento:after.

HTML

<div class="elemento">Hello World!</div>

<div class="theme-toggle" data-theme="claro">Tema Claro</div>
<div class="theme-toggle" data-theme="escuro">Tema Escura</div>

CSS

/* tema escuro (original) */
.elemento { background-color: #212121 }
.elemento:after {
  content: '';
  position: absolute;
  border:  10px solid green;
  background-color: red;
}
/* tema claro - observe que o pseudo :after não altera */
.elemento[theme="claro"] { background-color: #CCCCCC }
.elemento:after[theme="claro"] {
  content: '';
  position: absolute;
  border: 20px solid orange;
  background-color: red;
}

jQuery

(function ($) {
var $temaclaro = $('.elemento');
var loadTheme = function () {
$temaclaro.attr('theme', localStorage.getItem('theme') || 'default');
};
$('.theme-toggle').click(function () {
localStorage.setItem('theme', $(this).data('theme'));
loadTheme();
});
loadTheme();
} (jQuery));

Desde já agradeço!! ;)

1
  • Bom dia! Cara, sinceramente não há muitas alternativas... Vc pode usar o .style (js) ou .css(jquery) para mudar estilos através de alguma função Commented 4/12/2018 às 10:07

2 Respostas 2

3

Seu problema é mais simples do que parece..

Basicamente onde vc colocou

.elemento:after[theme="claro"]

Deveria ser

.elemento[theme="claro"]:after

Pois vc quer atingir o :after do .elemento quando esse elemento tiver o atributo theme="claro" e não o pseudo-elemento :after que tenha o atributo theme="claro" entende.

Seu código não funciona no Snipper aqui do StackOverflow, acho que devido ao localStorage... Mas veja a imagem

inserir a descrição da imagem aqui

3
  • 1
    Poxa, nem me passou a cabeça tentar colocando ele nessa posição... Commented 4/12/2018 às 18:31
  • 1
    Muito obrigado!!! Commented 4/12/2018 às 18:32
  • Sem problemas, estamos ai para ajudar rss.
    – hugocsl
    Commented 4/12/2018 às 18:33
0

Complementado a pergunta hoje em dia podemos utilizar variáveis css e alterar com o javascript, exemplo:

function trocarCor () {
  document.body.style.setProperty('--color-primary', 'green')
}
:root {
  --color-primary: red;
}

.color-primary {
  color: var(--color-primary) !important
}
<div class="color-primary">Testando</div>

<button onclick="trocarCor()">Trocar cor</button> 

Assim sendo possível ter vários temas personalizado e mais importante dinâmicos apenas trocando o valor da variável css.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .