<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');
		}
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.