Search⌘ K
AI Features

Backgrounds and Foregrounds

Explore the concepts of backgrounds and foregrounds in CSS theming. Understand how to use CSS variables to define main and layered foreground colors, enabling consistent and customizable app designs that adapt to light and dark themes.

We'll cover the following...

Backgrounds #

Most apps have some kind of main background color. By default, that’s white in the browser. Lots of apps choose to select a grey color so that cards can be displayed on top of it. This makes for a good aesthetic view.

Let’s have a look at the following page:

This color is what we call the main background, --bg-main, of the app. ...