# Theme with styled-components and Typescript

DevFeed: [Theme with styled-components and Typescript](<https://devfeed.tech/articles/theme-with-styled-components-and-typescript-19124.md>)

Original publisher: [Read original article](<https://medium.com/rbi-tech/theme-with-styled-components-and-typescript-209244ec15a3?source=rss----904782439303---4>)

Author: Ethan Nguyen

Published: 2020-07-14T12:58:19Z

Content type: tutorial

Language: en

Sources: [RBI Tech](<https://devfeed.tech/sources/rbi-tech.md>)

Topics: [styled-components](<https://devfeed.tech/topics/styled-components.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Design system](<https://devfeed.tech/topics/design-system.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [design-systems](<https://devfeed.tech/tags/design-systems.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [styled-components](<https://devfeed.tech/tags/styled-components.md>), [themes](<https://devfeed.tech/tags/themes.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [visual-studio-code](<https://devfeed.tech/tags/visual-studio-code.md>)

## AI overview

A tutorial on theming applications with styled-components and TypeScript. It covers installation, Visual Studio Code support, declaration files, theme interfaces, naming conventions, theme creation, ThemeProvider setup, and switching between themes.

## Source excerpt

What is styled-components? Styled-components is arguably the most common CSS-in-JS library out there (Don't trust me? Check out their site and their adoption from many organizations, 7.6M/month downloads on NPM 🔥). One of its advanced use cases for this library is theming. Theming in styled-components allows your app to support multiple design patterns within the same app. Imagine an amazing code editor with no dark mode! Having options to customize the look and feel of your app from the primary colour palette to the typography scale can help our system to capture more personas. This article will give some breakdown of the basic setup and naming convention for theming your app with styled-components, and how to setup Typescript with styled-components themes Installationyarn add styled-components yarn add @types/styled-components -DVSCode plugin If you are using Visual Studio Code, I highly recommend installing this helpful plugin. It will highlight and IntelliSense your syntax for styled-components Create a declaration file Firstly, we will need to define how our theme interface looks like. Inside src folder, create styled.d.ts file and extend the existing styled-component DefaultTheme. This will help with IntelliSense and ensure a contract for all available themes. // styled.d.ts import 'styled-components';interface IPalette { main: string contrastText: string }declare module 'styled-components' { export interface DefaultTheme { borderRadius: string palette: { common: { black: string white: string } primary: IPalette secondary: IPalette } } }Naming convention Let's break down some logic here for the naming convention of theming. As I mentioned earlier, our goal for theming a system is to be able to control the compactness and colour palette. Hence we should define our theme around these styles like border-radius font-weight font-size ... and all colour related. About colour naming, avoid naming variable with actual colour but do name with something likeprimary or sec