어두운 모드를 전환하는 방법

CSS와 JavaScript를 사용하여 어두운 모드와 밝은 모드 사이를 전환합니다.

직접 시도해 보세요

클래스 전환

첫 번째 단계 - HTML 추가:

디자인을 전환할 내용을 저장할 요소를 사용하십시오. 예를 들어, 간단화하기 위해 다음과 같이 사용할 것입니다: <body>:

<body>

두 번째 단계 - CSS 추가:

설정 <body> 요소의 스타일을 추가하여 전환을 위한 .dark-mode 클래스:

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}
.dark-mode {
  background-color: black;
  color: white;
}

세 번째 단계 - JavaScript 추가:

획득 <body> 요소를 가져오고 .dark-mode 클래스 간 전환:

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

직접 시도해 보세요

관련 페이지

강의:어떻게 클래스를 추가할 수 있습니까

참조 매뉴얼:HTML DOM Element classList 속성