웹사이트 테마 컬러 바꾸기

index

html에 들어갈 picker 태그를 js에서 만든다.

style

@use "reset";
* {
  transition: background-color 1s;
}

header {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  padding: 30px 0px;
  border-bottom: 1px solid #aaa;
  margin: 0px auto;

  h1 {
    font-size: 1.7rem;
    color: varl(--pointColor);
  }

  ul {
    display: flex;
    gap: 40px;
    font-size: 1.2rem;
    color: var(--pointColor);
  }
}

figure {
  width: 70vw;
  height: 40vh;
  background-color: var(--pointColor);
  margin: 50px auto 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 2rem;
}

section {
  width: 70vw;
  margin: 0px auto 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  h2 {
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: var(--pointColor);
  }

  article {
    width: 22%;
    height: 15vh;
    background-color: var(--pointColor);
  }
}

footer {
  width: 70vw;
  margin: 0px auto;
  border-top: 1px solid #bbb;
  padding: 30px 0px;
  display: flex;
  justify-content: space-between;

  h1 {
    font-size: 1.4rem;
  }
}

.picker{
  position: fixed;
  bottom: 150px;
  right: 0px;
  border: 1px solid #555;
  padding: 5px 10px;
  display: flex;
  gap: 10px;
  align-items: center;

  span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: gray;
    cursor: pointer;
    text-indent: -9999px;
  }
}

//동적 피커버튼 생성
createPickerDOM(['orange', 'hotpink', 'cornflowerblue', 'violet', '#333'], '--pointColor');  

function createPickerDOM(arrColors, varName){

  // aside 객체
  let aside = document.createElement("aside");
  aside.classList.add("picker");

  let tags = '';
  arrColors.forEach((data)=>{
    tags += `<span style="background-color:${data}">${data}</span>`
  })

  aside.innerHTML = tags;

  // p객체
  let p = document.createElement("p");
  p.classList.add('palletGroup')
  p.innerHTML = `<input type="color"><button>색상 선택</button>`

  // aside 객체에 p 추가
  aside.append(p)

  // body에 aside 추가
  document.body.append(aside);


  // 첫번째 aside 버튼에 이벤트 추가
  const btns = document.querySelectorAll('.picker span');

  btns.forEach(btn => {
    btn.addEventListener('click', e=>{
      const selectedColor = e.currentTarget.style.backgroundColor;
      document.body.style.setProperty(varName, selectedColor);

    });
  });

  // 두번째 aside 팔레트에 이벤트 추가
  //children은 태그 안에 있는 돔을 모두 선택한다.
  const [pallet, btn] = document.querySelector('.palletGroup').children;
  btn.addEventListener("click", ()=>{
  document.body.style.setProperty(varName, pallet.value);
})
}

웹사이트 테마 컬러 바꾸기

댓글 쓰기