usePrefersColorScheme

대부분의 최신 브라우저는 prefers-color-scheme 미디어 쿼리를 지원합니다. 하지만, 일부 구형 브라우저에서는 지원되지 않을 수 있으므로 주의가 필요합니다.

Introduce

usePrefersColorScheme 훅은 사용자의 시스템에서 선호하는 색상 모드(다크 모드 또는 라이트 모드)를 감지하고 반환하는 기능을 제공합니다.

export interface UsePrefersColorSchemeProps {
  serverSnapshot?: UsePrefersColorSchemeReturns;
}
 
export type UsePrefersColorSchemeReturns = 'dark' | 'light';
 
const usePrefersColorScheme = (props: UsePrefersColorSchemeProps = {}): UsePrefersColorSchemeReturns;

Props

serverSnapshot : 서버 사이드 렌더링(SSR) 시 초기 색상 모드를 설정하기 위한 선택적 값입니다. 기본값은 'light'입니다.

Returns

UsePrefersColorSchemeReturns : 선호 색상 모드 값을 반환합니다. 두 가지 옵션이 있습니다.
- dark : 다크 모드
- light : 라이트 모드

Examples

usePrefersColorScheme.tsx

  import usePrefersColorScheme from './usePrefersColorScheme';
 
  const App = () => {
    const colorScheme = usePrefersColorScheme();
 
    return (
      <div>
        <h1>현재 색상 모드: {colorScheme === 'dark' ? '다크 모드' : '라이트 모드'}</h1>
        {colorScheme === 'dark' ? (
          <p>사용자 시스템은 현재 다크 모드입니다.</p>
        ) : (
          <p>사용자 시스템은 현재 라이트 모드입니다.</p>
        )}
      </div>
    );
  };
 
  export default App;

useOnlineStatus usePreventCopy