DarkMode

Chakra는 기본적으로 dark모드를 지원함

dark모드를 사용하기 위해서는 아래 순서를 따른다

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

 

 

[순서]

1. 테마설정

2. 테마를 프로젝트에 등록

3. 등록한 테마를 적재적소에 적용

 

[1. 테마설정]

• 테마를 담당하는 파일 생성: theme.ts

 // theme.ts

// 1. import `extendTheme` function
import { extendTheme, type ThemeConfig } from '@chakra-ui/react'

// 2. Add your color mode config
const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
}

// 3. extend the theme
const theme = extendTheme({ config })

export default theme

 

 

[2. 테마를 프로젝트에 등록]

• colorModeScript를 index.tsx에 등록해 줘야 설정한 테마를 사용 가능
• thema.ts의 initialcolorMode를 초기값으로 사용하겠다는 의미

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';

import router from './router';
import { RouterProvider } from 'react-router-dom';
import theme from './theme';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} /> //등록
      <RouterProvider router={router} />      
    </ChakraProvider>
  </React.StrictMode>
);

 

 

[3. 등록한 테마를 적재적소에 사용]

• 등록후 사용 하기 위해 chakra에서는 useColorMode라는 hook을 제공

function Example() {
  const { colorMode, toggleColorMode } = useColorMode() // hook정의
  return (
    <header>
      <Button onClick={toggleColorMode}> //버튼 클릭하면 toggleColorMode적용
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
      </Button>
    </header>
  )
}

 

• useColorModeValue: 라이트모드일때, 다크모드일때 값을 정하는 hook

const Icons = useColorModeValue(FaMoon, FaSun) // useColorModeValue(라이트모드일때, 다크모드일때)
const { toggleColorMode } = useColorMode();


// 미리 정의한 useColorModeValue 사용
<IconButton arial-label="dark-mode-toggle" icons={<Icons />} onClick={toggleColorMode} />