A theme is a simple javascript object with only top level keys.

const Theme = { hello: 'blue' }

import { createThemedStyle } from 'themed-styled-components' import rawStyled from 'styled-components' // or import rawStyled from '@emotion/styled' const styled = createThemedStyle<typeof Theme>(rawStyled)

Now you can use styled almost as usual, but with superpowers.

const StyledButton = styled('div')`  /* direct theme interpolation key */  background-color: ${"hello"};  /* return theme key from props interpolation*/  color: ${props => props.primary ? "hello": "red"} ` <div style={{ padding: '20px', backgroundColor: 'tomato' }}> <h4>Beep</h4> </div>

git clone https://github.com/tclain/styled-utils.git YOURFOLDERNAME cd YOURFOLDERNAME # Run npm install and write your library name when asked. That's all! npm install

• npm t: Run test suite
• npm start: Run npm run build in watch mode
• npm run test:watch: Run test suite in interactive watch mode
• npm run test:prod: Run linting and generate coverage
• npm run build: Generate bundles and typings, create docs
• npm run lint: Lints code
• npm run commit: Commit using conventional commit style (husky will tell you to use it if you haven't 😉)