[styled-components] 타입스크립트에서 styled-components 다크모드/라이트모드 설정하기

0. 설치

// styled-components 설치
npm i styled-components
npm i -D @types/styled-components

// 상태관리 라이브러리는 recoil 설치
npm i recoil

 

1. 타입 선언

1) src 폴더 내에 styled.d.ts 파일 생성한다.

2) 상단에 styled-components를 import한다.

3) styled-components 모듈을 선언하고, DefaultTheme 인터페이스를 설정해준다.

// styled.d.ts

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    bgColor: string;
    boardColor: string;
    titleColor: string;
    cardColor: string;
    textColor: string;
  }
}

 

2. 테마 작성

1) src 폴더 내에 theme.ts 파일 생성한다.

2) 상단에 styled-components로부터 DefaultTheme을 import한다.

3) 다크테마, 라이트테마를 선언하고, import한 DefaultTheme을 타입으로 지정해준다.

4) 다크모드, 라이트모드에 사용될 색상을 지정해준다.

// theme.ts

import { DefaultTheme } from "styled-components";

export const darkTheme: DefaultTheme = {
  bgColor: "#F2F1ED",
  boardColor: "#FFFDF6",
  titleColor: "#4C4A4B",
  cardColor: "#ffffff",
  textColor: "#000000",
};

export const lightTheme: DefaultTheme = {
  bgColor: "#F2F1ED",
  boardColor: "#FFFDF6",
  titleColor: "#4C4A4B",
  cardColor: "#ffffff",
  textColor: "#000000",
};

 

3. recoil로 다크모드 state 관리

1) index.tsx 파일에 RecoilRoot를 셋팅한다.

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

 

2) src 폴더 내에 recoil.ts 파일을 생성하고, 다크모드 여부를 나타내는 atom을 생성한다.

// recoil.ts

import { atom } from "recoil";

export const isDarkAtom = atom({
    key: "isDarkAtom",
    default: false,
})

 

4. ThemeProvider 셋팅

1) App.tsx 파일에 styled-components의 ThemeProvider를 셋팅해준다.

2) recoil의  useRecoilValue 훅을 통해 isDarkAtom을 불러온다.

3) isDark가 true일 때는 darkTheme을, false일 때는 lightTheme을 적용해준다.

// App.tsx

import { ThemeProvider, createGlobalStyle } from 'styled-components';
import reset from "styled-reset";
import { useRecoilValue } from "recoil";
import { isDarkAtom } from './recoil';
import { darkTheme, lightTheme } from "./theme";
import Kanban from './Kanban';

const GlobalStyle = createGlobalStyle`
${reset};

*{
  box-sizing: border-box;
}
`;

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <GlobalStyle />
      <Kanban />
    </ThemeProvider>
  )
}

export default App;

 

5. 컴포넌트에서 CSS 설정하기

styled-components의 props를 통해 CSS를 설정할 수 있다.

props.theme 안에 defaultTheme에서 설정했던 변수들이 자동완성되어 나오는 것을 확인할 수 있다.

// Kanban.tsx

import styled from "styled-components";

function Kanban() {
    return (
        <Layout>Kanban</Layout>
    )
}

export default Kanban

const Layout = styled.div`
color: ${props => props.theme.textColor}
`;