[react]トピック-(暗いモード1)

styled-コンポーネントのトピックを理解します.
ダークモード/ライトモードが実施される場合、50%の役割はthemeである.正式に実施する前に、themeを理解したほうがいいです.
残りの50%はlocal Estate Manangementで、この部分はまずthemeから理解しましょう.
テーマは何ですか.
Thomeは모든 색상들を持つデフォルトのオブジェクトです.使用するすべての色をオブジェクトに配置するため、非常に便利です.これから色を変えるときは객체の中のvalueに変えればいいので

// index.js에서..
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components"; // (1)
import App from "./App";

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

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

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={darkTheme}>
            <App />
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

まず、ThemeProviderを導入し、その後、アプリケーションコンポーネントをThemeProviderにカプセル化する.
次に、ThemeProviderの上にthemeという道具が置かれ、このthemeは前述したすべての色を持つ객체である.単純な暗いモードを作成するので、フォントの色と背景の色だけを指定します.光源モードを暗いモードの반전と宣言します.
私たちはThemeProviderでアプリケーションコンポーネント自体をパッケージしました.そのため、中のすべてのstyledコンポーネントがよろしければ、propに渡されたthemeに近づくことができます.

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

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

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

ThemeProviderのtheme props値のみをlightThemeに変更すると、光源モードとdarkThemeモードに変更すると、非常に簡単に暗いモードに変更できます.