<div class="wrapper">
  <span class='title'>Colors</span>
  <div class="colors_list">
    <div class="colors green"></div>
    <div class="colors grey"></div>
    <div class="colors orange"></div> 
    <div class="colors blue"></div>
    <div class="colors red"></div>
    <div class="colors black"></div> 
  </div>
  <div class="cog">
    <img src="https://svgshare.com/i/VZx.svg" alt="" width='25' height='25'>
  </div>
</div>

<div class="text">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate, beatae.
</div>

* {
  box-sizing: border-box;
  font-family: 'Roboto', Arial;
}

.wrapper {
  width: 110px;
  background-color: #161a1e;
  padding: 10px;
  border-radius: 0 15px 15px 0;
  text-align: center;
  position: fixed;
  left: -100px;
  transition: 0.7s all;
}

.wrapper::after {
  content: '';
  
}

.cog {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 30px;
  right: -35px;
  background-color: #161a1e;
  border-radius: 0 15px 15px 0;
  cursor: pointer;
}

.cog img {
      animation: rotate 3s infinite linear;
}

.wrapper:hover {
  left: 0;
  transition: 0.7s all;
}

@keyframes rotate {
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}

.title {
  display: inline-block;
  color: white;
  font-family: Roboto, Arial, sans-serif;
  margin: 0 0 10px 0;
}

.colors_list {
  display: flex;
  justify-content: space-around;
  align-items: space-between;
  flex-wrap: wrap;
}

.colors_list div {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-bottom: 10px;
  cursor: pointer;
}

.colors_list div:nth-last-child(1) {
  margin-bottom: 0px;
}

.colors_list div:nth-last-child(2) {
  margin-bottom: 0px;
}

.green {
  background-color: green;
}

.grey {
  background-color: grey;
}

.orange {
  background-color: orange;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.black {
  background-color: black;
}

.text {
  text-align: center;
  font-size: 24px;
}

const theme = document.querySelector('body');
const btns = document.querySelectorAll('.colors');
const text = document.querySelector('.text');

setColor('color', '#fff');
setColor('text', '#000');

function setColor(atr, value) {
  if (atr == 'color') {
    if (localStorage.getItem(atr)) {
      theme.style.backgroundColor = `${localStorage.getItem(atr)}`;
    } else {
      theme.style.backgroundColor = value;
      localStorage.setItem(`${atr}`, value);
    }
  } else if (atr == 'text') {
    if (localStorage.getItem(atr)) {
      text.style.color = `${localStorage.getItem(atr)}`;
    } else {
      text.style.color = value;
      localStorage.setItem(`${atr}`, value);
    }
  }
}

function getColor(color, colorText) {
  theme.style.backgroundColor = color;
  text.style.color = colorText;
  localStorage.setItem('color', color);
  localStorage.setItem('text', colorText);
}

btns.forEach(function (btn) {
  btn.addEventListener('click', function (e) {
    const color = e.currentTarget.classList;

    if (color.contains('green')) {
      getColor('#47A846', '#00ccff');
    } else if (color.contains('grey')) {
        getColor('#6C757D', '#1eed28');
    } else if (color.contains('orange')) {
        getColor('#F26B38', '#1400ff');
    } else if (color.contains('blue')) {
        getColor('#00508a', '#00efbc');
    } else if (color.contains('red')) {
        getColor('#B22222', '#ffea37');
    } else if (color.contains('black')) {
        getColor('#000000', '#fff');
    }
  });
});