Paletli Arkaplan Değiştirme (Seçmeli)

seçmeli_arkaplan.html

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<div class="bolum">
	<div class="palet">
		<div class="palet_item_bolum">
			<div data-color="#ffbb33" class="renk_paleti"></div>
			<div data-color="#FF8800" class="renk_paleti"></div>
			<div data-color="#00C851" class="renk_paleti"></div>
			<div data-color="#007E33" class="renk_paleti"></div>
			<div data-color="#33b5e5" class="renk_paleti"></div>
			<div data-color="#0099CC" class="renk_paleti"></div>
			<div data-color="#2BBBAD" class="renk_paleti"></div>
			<div data-color="#00695c" class="renk_paleti"></div>
			<div data-color="#2E2E2E" class="renk_paleti"></div>
			<div data-color="#212121" class="renk_paleti"></div>
		</div>
		<div class="renk_paleti__main"></div>
	</div>
</div>
<style>
body{
    margin: 0px;
}
.bolum {
  width: 100vw;
  height: 100vh;
  -webkit-transition: background .3s;
  transition: background .3s;
}

.palet {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.palet .palet_item_bolum {
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
  -webkit-transition-delay: .4s;
          transition-delay: .4s;
}
.palet.palet__opened .palet_item_bolum {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.palet.palet__opened .renk_paleti {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.palet.palet__opened .renk_paleti:nth-child(1) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.palet.palet__opened .renk_paleti:nth-child(2) {
  -webkit-transform: rotate(36deg);
          transform: rotate(36deg);
}
.palet.palet__opened .renk_paleti:nth-child(3) {
  -webkit-transform: rotate(72deg);
          transform: rotate(72deg);
}
.palet.palet__opened .renk_paleti:nth-child(4) {
  -webkit-transform: rotate(108deg);
          transform: rotate(108deg);
}
.palet.palet__opened .renk_paleti:nth-child(5) {
  -webkit-transform: rotate(144deg);
          transform: rotate(144deg);
}
.palet.palet__opened .renk_paleti:nth-child(6) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.palet.palet__opened .renk_paleti:nth-child(7) {
  -webkit-transform: rotate(216deg);
          transform: rotate(216deg);
}
.palet.palet__opened .renk_paleti:nth-child(8) {
  -webkit-transform: rotate(252deg);
          transform: rotate(252deg);
}
.palet.palet__opened .renk_paleti:nth-child(9) {
  -webkit-transform: rotate(288deg);
          transform: rotate(288deg);
}
.palet.palet__opened .renk_paleti:nth-child(10) {
  -webkit-transform: rotate(324deg);
          transform: rotate(324deg);
}
.palet .renk_paleti, .palet .renk_paleti__main {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  border-style: solid;
  border-color: #ffffff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.palet .renk_paleti__main {
  background-color: #3F729B;
  width: 100px;
  height: 100px;
  -webkit-transition: background .3s;
  transition: background .3s;
  border-width: 6px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.palet .renk_paleti__main:after {
  content: "PT";
  position: absolute;
  visibility: visible;
  display: block;
  padding: 15px 10px;
  font-weight: bold;
  font-size: -webkit-xxx-large;
  text-align: -webkit-center;
  display: table-cell;
  vertical-align: middle;
}
.palet .renk_paleti {
  width: 50px;
  height: 50px;
  display: block;
  -webkit-transform-origin: 250% 50%;
          transform-origin: 250% 50%;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  border-width: 3px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  left: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>
<script>
var _$paletElement = $('.renk_paleti');

function _ptarkaplan(){
	$.each(_$paletElement, function(i){
		   $(this).css('background-color', $(this).data('color'));
	})
}

function _ptbuton(){
	$('.renk_paleti__main').on('click', function(){ // Açılış butonuna tıklama olayı
		$('.palet').toggleClass('palet__opened');
	})
}

function _PTButonaTikla(){
	$('.renk_paleti').on('click', function(){ //Renk butonuna tıklama olayı
		var color = $(this).data('color'); //Hangi renk seçildiğini belirle
		_PTArkaPlanBelirle(color); //Rengi Tanımlama
		 localStorage.setItem("premiumturk_color", color);
	})
}

function _PTArkaPlanBelirle(color){//Arka planı belirleyen olay
	$('.renk_paleti__main').css('background', color);
	$('.bolum').css('background', color);//bolum classının arka planına seçilen rengi ekle. "body" class'ına da ekleyebilirsiniz div dışındaki tüm alanı kapsayacaktır.
}

if(localStorage.getItem("premiumturk_color")){
	var val = localStorage.getItem("premiumturk_color");
	$('.bolum').css('background', val);
}

_ptarkaplan();
_ptbuton();
_PTButonaTikla();
</script>