> For the complete documentation index, see [llms.txt](https://toktokhan.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toktokhan.gitbook.io/docs/basic-guides/foundation/2.-colors/color-mode.md).

# Color Mode

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

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

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

{% tabs %}
{% tab title="Basic Setting" %}
초기값을 `light` 모드로 지정합니다. 앱이 시스템 색상 모드에서 분리됩니다.

```typescript
// src/configs/theme/config.ts

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

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

export default config;
```

{% endtab %}

{% tab title="case 1" %}
초기값을 `System` 모드로 설정합니다. 앱이 시스템 색상 모드 변경을 구독합니다.

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

{% endtab %}

{% tab title="case 2" %}
초기값을 `System` 모드로 설정합니다.  앱이 시스템 색상 모드에서 분리됩니다.

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

{% endtab %}

{% tab title="case 3" %}
초기값을 `dark` 모드로 지정합니다. 앱이 시스템 색상 모드 변경을 구독합니다.

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

{% endtab %}

{% tab title="case 4" %}
초기값을 `dark` 모드로 지정합니다. 앱이 시스템 색상 모드에서 분리됩니다.

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

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Chakra는 색상 모드를 `localStorage 또는 cookie`에 저장합니다. 기본적으로는 localStorage에 저장합니다.

<mark style="background-color:green;">eg. chakra-ui-color-mode: light</mark>

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

{% hint style="info" %}
SSR 방식으로 렌더링하는 경우 flashing 현상을 방지하기 위해 cookie에 저장하는 방법을 고려해보세요.\
[colormodemanager-optional-for-ssr](https://chakra-ui.com/docs/styled-system/color-mode#add-colormodemanager-optional-for-ssr)
{% endhint %}