css filter를 사용한 색상 반전 모드

• css : filter
  • invert - 색상반전
  • hue-rotate - 색상환
• 자바스크립트 클래스 private 속성

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

[Private class features - JavaScript | MDN

Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself.

developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields)

 

 

#box[theme="dark-mode"] {
  filter: invert(100%) hue-rotate(180deg);
}

 

class Toggle {
  #switchEl;
  constructor() {
    this.#getEl();
    this.#addEvent();  
  }
  #getEl() {
    this.#switchEl = document.querySelector('#switch-label')
  }
  #addEvent() {
    this.#switchEl.addEventListener("change", (event) => {
      console.log(event.target.checked);
      document.querySelector('#box').setAttribute(
        "theme",

        event.target.checked ? "convert-mode" : ""
      );
    });
  }
  
  
}

new Toggle();

 

 

 

See the Pen 스위치 체크박스 by JEONG (@cona) on CodePen.