웹사이트 모드 전환 스위치 구현하기

웹사이트 테마 모드 전환 스위치 만들기

사용자 인터페이스의 눈의 피로 감소와 접근성 개선을 위해, 웹사이트의 Light/Dark 모드를 손쉽게 전환할 수 있는 스위치 컴포넌트를 만들어보자.

기능 설명

이 컴포넌트는 Light, Dark, System 모드를 나타내는 세 개의 라디오 버튼으로 구성되며, JavaScript와 로컬 스토리지를 활용해 사용자의 선택을 기억하는 기능을 구현할 것이다.

1. 페이지 마크업 작성하기

HTML을 이용해 세 개의 라디오 버튼을 생성한다:

<ul class="switches">
  <li>
    <input type="radio" id="light" name="theme-mode" checked>
    <label for="light">
      <span>Light</span>
    </label>
  </li>
  <li>
    <input type="radio" id="dark" name="theme-mode">
    <label for="dark">
      <span>Dark</span>
    </label>
  </li>
  <li>
    <input type="radio" id="auto" name="theme-mode">
    <label for="auto">
      <span>System</span>
    </label>
  </li>
</ul>

2. CSS 스타일 추가하기

초기 페이지의 색상은 CSS 변수를 이용해 설정한다:

:root {
  --white: #fff;
  --black: black;
  --text-color: var(--black);
  --bg-color: var(--white);
}

.theme-dark {
  color-scheme: dark;
  --text-color: #fff;
  --bg-color: black;
}

전환 스위치 스타일링

.switches {
  display: inline-block;
  border: 1px solid var(--gray);
  border-radius: 6px;
}

.switches li {
  position: relative;
}

.switches li [type="radio"] {
  position: absolute;
  left: -9999px;
}

.switches label {
  display: grid;
  grid-template-columns: 40px auto;
  align-items: center;
  cursor: pointer;
}

.switches span {
  width: 50px;
  height: 26px;
  border-radius: 15px;
  background: var(--gray);
  transition: all 0.3s;
}

3. JavaScript 추가하기

로컬 스토리지를 사용하여 사용자의 테마 선택을 기억한다:

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

if (localStorage.getItem("dark-mode")) {
  html.classList.add("theme-dark");
}

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

const setTheme = (theme) => {
  if (theme === "dark") {
    html.classList.add("theme-dark");
    localStorage.setItem("dark-mode", "true");
  } else {
    html.classList.remove("theme-dark");
    localStorage.removeItem("dark-mode");
  }
};

const handleInputChange = (e) => {
  const themeMode = e.target.id;
  setTheme(themeMode === "dark" ? "dark" : "light");
  localStorage.setItem("selected-radio", themeMode);
};

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

결론

HTML, CSS, JavaScript을 통해 Light/Dark 모드 전환 스위치를 만들었으며, 사용자의 테마 선호 사항을 저장하여 추후 방문 시에도 반영된다.

출처 : 원문 보러가기