Button that changes the site color

Question

I am trying to make on my website a button that is Sticky, by clicking on that button, it makes a Collapse right and shows a container with a certain number of colors available for the user to choose, the user when choosing the color pallette, the site will change the layout color to the pallette chosen by the user...

My code so far...

HTML:

<!---- color changer ---->

    <div class="color-chg">
        <a href="#" class="color-btn"><i class="ion-ios-settings-strong"></i></a> 
    </div>

CSS:

.color-chg {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
    z-index: 2000;
}

/* Stylyng the icon */
.color-chg a {
  display: block;
  text-align: center;
  padding: 30px;
  transition: all 0.3s ease;
  color: white;
  font-size: 100%;
}

.color-chg a:hover {
  background-color: white;
    color: #74c8d2;
    border: 2px solid #74c8d2;
}

.color-btn {
    border: 2px solid transparent;
  background: #74c8d2;
  color: white;
}

What I want:

Please give me some tips, I have no idea how to do this, I searched, but I can’t find anything on the internet, I’ve been checking the source code of this site, but it doesn’t help much...

Personal thank you!

Answer 1

You can via javascript by clicking on the colors add a class to the body and create a css for each color.

JS:

$(document).ready(function(){$("#azul_bt").click(function(){$("body").toggleClass("skin_azul");

CSS:

body.skin_azul h1 {
    color: blue;
}

It would be a little laborious and the ideal would be to assemble everything already thinking about this transition, however it works.

Answer 2

Face only the part of Collapse with the colors you can do using the position:fixed and transition with right to place the hidden palette outside the screen.

I made a very simple example just on the part of Collapse, the dynamics for it to change the colors of the other elements after clicked I will leave on your own. It uses flex, then whenever you add more colors it will break the line 4 in 4

As I said is a simple example, but with what has CSS ai you can develop this component well.

Look how it turned out:

html, body {
    width: 100%;
    height: 200%;
    margin: 0;
    padding: 0;
}

.cores {
    display: flex;
    width: 200px;
    position: fixed;
    right: -160px;
    top: 20%;
    transition: right 350ms;
}
.btn {
    width: 40px;
    height: 40px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255,0.6);
    font-size: 2rem;
    transition: color 350ms;
    cursor: pointer;
    line-height: 0;
}
.btn:hover {
    color: rgba(255, 255, 255,1);
}
#btn {
    display: none;
}
.paleta {
    box-sizing: border-box;
    border: 1px solid black;
    width: 160px;
    margin: 0;
    padding: 1rem;
    background-color: #eee;
    display: flex;
    flex-wrap: wrap
}
.paleta h4 {
    margin: 0 0 0.5em;
    width: 100%;
}
.paleta .box {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #666;
    cursor: pointer;
    opacity: 0.65;
    transition: background-color 350ms;
}
.paleta .box:hover {
    opacity: 1;
}
.paleta .box.red {
    background-color: red;
}
.paleta .box.blue {
    background-color: blue;
}
.paleta .box.green {
    background-color: green;
}
.paleta .box.purple {
    background-color: purple;
}
.paleta .box.orange {
    background-color: orange;
}
.paleta .box.black {
    background-color: black;
}
input:checked + .cores {
    right: 0;
}
input:checked + .cores > .btn {
    color: rgba(255, 255, 255,1);
}

<input type="checkbox" id="btn">
<div class="cores">
    <label for="btn" class="btn" role="checkbox">&#x270E;</label>
    <div class="paleta">
        <h4>Cores</h4>
        <div class="box red"></div>
        <div class="box blue"></div>
        <div class="box green"></div>
        <div class="box purple"></div>
        <div class="box orange"></div>
        <div class="box black"></div>
    </div>
</div>