웹 브라우저 light mode & dark mode 설정하기
최근 라이트 모드와 다크 모드를 지원하는 웹 브라우저가 증가하고 있다. 자바 스크립트를 이용해서 간단하게 구현해보자.
<input type="button" value="dark mode" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="light mode" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
샘플 사진과 같이 각각 light mode와 dark mode로 웹 브라우저를 변환할 수 있다.
https://github.com/sosa-p/javascript_basic/blob/master/modeSetting.html
깃허브에서 테스트 코드(full)를 확인할 수 있습니다.
querySelector()
선택자(class, id 등)을 반환한다.
<body>
<script> document.querySelector('body') </script>
</body>body라는 태그를 직접 입력하여 body 태그를 반환한다.
- class: querySelector(".class명")
- id: querySelector("#id명")
공부하는 블로그