다크 모드, 라이트 모드 toggle

 

다크모드, 라이트모드를 설정하는 토글 버튼에 대해 알아보겠습니다.

 

웹 사이트를 불러올 때, 테마를 결정하는 경우는 아래 3가지의 경우가 있습니다.

1) 사용자의 테마 설정 저장
2) 운영체제 수준의 다크 모드
3) 위 두가지 경우가 아니면 라이트 모드 

참고 사이트 > A Complete Guide to Dark Mode on the Web

 

---

"토글 테마"

• 클래스를 토글하는 방법

 

 

• 스타일 시트를 토글하는 방법

light-theme.css와 dark-theme.css 스타일 시트를 따로 저장하여 이 파일을 토글하는 방법

const btn = document.querySelector(".btn-toggle");
const theme = document.querySelector("#theme-link");

btn.addEventListener("click", function() {
  if (theme.getAttribute("href") == "light-theme.css") {
    theme.href = "dark-theme.css";
  } else {
    theme.href = "light-theme.css";
  }
});

 

 

 

"테마 결정"

 

1) 사용자의 테마 설정 저장

• 사용자의 테마 선택을 localStorage에 저장하여 사이트 전체와 후속 방문시 일관되게 적용
• ※ JavaScript는 종종 CSS 이후에 실행되기 때문에 이 접근 방식은 "잘못된 테마 플래시"(FOIT) 가 발생하기 쉬움.

 

 

2) 운영체제 수준의 다크 모드

• 사용자가 시스템 설정에서 직접 밝은 테마와 어두운 테마 중에서 선택한 정보를 이용해 미디어 쿼리(prefers-color-scheme)로 웹 사이트의 테마를 결정
• @media (prefers-color-scheme: dark) 에 다크모드에서 보여질 화면을 재정의할 수 있음

 

 

 

"모든 것을 결합"

1. 시스템 환경 설정에 따라 어둡거나 밝은 테마를 자동으로 로드
2. 사용자가 시스템 기본 설정을 수동으로 재정의 가능
3. 페이지 새로 고침시 사용자가 선호하는 테마를 유지