[Feature]: usePreferredColorScheme

[ssi02014]

Package Scope

• [x] 기존 패키지에 기능 추가
• [ ] 새로운 패키지
• Package name: @modern-kit/react

Overview

useMediaQuery를 활용해 prefers-color-scheme가 어떤 값인지 반환합니다.

const colorScheme = usePreferredColorScheme();
// colorScheme: 'dark' | 'light'

prefers-color-scheme

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

prefers-color-scheme은 CSS 미디어 특성 중 하나로, 사용자의 시스템 색상 테마 설정을 감지하여 웹 페이지의 스타일을 동적으로 변경할 수 있게 합니다.

prefers-color-scheme 미디어 특성은 두 가지 주요 값을 가질 수 있습니다:

• light: 사용자가 라이트 모드를 선호한다는 것을 나타냅니다. (또는 직접적으로 선호를 알리지 않음)
• dark: 사용자가 다크 모드를 선호한다는 것을 나타냅니다.