# 개요 요새 좀 친다는 블로그라면 죄다 **다크 모드**를 지원한다. 다크 모드를 지원하면 전력소모도 줄어들고 눈의 피로도 좀 더 줄일 수도 있기 때문이다. 또 워낙 개발업계 종사자들은 특히 다크 모드에 대한 강박이 존재하는 것 같기도 하다. ![라이트 모드를 대하는 흔한 개발자의 모습](dark-mode-meme.jpg) 이러한 시대의 흐름을 따라서 다크 모드를 구현하지 않을 수가 없었다. # 다크모드 구현 방법 다크모드의 구현하는데에는 여러가지 옵션이 주어진다. 라이브러리로 `Chakra UI`나 `Tailwind`를 사용 할 수도 있고 혹은 `Sass`같은 전처리기를 사용할 수도 있다. 하지만 이미 `styled-components`를 사용 중이니 이번엔 `styled-components`의 **theme-provider**와 **Recoil**을 사용해서 구현 해 볼 예정이다. ## theme-provider theme-provider란 styled-components에서 테마를 구현하기 위해 제공해주는 기능으로서 Context API를 기반으로 작동한다. theme-provider의 하위에 위치한 컴포넌트들은 prop으로 theme를 받을 수 있게 되며 해당 theme의 CSS 값을 할당 할 수 있게 된다. ### theme별 CSS 작성하기 ```ts // .../styles/themeStyles.ts export const lightTheme = { bgColor: '#fff', categoryTextColor: '#000', categoryColor: '#fff', categoryShadow: 'inset 5px 5px 10px #ededed,inset -5px -5px 10px #ffffff, 5px 5px 10px #0000001b', selectedCategoryTextColor: '#fff', selectedCategoryShadow: 'none', selectedCategoryColor: '#000', textColor: '#000', fontWeight: 400, tagColor: '#000', tagTextColor: '#fff', blockColor: '#f1f1f1', togglerColor: '#e3e3e3', togglerButtonColor: '#565656', togglerButtonShadow: 'inset 6px 6px 5px #4b4b4b, inset -6px -6px 5px #616161', togglerShadow: 'inset 6px 6px 5px #c3c3c3, inset -6px -6px 5px #fdfdfd', }; export const darkTheme = { bgColor: '#1c1c1c', categoryTextColor: '#fff', categoryColor: '#404040', categoryShadow: 'none', selectedCategoryTextColor: '#000', selectedCategoryShadow: 'inset 5px 5px 10px #ededed,inset -5px -5px 10px #ffffff, 5px 5px 10px #0000001b', selectedCategoryColor: '#fff', textColor: '#fff', fontWeight: 300, tagColor: '#fff', tagTextColor: '#000', blockColor: '#7d7d7d', togglerColor: '#5c5c5c', togglerButtonColor: '#fff', togglerButtonShadow: 'inset 6px 6px 5px #d9d9d9, inset -6px -6px 5px #fffff', togglerShadow: 'inset 6px 6px 5px #4e4e4e, inset -6px -6px 5px #6a6a6a', }; export const theme = { lightTheme, darkTheme, }; export default theme; ``` 객체 형태의 `theme`에 `lightTheme`와 `darkTheme`를 프로퍼티로 할당한 후 `export`한다. 이후에 컴포넌트에서 `props.theme`에 접근시 현재 테마에 맞는 값을 얻을 수 있게 된다. ### ThemeProvider 설정하기 ```ts // .../components/Layout.tsx type Props = { children: JSX.Element, } const Layout = ({ children } : Props) => { const [currentTheme, setCurrentTheme] = useRecoilState(currentThemeState); useEffect(() => { if (localStorage.getItem('dark_mode') !== undefined) { const localTheme = Number(localStorage.getItem('dark_mode')); setCurrentTheme(localTheme); } }, [setCurrentTheme]); return (

{children}

theme-provider

Next.js로 나만의 블로그 만들기 [2] Recoil과 Styled-components로 다크 모드 구현하기