목차
src/them.ts
import {
createSystem,
defaultConfig,
SystemConfig,
SystemStyleObject,
} from '@chakra-ui/react';
// container 커스텀 스타일 설정
const containerStyle: SystemStyleObject = {
maxWidth: '100%',
paddingInline: '0',
};
const config: SystemConfig = {
// 전역 스타일 설정
globalCss: {
'html, body': {
letterSpacing: '-0.02em',
color: 'black',
fontFamily: `'Pretendard Variable', Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
'Helvetica Neue',
'Segoe UI',
'Apple SD Gothic Neo',
'Noto Sans KR',
'Malgun Gothic',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
sans-serif`,
},
'*::-webkit-scrollbar': {
width: '5px',
backgroundColor: 'transparent',
},
'*::-webkit-scrollbar-thumb': {
backgroundColor: 'gray02',
borderRadius: '100px',
},
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent',
},
},
theme: {
// 컴포넌트 커스텀 스타일 설정
recipes: {
container: {
base: containerStyle,
},
},
tokens: {
// 색상 커스텀 설정
colors: {
black: { value: '#1e1e1e' },
primary: { value: '#09bb91' },
red: { value: '#f01313' },
blue: { value: '#0094ff' },
gray01: {
value: '#8c96a0',
},
gray02: {
value: '#caccd6',
},
gray03: {
value: '#f5f6f9',
},
gray04: {
value: '#e5e6ed',
},
gray05: {
value: '#e9eaf1',
},
},
// 사이즈 커스텀 설정
sizes: {
wrap: { value: '1180px' },
paddingWrap: { value: '1780px' },
},
},
},
};
export const system = createSystem(defaultConfig, config);
src/components/ui/ChakraProvider.tsx
'use client';
import { ChakraProvider as Provider } from '@chakra-ui/react';
import { ThemeProvider } from 'next-themes';
import { system } from '@/theme';
export default function ChakraProvider(props: { children: React.ReactNode }) {
return (
<Provider value={system}>
<ThemeProvider attribute="class" disableTransitionOnChange>
{props.children}
</ThemeProvider>
</Provider>
);
}
src/app/layout.tsx
import type { Metadata } from 'next';
import ChakraProvider from '@/components/ui/ChakraProvider';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html suppressHydrationWarning>
<body>
<ChakraProvider>{children}</ChakraProvider>
</body>
</html>
);
}
테마 유형 생성
npx @chakra-ui/cli typegen ./src/theme.ts반응형
