Gain insights into practical CSS theming methods, delve into problem-solving, and discover the css-theming package to create highly customizable, dark mode-friendly apps in this course.

CSS isn’t what it used to be. Today, you’ll be hard-pressed to find a strong, straightforward, and expressive UI language that can beat modern CSS. As the tech world moves more and more towards web-based frameworks for UI, we start to see a bigger emphasis on highly customized looks for apps.

In this course, you'll learn how to properly develop apps that are theme aware. This course is split into two sections: in the first section, you will learn the practical methods and patterns around theming and discover common problems and their solutions. In the second section, you will get hands-on experience with the css-theming package and through it you'll learn how to customize every facet of your app. Most importantly, no matter the kind of app you're developing, users have come to expect dark mode support nowadays as a given.

By the end of this course you’ll be able to create stunning apps that are highly customizable by either applying what you learned in your own way or using the css-theming package.

CSS Theming for Professionals

## 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:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/5367997381214208)

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

## Foregrounds

To put it simply, a _foreground_ is also a background color, unlike some UI frameworks that call text colors a "foreground". We call it such because those colors are used in the foreground of the app, for example in cards.

In the following picture, the cards use the main foreground color (white in this case), and behind them is the main background color (grey).

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/6690028848676864)

Let's focus on a single card for a second:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/6043017795338240)

The arrows point to elements with a darker foreground to contrast them a bit. This is common, but we won't introduce another name for these, because this is simply another foreground color. That's why we'll define multiple foreground colors in rising levels. Each level is a darker color than the one before it, i.e., each level darkens the main foreground color even more. In the app we're taking these screenshots from, it appears we only need 2 foreground colors: white and the slightly grey color.

The main foreground color is always called `--fg-0` (white), so we'll assign `--fg-1` to the grey color.

In a dark theme:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/5386720150290432)

The variables for foregrounds follow the same pattern but using dark colors. So when developing our app, we only worry about what level we want to use, and then we can be sure our design will be pretty no matter the theme.

In other apps, we might need more levels and that's fine. Using our theming platform, we should be able to customize how many we want.

## Real-world example

Let's take an example from [discord](https://discordapp.com/), where we can see how we'll need at least 3 levels:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/5074089539534848)

This shows how easy consuming these variables can become.

# 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:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/5367997381214208)

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

# Foregrounds

To put it simply, a _foreground_ is also a background color, unlike some UI frameworks that call text colors a "foreground". We call it such because those colors are used in the foreground of the app, for example in cards.

In the following picture, the cards use the main foreground color (white in this case), and behind them is the main background color (grey).

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/6690028848676864)

Let's focus on a single card for a second:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/6043017795338240)

The arrows point to elements with a darker foreground to contrast them a bit. This is common, but we won't introduce another name for these, because this is simply another foreground color. That's why we'll define multiple foreground colors in rising levels. Each level is a darker color than the one before it, i.e., each level darkens the main foreground color even more. In the app we're taking these screenshots from, it appears we only need 2 foreground colors: white and the slightly grey color.

The main foreground color is always called `--fg-0` (white), so we'll assign `--fg-1` to the grey color.

In a dark theme:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/5386720150290432)

The variables for foregrounds follow the same pattern but using dark colors. So when developing our app, we only worry about what level we want to use, and then we can be sure our design will be pretty no matter the theme.

In other apps, we might need more levels and that's fine. Using our theming platform, we should be able to customize how many we want.

# Real-world example

Let's take an example from [discord](https://discordapp.com/), where we can see how we'll need at least 3 levels:

![](/api/collection/6289435580694528/5438307556130816/page/6501791488278528/image/5074089539534848)

This shows how easy consuming these variables can become.

This lesson introduces the concept of backgrounds and foregrounds in our theming platform.

Before Getting Started

Theory

Using css-theming

Samples

Backgrounds and Foregrounds

Backgrounds #