Change the site color in one click!

Asked

Viewed 962 times

1

Good people! I have a button with 5 buttons, when clicking these buttons, the color of the site will change, I was doing this process to change the color in Javascript, but I do not find it very feasible... What’s the best way to do this? Make 5 copies of the original css document by changing only colors and making Rigger with js? What’s the best way to do that, guys?

javascript html jquery css

  • permanent change?

  • Yes, at least until the user clicks another button to change to another color, or until the user refreshes the page.

  • So it’s not permanent, you can just use Jquery and change when click, when update it goes back to normal

  • Thank you very much.

  • I’ll post an example

2 answers

1


I think that the best thing to do would be to create classes for each color (e.g., dark, light, default) and when you click the button changes only the class of the parent element, the rest is already set inside.

ex:

var dark = document.getElementById('btnDark');
var light = document.getElementById('btnLight');
var initial = document.getElementById('btnInitial');
var body = document.querySelector('body');
dark.onclick = function(){
 body.className = "dark";
}

light.onclick = function(){
 body.className = "light";
}

initial.onclick = function(){
 body.className = "";
}
.dark{
background:#000;
color:#fff;
}

.light{
background:#fff;
color:#4b4b4b;
}
<body>
  <h2>Lorem Ipsum é simplesmente</h2>
  <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica.</p>
  <button id="btnDark">Dark</button>
  <button id="btnLight">Light</button>
  <button id="btnInitial">Default</button>
</body>

Use Sass to create classes, it would make it much easier.

PS: In the above example I didn’t use any library.

0

With Jquery:

<button id="red">Vermelho</button>
<button id="green">Verde</button>
<button id="blue">Azul</button>
<script type="text/javascript">
    $('button').click(function(){
        $('body').css('background-color',$(this).attr('id'));
    });
</script>
  • 1

    I did that, but the problem I’m having now is that, I have an H2 title, that H2 has an after pseudo element, like I change the color of the pseudo element of H2 with jquery?

  • 1

    @Nelsonpacheco Not possible. What you can do is create a CSS code, for example: .your_class::after { /* Your Code */ } and then use addClass or toggle to change the CSS.

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.