🌈Color Mode
Chakra UI에서 제공하는 Color Mode 설정 방법을 소개합니다.
Chakra UI는 앱에서 색상 모드를 관리하기 위한 지원 기능이 내장되어 있습니다. Light 와 Dark 모드 별로 설정이 가능하며 기본 모드는 Light 모드입니다.
System color mode 브라우저에서 사용자가 설정한 컬러 모드를 의미합니다. Chakra UI는
System Color Mode에 따라 컬러모드를 지정할 수 있습니다. 아래의 예시를 참고해주세요.
초기값을 light 모드로 지정합니다. 앱이 시스템 색상 모드에서 분리됩니다.
// src/configs/theme/config.ts
import { ThemeConfig } from '@chakra-ui/react';
const config: ThemeConfig = {
initialColorMode: 'light',
useSystemColorMode: false,
};
export default config;초기값을 System 모드로 설정합니다. 앱이 시스템 색상 모드 변경을 구독합니다.
const config: ThemeConfig = {
initialColorMode: 'system',
useSystemColorMode: true,
};초기값을 System 모드로 설정합니다. 앱이 시스템 색상 모드에서 분리됩니다.
const config: ThemeConfig = {
initialColorMode: 'system',
useSystemColorMode: false,
};초기값을 dark 모드로 지정합니다. 앱이 시스템 색상 모드 변경을 구독합니다.
const config: ThemeConfig = {
initialColorMode: 'dark',
useSystemColorMode: true,
};초기값을 dark 모드로 지정합니다. 앱이 시스템 색상 모드에서 분리됩니다.
const config: ThemeConfig = {
initialColorMode: 'dark',
useSystemColorMode: false,
};Chakra는 색상 모드를 localStorage 또는 cookie에 저장합니다. 기본적으로는 localStorage에 저장합니다.
eg. chakra-ui-color-mode: light
색상 모드를 재설정해야 하는 경우 localStorage에서 항목을 삭제해주세요.
Last updated