#3.6 Themes

//styled.d.ts
import "styled-components";

// and extend them!
declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    btnColor: string;
  }
}

//theme.ts
import { DefaultTheme } from "styled-components";

export const lightTheme: DefaultTheme = {
  bgColor: "white",
  textColor: "black",
  btnColor: "tomato",
};

export const darkTheme: DefaultTheme = {
  bgColor: "black",
  textColor: "white",
  btnColor: "teal",
};

// 적용 결과
import styled from "styled-components";

const Container = styled.div`
background-color: ${props => props.theme.bgColor};`
const H1 = styled.h1`
color: ${props => props.theme.textColor}`

function Applied() {
    return <Container>
        <H1>protected</H1>

    </Container>
}