返信トピックを使用した暗いモードの作成

themeは基本的にすべての色を持つobjectを指す.
index.jsファイルで

import { ThemeProvider } from "styled-components";

ThemeProvider helperと入力します.

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

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

暗いモードと光モードの変換に2つのコンポーネントを作成します.

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App /> {/*ThemeProvider 안에 있는 모든 component들이 theme object에 접근 할 수 있게 된다 */}
    </ThemeProvider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

ThemeProviderコンポーネントにAppコンポーネントを追加し、Appコンポーネントがトピックオブジェクトにアクセスできるようにします.
どういう意味だ?Theme.jsファイルを見せてください.

import React from 'react';
import styled, { keyframes } 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;

Theme.jsファイルでpropsをトピックとして使用します.textColorにアクセスできます.私たちのh 1とdivラベルの要素は、どの色なのかを直接明記する必要はありません.
Webブラウザ画面が表示されます.

索引の場合jsファイルで

<ThemeProvider theme={lightTheme}>

もしあなたが変えられるなら、私たちのネットワークは

自動的に変わります.
今後の位置決めではtypescriptを使用して、制御しやすい方法を書きます.