TIL 07 | JavaScript로 Dark-mode 구현

JavaScript 변수로 간단하게 다크모드 구현해보기

스크롤 버튼과 마찬가지로 Html에 새로운 버튼을 만들어주자.

<button onclick="myFunction()">
	<i class="fas fa-adjust fa-2x"></i>
</button>

이번엔 Fontawesome에서 다크모드에 어울릴만한 아이콘을 가져왔다.

아이콘만 쓰고 싶은데 background-color와 border가 들어있어서 촌스럽게 변해있다.

<button onclick="myFunction()" id="myDark">
<i class="fas fa-adjust fa-2x"></i>
</button>

id를 추가해 CSS에서 원하는 위치와 스타일을 적용시킨다.

#myDark {
  border: none;
  outline: none;
  background: none;
  margin-bottom: 40px;
}

CSS를 스타일을 적용해 깔끔하게 아이콘만 적용된 모습을 볼 수 있다.

.dark-mode {
  background-color: #333333;
  color: #fafafa;
}

CSS에서 다크모드 구현시 적용 될 컬러를 설정해준다.

function myFunction() {
    let element = document.body;
    element.classList.toggle("dark-mode");
}

JavaScript에서 함수를 선언해주고, CSS에서 적용했던 dark-mode를 입력해준다.