Introduction to CSS Theming

Introduction #

In this chapter, we’ll talk about several common problems around theming and how to solve them. We’ll introduce some opinionated notions that’ll be the basis behind creating a well-defined theming platform.

What is CSS theming #

We all know what a theme is; they are kind of like different clothes we can dress our app in. The app’s function doesn’t change, but its look and colors do. In CSS theming, we use facilities in CSS to accomplish this.

Theme props #

A theme has properties that we call theme props. In practice, these props are CSS variables.

Note: We’ll talk more about CSS variables and how we’ll use them in the next lesson.

As consumers of such a theming platform, all we need to do to use a theme prop is simply use the CSS variable it represents.

For a simple example, let’s imagine that our theming platform defines a --text-color prop, this supposedly defines a color suitable for use as the app’s main text color. In this case, using it involves setting our body’s text color to this variable:

This variable will evaluate to whatever value that makes sense for the currently applied theme; for example, blackish color for light themes, whitish color for dark themes.

We shouldn’t have to worry about what the current theme is. We simply know that this variable will be appropriate.

As we’ll see later, things get more complicated when we start talking about a palette of colors with shades/swatches, which is why having a platform that solves these small problems that intertwine is important.

Notions as CSS variables #

In each lesson, we will introduce a certain notion and link it to a CSS variable name which, as we explained, also represents a theme prop. This will make it easier to talk about the concepts.

For example, the main background color is referred to by using the following CSS variable: --bg-main. This means, there will be a --bg-main prop on our theme that refers to the main background of our app.

You can use the information in this section to create a custom solution if you want. But as we’ll see later, the css-theming package will be more than enough for the majority of apps. Understanding the concepts and theories in this section will allow you to more easily customize css-theming to your liking. This package can be considered the practical implementation of this section.