Theme

다크모드를 지원하려면 사용해야 한다. 모든 색상들을 가지고 있는 객체이다.
styled-component와 함께 사용되며 ThemeProvider를 포함시켜야 한다.

import { ThemeProvider } from "styled-components";

먼저 darkTheme객체와 lightTheme객체를 같은 필드를 갖는 객체로 정의한다.

const darkTheme = {
	textColor: "whitesmoke",
	backgroundColor: "#111",
};

const lightTheme = {
	textColor: "#111",
	backgroundColor: "whitesmoke",
}

App 콤포넌트를 ThemeProvider로 감싼다.

ReactDOM.render(
	<React.StrinctMode>
		<ThemeProvider theme={darkTheme}>
			<App />
		</ThemeProvider>
	</React.StrinctMode>
);

이제 styled-components를 만들때 자유롭게 사용할수 있다.

const Container = styled.div`
  background-color: ${props => props.theme.bgColor};
`;
const H1 = styled.h1`
  color: ${props => props.theme.textColor};
`;

function App() {
  return (
    <Container><H1>Hello world!!!!</H1></Container>
  );
}

darkTheme을 적용할때와 lightTheme을 정의할 때 bgColor, textColor값이 다르게 적용된다.
런타임에 테마를 변경할 수도 있다.