CSS 및 JavaScript를 사용하여 다크/라이트 모드 전환

22739 단어 javascripthtmlcss
이 게시물에서는 CSS, JavaScript 및 약간의 Bootstrap 5를 사용하여 Dark/Light 모드 전환기를 쉽게 만드는 방법을 보여 드리겠습니다.
쉽게 이해할 수 있도록 모든 것을 단계적으로 보여 드리겠습니다.

1단계 - (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>Document</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css' integrity='sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==' crossorigin='anonymous' />
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-6">
          <div class="form-switch text-center my-5">
            <input type="checkbox" id="mode" class="form-check-input">
            <label for="mode" class="form-check-label"></label>
          </div>
          <div class="card shadow">
            <div class="card-header">
              <div class="fs-4 fw-bold">Dark Mode</div>
            </div>
            <div class="card-body">
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, dolorum. Nostrum, quisquam? Sit assumenda incidunt asperiores facere voluptatem nemo consectetur. Atque, expedita. Perferendis placeat officia iusto! In repellendus esse laboriosam?</p>
            </div>
            <div class="card-footer d-flex justify-content-evenly">
              <button class="btn btn-primary">Primary Button</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>

</html>

위의 HTML 코드에서 Bootstrap 5를 사용하여 페이지 중앙에 카드를 디자인하고 있음을 알 수 있습니다. 또한 head 태그 내에 style.css를 연결하고 body 태그를 닫는 끝에 script.js 파일을 연결했습니다. 따라서 이후 단계에서 두 파일의 코드를 모두 볼 수 있습니다.

2단계 - (CSS 코드)



:root,
:root.light {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --card-bg-color: #fafafa;
}

위의 코드에서 내가 :root 및 :root.light 선택기를 사용하고 있음을 알 수 있습니다. 밝은 배경과 어두운 전경색을 저장합니다. :root 기본적으로 선택기가 있으므로 JavaScript에서 아무 것도 설정하지 않으면 모든 요소에 조명 모드가 적용됩니다. 마찬가지로 :root.dark 선택기를 사용하여 아래와 같이 어두운 배경과 밝은 전경 색상을 저장합니다.

:root.dark {
    --color-bg: #263238;
    --color-fg: #ffffff;
    --card-bg-color: #607d8b;
}


이제 다음으로 색상을 적용하려는 요소에 CSS 변수를 적용할 것이므로 아래와 같이 CSS의 기능을 수행합니다var.

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
}

.card {
    background-color: var(--card-bg-color) !important;
}


위 코드에서 CSS의 var 기능을 사용하여 요소에 배경색과 전경색을 부여한 것을 볼 수 있습니다.

따라서 style.css 파일의 최종 코드는 다음과 같습니다.

:root,
:root.light {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --card-bg-color: #fafafa;
}
:root.dark {
    --color-bg: #263238;
    --color-fg: #ffffff;
    --card-bg-color: #607d8b;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
}

.card {
    background-color: var(--card-bg-color) !important;
}


3단계 - (자바스크립트 코드)


script.js에서 먼저 아래 코드를 사용하여 스위치 확인란을 선택합니다.

const modeBtn = document.getElementById('mode');


이제 다음으로 전환 버튼에 onchange 이벤트를 사용하겠습니다.

modeBtn.onchange = (e) => {
  if (modeBtn.checked === true) {
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  } else {
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  }
}


위의 코딩에서 체크박스가 checked === true인지 확인한 다음 먼저 html를 사용하여 documentElement 태그에서 *light * 클래스를 제거한 다음 *dark * 클래스를 추가합니다. localStorage *모드를 저장하려면 * 유형을 *지속 * 브라우저에 모드를 입력합니다. 마찬가지로 확인란을 선택하지 않은 경우 html 태그에서 *dark * 클래스를 제거하고 *light * 클래스를 추가하고 localStorage *mode * 값을 light로 변경합니다.
이제 전환 버튼을 클릭하면 웹 페이지에 다크 모드가 적용되고 다시 전환 버튼을 클릭하면 웹 페이지에 라이트 모드가 적용되는 것을 볼 수 있습니다.
이것은 잘 작동하지만 페이지를 새로 고치거나 다시 로드할 때까지 작동합니다. 페이지를 다시 로드하면 다시 기본 테마, 즉 빛으로 돌아갑니다. 이제 이를 유지하는 방법을 살펴보겠습니다. 위의 코딩에서 브라우저의 로컬 저장소에 모드 유형 값을 저장하는 데 사용한 것을 볼 수 있습니다localStorage. 이제 localStorage 값을 사용하여 적용된 테마를 유지하는 방법을 살펴보겠습니다.

const mode = window.localStorage.getItem('mode');


먼저 위의 코드를 사용하여 localStorage에서 모드 값을 가져옵니다.

if (mode == 'dark') {
  modeBtn.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  modeBtn.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}


이제 위의 코드에서 mode == 'dark'인 경우 html 태그에 밝은 클래스를 추가하고 어두운 클래스를 제거하는 조건을 확인하고 있음을 알 수 있습니다. 또한 확인란을 checked 상태로 만듭니다. 마찬가지로 우리는 라이트 모드에서도 할 것입니다.

다음은 최종 코드script.js 파일입니다.

const modeBtn = document.getElementById('mode');
modeBtn.onchange = (e) => {
  if (modeBtn.checked === true) {
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  } else {
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  }
}

const mode = window.localStorage.getItem('mode');
if (mode == 'dark') {
  modeBtn.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  modeBtn.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}


다음은 일부 스크린샷입니다.



Flutter에서 간단한 2D 물리적 엔진 사용
Rails 7의 비교 검사기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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