use-color-scheme

use-color-scheme

OS color scheme 선호값을 반환하고 변경을 구독하는 use-color-scheme 훅에 대해 설명해 드릴게요. @mantine/hooks 패키지에서 제공돼요.

출처: 문서

본문

사용법

use-color-scheme 훅은 선호하는 OS color scheme 값(dark 또는 light)을 반환하고 변경을 구독해요:

import { Badge } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';

function Demo() {
  const colorScheme = useColorScheme();

  return (
    <Badge color={colorScheme === 'dark' ? 'blue' : 'teal'} variant="filled">
      Your system color scheme is {colorScheme}
    </Badge>
  );
}

제한 사항

use-color-scheme은 내부적으로 use-media-query를 사용해요. window.matchMedia() API에 의존하며, API를 사용할 수 없으면(예: 서버 사이드 렌더링 중) 지정된 초기값(첫 번째 인자, 기본값 light)을 항상 반환해요.

// returns 'dark' on server side
// returns computed value on client side after mount
const colorScheme = useColorScheme('dark');

effect에서 초기값 가져오기

기본적으로 서버 사이드 렌더링을 지원하기 위해 use-color-scheme은 state 초기화 중 첫 렌더링에서 초기값을 계산하지 않아요. 대신 값이 useEffect에서 계산되고 부모 컴포넌트가 마운트된 후에 갱신돼요.

애플리케이션에 서버 사이드 렌더링이 없다면 getInitialValueInEffect 옵션을 바꿔 초기값을 즉시 계산하도록 할 수 있어요:

const colorScheme = useColorScheme('light', { getInitialValueInEffect: false });

정의

interface UseMediaQueryOptions {
  getInitialValueInEffect: boolean;
}

type UseColorSchemeValue = 'dark' | 'light';

function useColorScheme(
  initialValue?: UseColorSchemeValue,
  options?: UseMediaQueryOptions,
): UseColorSchemeValue

내보내는 타입

UseColorSchemeValue와 UseMediaQueryOptions 타입은 @mantine/hooks 패키지에서 내보내지므로 애플리케이션에서 import할 수 있어요:

import type { UseColorSchemeValue, UseMediaQueryOptions } from '@mantine/hooks';

더 알아보기 (Learn more)