다크 모드 구현

 

다크 모드, 라이트 모드 토글 기능을 구현하였습니다.

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

 

---

"토글 테마"

 

웹 사이트의 테마를 결정하는 경우는 아래 3가지의 경우가 있다.

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

 

코드 설명

1. localStorage의 값을 불러와 그 값이 "dark"로 설정된 경우 스타일 시트 연결 href 속성값을 dark-theme.css파일로 변경한다. "dark"가 아닌 경우는 스타일 시트 연결 href 속성값을 light-theme.css파일로 변경한다.
2. "토글 버튼" 클릭시 ToggleTheme함수 호출
3. ToggleTheme() 함수 : 사용자가 시스템 설정에서 선택한 테마에 따라 사이트 내 테마를 토클하고, 테마 선택 localStorage의 값인 dark와 light 값을 토글한다.

 

 

결과