Publicado em 29 de jun.

Como fazer este efeito?

http://wbruno.com.br/

Logo acima está escrito "black theme" que ao clicar nele parece que muda o css da pagina sem atualiza-la, muda direto. Como faço um desse?

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 29 de jun.

Opa! @José da Silvasauro,

É o link do meu blog! hauhaua :lol:

Cara, é uma mistura de javascript com css.

Qndo você clica "no botão", eu adiciono um class css ao body da página:

<body class="black">

 e tendo essa class, o css faz o restante:

.black { background: #000; }

.black .post time,
.black #main { background: transparent; }

.black input, .black select, .black textarea,
.black #sidebar a,
.black, .black #switch,
.black h1 a, .black h2 a { color: #ddd; }

.black .post time,
.black h1, .black h2, .black h3, .black h4, .black h5, .black h6,
.black a { color: #00aaff; }
...

Fiz um post "falando sobre isso":

http://wbruno.com.br/2012/03/13/turn-lights-meu-tema-em-fundo-preto/

Qualquer coisa, é só perguntar.

Wanderson Valerio· 29 de jun.

É mais ou menos assim:

http://www.upinside.com.br/video-aulas/mudando-o-background-do-site-dinamicamente-com-javascript

José da Silvasauro· 29 de jun.

Bruno como cria o botão para ficar trocando? Coloquei aqui fico tudo preto direto.

William Bruno· 29 de jun.

O botão tem que ficar "trocando", colocando e removendo a class:

	var body = jQuery('body');

jQuery('#switch').click(function(){
	var $this = jQuery( this );

	if( body.hasClass('black') )
	{
 body.removeClass('black');
 $this.html('black theme');
	}
	else
	{
 body.addClass('black');
 $this.html('white theme');
	}
});

José da Silvasauro· 16 de jul.

Meu botão não está funcionando. Como faço para uma imagem ou um texto fazer está ação?

Pessoal me ajuda ai! ta tudo certinho mais quando eu clico no botão nada acontece....