2.7 Themes

[WONILLISM]

theme 이란 색, 글자크기, 너비, 높이 등을 미리 오브젝트로 정의하고 재사용 가능하도록 만드는 기능이다.

index.js 에 만들 앱 전체에 theme이 영향을 주도록 ThemeProvider를 추가한다.

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

const darkTheme = {
  /**
   * textColor
   * borderColor
   * linkColor
   * linkHoverColor
   * 등 더 다양하게 지정할 수 있다
   */
  textColor: 'whitesmoke',
  backgroundColor: '#111',
};

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

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

mui 예제 템플릿 중 하나에서는 테마 설정 값을 엄청 디테일하게 해놨었는데 그렇게 바꾸는 방법까지는 알려주지는 않는다. 뒤에서는 나올려나..