[STYLED COMPONENTS] Themes

학습일 : 20023. 03. 29

---

다크모드를 구현할때 아주 유용한 theme에 대해 공부해볼까 한다.

절반은 theme
나머지 절반은 local Estate Management 를 사용하여 만들 수 있는데

우선 theme에 대해 먼저 알아보자

---

theme이란 기본적으로 모든 색상들을 가지고 있는 object 이다.
모든 색깔을 하나의 object 안에 넣어놓았기 때문에 엄청 유용하다
색깔을 바꿔줄 때는 그냥 object만 바꿔주면 되기 때문이다!


theme을 실행하기 위해서
index.js로 간다.

 

import { ThemeProvider } from 'styled-components';

를 적어 import 해주어야 사용이 가능하다.

그런다음
기존 코드의

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


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

에서 <App />을 <ThemeProvider></ThemeProvider>로 감싸주도록 한다.

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

ThemeProvider 는 prop이 하나 필요한데,
그 prop은 theme이다


먼저 정의를 해준다음

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

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

이렇게 작성해주면 된다.

  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>

전체코드

<index.js>

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

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

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

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

 

---

총정리
App 이 ThemeProvider 안에 있기 때문에
원한다면 App.js 의 컴포넌트들이 색에 접근할 수 있는 원리이다.

<App.js>

import styled, { keyframes } from "styled-components";

// Title 컴포넌트
// index.js에서 만들어준 theme textColor에 접근해 볼 수 있다.
const Title = styled.h1`
  color: ${(props) =>
    props.theme.textColor}; // props.theme.property이름 이라 작성해주면 된다.
`;

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

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

export default App;

<index.js>

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

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

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

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

Title은 App 컴포넌트 안에 있고,
App 컴포넌트는 ThemeProvider 안에 있기 때문에
Title이 Theme object에 접근해서 textColor를 얻을 수 있다.

 

---

실행결과

 

1. 다크모드

index.js에서 <ThemeProvider> 에 theme={darkTheme}을 작성해준 경우

  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>

 

 

 

2. 라이트모드

index.js에서 <ThemeProvider> 에 theme={lightTheme}을 작성해준 경우

  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>

 

단, 다크모드, 라이트모드를 만들면서 주의해야할 점 한가지는

textcolor, backgroundColor 등등

즉 property 이름이 똑같아야 한다.

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

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

 

 

멋짐v