2023.10.18+ 타입스크립트 스타일컴포넌트 다크모드

다크모드 ts

styled.d.ts
// import original module declarations
import "styled-components";
// and extend them!
declare module "styled-components" {
export interface DefaultTheme {
textColor: string;
bgColor: string;
btnColor: string;
}
}

 

https://styled-components.com/docs/api#typescript

styled-components: API Reference

 

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",
};

 

index ts

<ThemeProvider theme={darkTheme}>