Dark mode

hyuk(정윤혁)·2021년 4월 4일

다크모드기능 추가

기존에 html에 대해 배우면서 만든 웹사이트에 평소에 자주 사용하던 기능인 다크모드를 추가하면 좋겠다라는 생각이 생겨서 다크모드 기능을 추가하게 됐다.

input id="다크모드on_다크모드off" type="button" value="일반"

  • 위의 코드를 사용하여 다크모드를 추가하게 됐다.
    type은 버튼 형식으로 만들었고 var target을 ducument.querySelector('body');를 사용하여 다크모드가 켜지고 꺼질 때의 코드의 양을 짧게 줄였다.
    if문법을 사용하여 다크모드를 켰을 때 백그라운드색이 검은색으로 바뀌게 설정하고 기본색은 흰색으로 설정되게 했다. 그리고 버튼은 다크모드off가 표시되게 만들었다.

처음 기능을 추가해 봤는데 간단하면서도 복잡한 원리가 들어간다고 생각한다. 또한 if~else나 var target같은 기능은 다크모드뿐 아니라 다른 코드에서도 사용가능해 보인다. 그렇기에 어느정도 코드에 대한 이해가 필요하다고 생각한다.

profile
노션 저장소는 🏠홈버튼 눌러주세요 !

0개의 댓글