• Q&A
  • 회원가입
  • 로그인

[js] JS - CSS 다크 모드 토글 (Dark Mode Toggle) ※ 클래스 상호 대체/변환

목차

  1. 상태유지 X (방법1, 방법2)
  2. 상태유지 O (방법3, 방법4)

 

상태 유지 X

방법1 : Light → Dark

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

  padding: 25px;

  background-color: white;

  color: black;

  font-size: 25px;

}


.dark-mode {

  background-color: black;

  color: white;

}

</style>


<h2>홈짱닷컴</h2>

<p>Homzzang.com</p>


<button onclick="homzzang()">모드 전환</button>


<script>

function homzzang() {

   var my = document.body;

   my.classList.toggle("dark-mode");

}

</script>

 

결과보기

 

방법2. Dark → Light

 

<style>

body.dark {

  background-color: #111;

  color: #eee;

}

body.dark a {

  color: #111;

}

body.dark button {

  background-color: #eee;

  color: #111;

}


body.light {

  background-color: #eee;

  color: #111;

}

body.light a {

  color: #111;

}

body.light button {

  background-color: #111;

  color: #eee;

}

</style>

 

<body id="body" class="dark">

  <h1>홈짱닷컴</h1>

  <p>Homzzang.com</p>   

  <button type="button" onclick="homzzang()">

 

<script>

function homzzang() {

  var body = document.getElementById("body");

  var currentClass = body.className;

  body.className = (currentClass == "dark") ? "light" : "dark";

}

</script>

 

결과보기

 

상태 유지 O 

방법3. 상태 유지 O

 

다크 모드 JS 이용

https://github.com/nickdeny/darkmode-js

 

 

방법4. 상태 유지 O

※ 빙밥1 업그레이드형.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

  padding: 25px;

  background-color: white;

  color: black;

  font-size: 25px;

}


.dark-mode {

  background-color: black;

  color: white;

}

</style>


<body>

<h2>홈짱닷컴</h2>

<p>Homzzang.com</p>


<button type="button" onclick="homzzang()">모드 전환</button>

<div id="theme"></div>

    

<script>

(function() {

  let onpageLoad = localStorage.getItem("theme") || "";

  let element = document.body;

  element.classList.add(onpageLoad);

  document.getElementById("theme").textContent =

    localStorage.getItem("theme") || "light";

})();


function homzzang() {

  let element = document.body;

  element.classList.toggle("dark-mode");


  let theme = localStorage.getItem("theme");

  if (theme && theme === "dark-mode") {

    localStorage.setItem("theme", "");

  } else {

    localStorage.setItem("theme", "dark-mode");

  }


  document.getElementById("theme").textContent = localStorage.getItem("theme");

}

</script>

</body>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012