방법 - 다크 모드 전환
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단계) 자바스크립트 추가:
요소를 가져오고 클래스 <body>
간에 전환합니다 ..dark-mode
예시
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
팁: 클래스 추가 방법 도 참조하십시오 .
팁: JavaScript 참조에서 classList 속성에 대해 자세히 알아보십시오 .