🌈Color Mode

Chakra UI에서 제공하는 Color Mode 설정 방법을 소개합니다.

Chakra UI는 앱에서 색상 모드를 관리하기 위한 지원 기능이 내장되어 있습니다. Light 와 Dark 모드 별로 설정이 가능하며 기본 모드는 Light 모드입니다.

• System color mode 브라우저에서 사용자가 설정한 컬러 모드를 의미합니다. Chakra UI는 System Color Mode 에 따라 컬러모드를 지정할 수 있습니다. 아래의 예시를 참고해주세요.

Basic Setting

초기값을 light 모드로 지정합니다. 앱이 시스템 색상 모드에서 분리됩니다.

// src/configs/theme/config.ts

import { ThemeConfig } from '@chakra-ui/react';

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};

export default config;

case 1

초기값을 System 모드로 설정합니다. 앱이 시스템 색상 모드 변경을 구독합니다.

const config: ThemeConfig = {
  initialColorMode: 'system',
  useSystemColorMode: true,
};

case 2

초기값을 System 모드로 설정합니다. 앱이 시스템 색상 모드에서 분리됩니다.

const config: ThemeConfig = {
  initialColorMode: 'system',
  useSystemColorMode: false,
};

case 3

초기값을 dark 모드로 지정합니다. 앱이 시스템 색상 모드 변경을 구독합니다.

const config: ThemeConfig = {
  initialColorMode: 'dark',
  useSystemColorMode: true,
};

case 4

초기값을 dark 모드로 지정합니다. 앱이 시스템 색상 모드에서 분리됩니다.

const config: ThemeConfig = {
  initialColorMode: 'dark',
  useSystemColorMode: false,
};

Chakra는 색상 모드를 localStorage 또는 cookie에 저장합니다. 기본적으로는 localStorage에 저장합니다.

eg. chakra-ui-color-mode: light

색상 모드를 재설정해야 하는 경우 localStorage에서 항목을 삭제해주세요.

SSR 방식으로 렌더링하는 경우 flashing 현상을 방지하기 위해 cookie에 저장하는 방법을 고려해보세요. colormodemanager-optional-for-ssr