index.html
<html theme="">
<label class="switch">
<input id="switch" type="checkbox"/>
<span class="slider"></span>
</label>
</html>
style.css
filter속성은 흐림효과, 색상변형등 그래픽 효과를 요소에 적용한다.
(이미지, 배경, 테두리 렌더링을 조정하는데 쓰인다.)
html[theme="dark-mode"] {
filter : invert(100%) hue-rotate(180deg);
}
// invert() : 주어진 이미지의 색을 반전시킨다 (100%일경우, 색을 정반대로 바꾼다.)
// hue-rotate() : 주어진 이미지의 색조 회전을 적용한다.changeMode.js
- class의 속성은 기본적으로
public하지만,#기호를 통해서private로 선언할 수 있다.
export class changeMode {
#swichEl;
constructor(){http://checkout3.officekeeper.co.kr/block?Culture=1042
this.#assignElement();
this.#addEvent();
}
#assignElement(){
this.#swichEl = document.getElementById("switch");
}
#addEvent(){
this.#swichEl.addEventListener("change", (event)=>{
document.documentElement.setAttribute(
"theme",
event.target.checked ? "dark-mode" : ""
);
});
}
}