자바 스크립트를 사용하여 다크 모드를 추가하는 방법

10621 단어 tutorialwebdevbeginnersjavascript
javascript와 window 객체의 localStorage 속성을 사용하여 간단한 웹사이트에 어두운 모드를 추가할 것입니다.

페이지를 새로 고친 후에도 다크 모드를 유지하기 위해 localStorage 속성이 사용됩니다.

참고: 시작하기 전에 이 튜토리얼에서 많은 것을 얻을 수 있는 가장 좋은 방법은 특히 초보자인 경우 따라가는 것이라고 말하고 싶습니다. (필수는 아니지만 가능하면 더 좋습니다).

localStorage에 대한 몇 가지 재미있는 사실


  • localStorage는 sessionStorage와 매우 유사합니다. 차이점은 sessionStorage에서는 세션이 종료될 때마다(탭 또는 창이 닫힐 때마다) 데이터가 지워지는 반면 localStorage에서는 세션이 종료된 후에도 데이터가 유지된다는 것입니다.
  • JSON 형식과 같이 키 값 쌍으로 데이터를 저장합니다.
  • 마지막 개인 탭을 닫으면 개인 탭의 localStorage가 지워집니다.
  • localStorage 크기가 브라우저별 앱당 5MB로 제한됨
  • 문자열만 저장할 수 있습니다.

    • 의 시작하자...


  • index.html 파일을 만들고 다음 html 코드를 파일에 복사합니다.

    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dark mode</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">i am a box</div>
    <button class="switch">toggle dark mode</button>
    <script src="darkmode.js"></script>
  </body>
</html>


    따라서 위의 html 코드의 경우 html 파일을 style.css 및 darkmode.js 파일과 연결했습니다. 또한 텍스트가 있는 상자와 어두운 모드를 전환할 수 있는 버튼을 만들었습니다.
  • style.css 파일을 만들고 다음 코드를 파일에 복사합니다.

    • body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box {
  height: 100px;
  width: 100px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.darkMode {
  background-color: black;
}
.darkMode > .box {
  background-color: white;
  color: black;
}


    style.css 파일에서:


  • 먼저 body 요소의 높이와 너비를 설정하고 flexbox를 사용하여 box div를 본문 중앙에 배치했습니다. 또한 더 예쁘게 보이도록 flex-direction을 행에서 열로 변경합니다.
  • 두 번째로 상자 div의 높이와 너비를 설정하고 배경색을 지정하고 flexbox를 사용하여 내부 텍스트를 중앙에 배치했습니다. 또한 상자와 버튼 사이에 약간의 공간을 만들기 위해 여백 하단을 추가했습니다
    • .
  • 또한 어두운 모드에 대한 몇 가지 스타일을 추가했지만 javascript를 사용하여 활성화할 것이므로 아직 페이지에 영향을 주지 않습니다.
  • darkmode.js 파일을 만들고 다음 코드를 추가합니다.

    • let darkMode = localStorage.getItem("darkMode");

if (darkMode == "true") {
  addDarkMode();
}
document.querySelector(".switch").addEventListener("click", function () {
  darkMode = localStorage.getItem("darkMode");
  if (darkMode == "true") {
    removeDarkMode();
  } else {
    addDarkMode();
  }
});

function addDarkMode() {
  darkMode = localStorage.setItem("darkMode", "true");
  document.getElementsByTagName("body")[0].classList.add("darkMode");
}

function removeDarkMode() {
  darkMode = localStorage.setItem("darkMode", "false");
  document.getElementsByTagName("body")[0].classList.remove("darkMode");
}


    다음은 자바스크립트 코드에서 수행한 작업입니다.


  • 먼저 getItem() 메서드를 사용하여 어두운 모드에 대한 값을 가져오려고 합니다. getItem() 메서드는 키를 인수로 사용하고 해당 키의 값(설정된 경우) 또는 null(설정되지 않은 경우)을 반환합니다.
  • 다음으로 수행한 작업은 값이 true로 설정되어 있는지 확인하고 true이면 darkMode 변수의 값을 업데이트하는 addDarkMode() 함수를 호출합니다(변수는 setItem() 메서드를 사용하여 darkMode 키의 값을 true로 설정하여 업데이트할 수 있습니다. setItem() 메서드의 첫 번째 인수는 키이고 두 번째 인수는 값입니다. 그런 다음 body 요소에 darkMode 클래스를 추가합니다. 따라서 darkMode 클래스 아래에 해당 CSS 스타일을 추가할 수 있습니다.
  • 우리가 마지막으로 한 일은 DOM에서 쿼리를 받은 후 버튼에 클릭 이벤트 리스너를 추가하는 것이었습니다. addDarkMode() 함수 또는 false를 사용하여 removeDarkMode() 함수를 호출할 수 있습니다. removeDarkMode() 함수는 addDarkMode() 함수와 동일합니다. 유일한 차이점은 addDarkMode() 함수가 추가하는 반면 removeDarkMode() 함수는 body 요소에서 darkMode 클래스를 제거한다는 것입니다.

    • 전환 버튼을 클릭하면 다크 모드의 값이 설정되고 페이지를 새로 고치거나 세션이 끝날 때에도 브라우저에서 항상 기억합니다. 이것이 우리가 javascript 코드의 맨 위에 있는 darkMode의 값을 얻으려고 하는 이유입니다. 따라서 페이지가 다시 로드되거나 웹 사이트를 다시 방문하면 먼저 이전에 설정한 값을 가져오고 키 값(참 또는 거짓)에 따라 다크 모드를 설정합니다.
    Node.js 작업자 스레드
    Jupyter (Ansible Kernel)로 무리 화살 inet-henge 표시시켜 보았다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage