[노마드 코더] Themes

Theming

styled components는 ThemeProvider wrapper 컴포넌트를 통해 전체 테마를 지원합니다.

주로 다크모드 할때 쓰인다!
이 컴포넌트는 컨텍스트 API를 통해 자체 아래에 있는 모든 React 구성 요소에 테마를 제공합니다.
렌더 트리에서 모든 스타일 구성 요소는 여러 수준의 깊이에 있는 경우에도 제공된 테마에 액세스할 수 있습니다.
ex) ThemeProvider theme={theme}
https://styled-components.com/docs/advanced

styled-components: Advanced Usage

ThemeProvider 전체 테마에 적용

import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

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

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

reportWebVitals();

darkTheme을 적용했다. 이걸 이제 어떻게 쓰냐?

import { useState } from "react";
import styled from "styled-components";

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor}; ;
`;

function App() {
  return (
    <Wrapper>
      <Title> Hello</Title>
    </Wrapper>
  );
}

export default App;

이렇게 props를 받아서 쓰면 된다!

 

darkThem 적용화면

darkTheme

lightTheme 적용화면