Theming in React with Styled Components

Get started using Styled Theming on top of Styled Components for multi-dimensional CSS theming

Embedded Themed CSS with Styled Components

Styled Components aims to solve the problem of applying CSS to Javascript frameworks on a per-component basis; and this is particularly useful with React. Although this article is primarily aimed at theming with the ecosystem of tools built around Styled Components, it can also serve as an introductory to the package and its capabilities.

The package itself is continuing an upwards trend of adoption, currently on 736k weekly downloads at publish time. It is clear that embedded styles will play an important role in the future of Javascript frameworks, having a number of benefits over stylesheets.

One of the more advanced use cases of the package is theming — allowing your app to support multiple looks and feels. Adopting a light and dark mode will involve theming your app, as would integrating a compact vs cozy layout. We will explore how to do this at scale, along with the tools needed for the job. As well as styled-components, we will also utilise styled-theming; a small package designed specifically for defining and managing themes on top of styled-components.