ForceTheme

ForceTheme은 하위 요소들의 테마를 강제로 변경할 수 있는 컴포넌트입니다.

Introduce

하위 요소들의 테마를 강제로 변경할 수 있습니다.

import { ForceTheme, Button, FlexBox } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox gap="8px">
      <ForceTheme theme="light">
        <Button>강제 light theme</Button>
      </ForceTheme>
      <ForceTheme theme="dark">
        <Button>강제 dark theme</Button>
      </ForceTheme>
    </FlexBox>
  )
}

export default Demo;

강제로 변경할 때는 CSS Variable을 사용하지 않으므로 SSR Hydration 오류가 발생하지 않게 주의가 필요합니다.

const Demo = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    if (localStorage.getItem('custom-theme') === 'custom') {
      setTheme('dark');
    }
  }, [])

  return (
    // Hydration Error!
    <ForceTheme theme={theme}>
      <Button>강제 dark theme</Button>
    </ForceTheme>
  )
}

API

Name	Types	defaultValue
`theme *`	`"light" \| "dark"`	`-`
`children`	`ReactNode`	`-`