usePreferredColorScheme
사용자의 색상 스킴 선호도(prefers-coloc-scheme) 에 따라 dark, light를 반환합니다.
- ligth: 사용자가 시스템에
ligth테마를 사용하는 것을 선호하거나 선호하는 테마를 알리지 않았을 때 반환합니다. - dark: 사용자가 시스템에
dark테마를 사용하는 것을 선호한다고 알렸을 때 반환합니다.
사용자는 운영체제 설정이나 사용자 에이전트 설정에서 선호하는 테마를 지정 할 수 있습니다.
Code
Interface
typescript
const usePreferredColorScheme: () => "dark" | "light"
Usage
typescript
import { usePreferredColorScheme } from '@modern-kit/react';
const Example = () => {
const colorScheme = usePreferredColorScheme();
return (
<div>
<p>OS 시스템 설정에서 테마를 변경해보세요.</p>
<p>ColorScheme: <b>{colorScheme}</b></p>
</div>
);
};