부트스트랩 라이트/다크 모드 전환 만들기

Bootstrap 기본 값 활용한 라이트/다크 모드 전환

부트스트랩의 기본 다크 모드 스타일을 활용한 색상 모드 전환 컴포넌트를 만드는 방법을 소개합니다.

부트스트랩 최신 버전(v5.3.0)에서는 기본 라이트 또는 다크 모드를 지원하며, 필요에 따라 새로운 모드를 추가할 수도 있습니다. 하지만 부트스트랩 자체에는 전환 스위치 컴포넌트가 기본으로 포함되어 있지 않기 때문에 이를 구현해 보겠습니다.

HTML 속성과 로컬 스토리지 활용

1. HTML 속성을 사용해 다크 모드를 적용합니다. 'theme-dark' 클래스를 사용하지 않고 data-bs-theme="dark" 속성을 사용합니다.
2. 기존의 다크 모드 CSS 변수는 모두 제거합니다. 부트스트랩에 내장된 다크 모드 스타일이 있기 때문입니다.
3. 로컬 스토리지 항목과 충돌을 피하기 위해 모든 항목에 'bs' 접두사를 추가합니다. 예를 들어, 'dark-mode' 키는 'bs-dark-mode'로 바꾸게 됩니다.

업데이트된 자바스크립트 코드 활용 방법

const html = document.documentElement;
const switches = document.querySelector(".switches");
const inputs = switches.querySelectorAll("input");

if (localStorage.getItem("bs-dark-mode")) {
  html.setAttribute("data-bs-theme", "dark");
}

if (localStorage.getItem("bs-selected-radio")) {
  switches.querySelector(
    `#${localStorage.getItem("bs-selected-radio")}`
  ).checked = "true";
}

const setTheme = (theme) => {
  if (theme === "dark") {
    html.setAttribute("data-bs-theme", "dark");
    localStorage.setItem("bs-dark-mode", "true");
  } else {
    html.removeAttribute("data-bs-theme");
    localStorage.removeItem("bs-dark-mode");
  }
};

const handleMediaChange = (e) => {
  if (switches.querySelector('[type="radio"]:checked').id === "auto") {
    setTheme(e.matches ? "dark" : "light");
  }
};

const handleInputChange = (e) => {
  const themeMode = e.target.id;
  if (
    themeMode === "dark" ||
    (themeMode === "auto" &&
      window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    setTheme("dark");
  } else {
    setTheme("light");
  }
  localStorage.setItem("bs-selected-radio", themeMode);
};

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", handleMediaChange);

inputs.forEach((input) => input.addEventListener("input", handleInputChange));

사용자 정의를 위한 SASS 스타일 변경

부트스트랩의 기본 다크 모드 스타일을 수정하려면 SASS 파일을 이용하는 방법도 있습니다. _variables-dark.scss 파일에서 부트스트랩에서 사용하는 다크 모드 전용 SASS 변수를 포함하고 있기 때문에 이를 활용해 스타일을 변경할 수 있습니다.

또한, 특정 스타일을 부트스트랩의 color-mode 믹스인을 사용해 다크 모드에서만 추가로 적용할 수 있습니다:

@include color-mode(dark) {
  body {
    border: 1px solid red;
  }
}

위 코드를 CSS로 변환하면 다음과 같습니다:

[data-bs-theme=dark] body {
  border: 1px solid red;
}

이제 부트스트랩 프로젝트에서 이 색상 모드 전환 컴포넌트를 활용해 보세요.

출처 : 원문 보러가기