useThemeControl

useThemeControl은 현재 테마를 확인하거나 테마를 변경할 때 사용합니다.

Introduce

theme 는 'light' | 'dark' 타입의 테마 값을 반환합니다.

setTheme 으로 변경한 테마는 쿠키(기본 이름 montage-theme)에 저장되며, 기본적으로 같은 루트 도메인의 서브도메인 간에 공유됩니다. 쿠키 이름 등은 ThemeProvider 의 cookie 옵션으로 변경할 수 있습니다.

import { NoSsr, Button, useThemeControl } from '@montage-ui/core';

const Demo = () => {
  const { theme, setTheme } = useThemeControl();

  const handleClick = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <NoSsr fallback={<Button>Loading...</Button>}>
      <Button
        onClick={handleClick}
      >
        {theme}
      </Button>
    </NoSsr>
  );
};

export default Demo;

System theme

themeOriginValue 는 'light' | 'dark' | 'system' 타입의 테마 값을 반환합니다.

또한 ThemeProvider 컴포넌트의 enableDarkMode 속성을 true 로 설정한 경우 system 값으로 테마를 지정할 수 있습니다.

import { NoSsr, RadioGroup, RadioGroupItem, FormControl, FormControlLabel, FormControlField, useThemeControl } from '@montage-ui/core';

const Demo = () => {
  const { themeOriginValue, setTheme } = useThemeControl();

  return (
    <NoSsr>
      <RadioGroup
        value={themeOriginValue}
        onValueChange={setTheme}
      >
        <FormControl flexDirection="row" gap="12px" alignItems="center">
          <FormControlField>
            <RadioGroupItem value="light" />
          </FormControlField>
          <FormControlLabel>Light</FormControlLabel>
        </FormControl>

        <FormControl flexDirection="row" gap="12px" alignItems="center">
          <FormControlField>
            <RadioGroupItem value="dark" />
          </FormControlField>
          <FormControlLabel>Dark</FormControlLabel>
        </FormControl>

        <FormControl flexDirection="row" gap="12px" alignItems="center">
          <FormControlField>
            <RadioGroupItem value="system" />
          </FormControlField>
          <FormControlLabel>System</FormControlLabel>
        </FormControl>
      </RadioGroup>
    </NoSsr>
  );
};

export default Demo;