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
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
v2.chakra-ui.com
[순서]
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} />
'FrameWork > Chakra-UI' 카테고리의 다른 글
모달 + useDisclosure (0) | 2024.08.10 |
---|---|
설치 및 사용 (0) | 2024.08.09 |