.gif&collectionId=dcb50d88-6307-4897-975e-13c151621a8a)
관련 파일
DisplayStyleCard.container.tsx, DisplayStyleCard.tsx
변수 설명
•
darkMode
body 태그의 display-style 속성 값
타입 : DisplayStyleType
export enum DisplayStyleType {
LIGHT = "LIGHT",
DARK = "DARK",
}
JavaScript
복사
ex) <body display-style=”DARK”>
•
toggleType
로컬 스토리지의 display-style-toggle 속성 값
타입 : DisplayStyleToggleType
export enum DisplayStyleToggleType {
LIGHT = "LIGHT",
DARK = "DARK",
DEVICE = "DEVICE",
}
TypeScript
복사
•
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
window.matchMedia는 MediaQueryList 객체를 반환하는데, 이 객체의 matches 속성을 통해 현재 사용자가 다크모드를 선호하는지 여부를 알 수 있음
if (darkModeQuery.matches) {
console.log("사용자가 다크모드를 선호합니다.");
} else {
console.log("사용자가 다크모드를 선호하지 않습니다.");
}
JavaScript
복사
화면 스타일 카드 토글 버튼 클릭시 동작 프로세스
1.
토글 버튼 클릭할때마다 handleDisplayStyleButtonClick 호출
현재 클릭된 버튼이 아닌 다른 버튼을 누르면(ex. 다크 → 라이트 클릭)
setToggleType(버튼토글타입);
로컬스토리지에 변경된 토글타입 값 설정
localStorage.setItem("display-style-toggle", toggleType);
JavaScript
복사
2.
toggleType이 바뀌면 darkMode state 설정
기기설정 토글 버튼 클릭 → 기기설정에 따라 설정
setDarkMode(darkModeQuery.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT);
TypeScript
복사
3.
darkMode state 변경시 body 태그의 display-style 속성에 변경된 darkMode 값 설정
document.body.setAttribute("display-style", darkMode);
JavaScript
복사