프로젝트 내에서 색상, 그림자, break points 등 공통된 UI를 가지기 위해 theme을 사용합니다.
해당 게시글에서는 theme 타입, 값을 생성해보도록 하겠습니다.
그리고 해당 값을 ThemeProvider에 주입하여 프로젝트 어디에서든지 사용할 수 있도록 하겠습니다.
간단한 내용이라 코드에 대한 설명보다는 왜 해당 작업을 하였는지 설명을 작성하였습니다.
코드는 github 링크를 통해 확인할 수 있도록 하였습니다.
Theme 타입, 값 설정
- 전반적인 색상을 위한 palette
- 글자를 위한 typography
- media query를 위한 break points
- 내부적으로 색상 alias를 위한 color
- ltr, rtl direction을 위한 direction
- light mode, dark mode를 위한 mode
간단하게 위 값만 해보도록 하겠습니다.
위 값들은 mui 홈페이지에 있는 값을 참고하여 작성하였습니다.
그리고 아직 dark mode의 값을 추가하지 않았습니다. (light와 동일)
위 값들은 그냥 설정만 해주는 것이기 때문에 아래 palette, typography, 나머지 theme 링크를 참고하시길 바랍니다.
그 중 나머지 theme 링크에 아래 코드가 있습니다.
declare module "@emotion/react" {
export interface Theme {
mode: Mode;
breakpoints: BreakPoints;
direction: Direction;
palette: Palette;
typography: Typography;
}
}
위 코드는 emotion 패키지에 내가 설정한 theme 타입을 알려주는 코드입니다.
저는 index.ts파일에 같이 작성해 주었지만 emotion.d.ts와 같은 파일을 만들어서 따로 작성해주셔도 됩니다.
ThemeProvider 설정
위에서 작업한 값을 전역적으로 사용하기 위해서는 ThemeContext, ThemeProvider 작업을 해주어야 합니다.
아래 ThemeContext, ThemeProvider 추가 링크를 확인하시면 됩니다.
링크
- palette
- typography
- 나머지 theme
- ThemeContext 추가
- Global font 설정
- ThemeProvider 추가
- 해당 게시글 최종 코드
