[인스타그램 클론코딩] #4.1 GlobalStyle and Theme

안녕하세요 강정호입니다

 

오늘은 인스타그램 스타일 테마에 대해서 만들어보겠습니다.

 

인스타그램의 화면 색상을 따서 테마를 만듭니다.

이 때 색상을 알아내는 방법은 크롬 F12 버튼도 있고, Colorzilla 라는 확장앱이 있습니다

 

chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related

ColorZilla

 

Theme.js

const BOX_BORDER = "1px solid #e6e6e6";
const BORDER_RADIUS = "4px";

export default {

    bgColor: "#FAFAFA",
    blackColor: "#262626",
    blueColor: "#3897f0",
    darkGreyColor: "#999",
    lightGreyColor: "#c7c7c7",
    redColor: "#ED4956",
    darkBlueColor: "#003569",
    whiteBox: `${BORDER_RADIUS};
                ${BOX_BORDER};
                background-color:white;
              `



};

 

 

GlobalStyles.js

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

export default createGlobalStyle`
    ${reset}
    * {
        box-sizing: border-box;
    }
`;