w3.css
다크 모드 전환
CSS와 JavaScript를 사용하여 다크 모드와 라이트 모드를 전환하자.
클래스 전환
1단계) HTML 추가
디자인을 토글하려는 콘텐츠를 저장해야 하는 모든 요소를 사용하자. 우리의 예에서는 <body>단순성을 위해 다음을 사용한다.
<body>
2단계) CSS 추가
<body> 요소의 스타일을 지정하고 토글을 위한 .dark-mode 클래스를 만든다.
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
3단계) JavaScript 추가
<body> 요소를 가져와 .dark-mode 클래스 사이를 전환한다.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
기본 예시
예제 보기참고
W3C School - How TO - Toggle Dark Mode
공부 목적 블로그