Defining and Using Theme Props

Having CSS variables change values between different themes is the main way by which our theming platform will work. This lesson includes a simple example that toggles between a light and a dark theme of an app. This example will also show what we mean by defining a theme and how we’ll use the theme props in our app.

Example: Toggling between dark and light mode #

Let’s assume our themes have 2 props, --background (background color) and --color (text color), and that we have 2 themes we want to define, light and dark.

It’s easy to switch themes by assigning a unique CSS class for each theme and attaching the theme we want to activate on the HTML element. This, in turn, applies the CSS variables to the target container of the theme, a notion we’ll talk more about later.

The most basic example of this is: