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

## Palettes

A color palette is a collection of colors we might want to use.

![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/5358743337304064)

It's important to prepare a palette as this makes our usage of colors consistent throughout the app.

## Swatches

A swatch is a sample of a color chosen from a range of similar colors. It's very common to use several swatches of a color in different scenarios.

![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/4677523272105984)

For each swatch, there's a CSS variable. This is how we'll name our swatches: `--{color-name}-{swatch}`

The `{swatch}` is a number, by default **50**, **75**, **100**, **200**, **300**, **400**, or **500**.

This gives us variables for a single color (for example, for the `blue` color):

```
--blue-50: #e3edff;
--blue-75: #c7dcff;
--blue-100: #b4d0ff;
--blue-200: #a2c5ff;
--blue-300: #8fb9ff;
--blue-400: #69a1ff;
--blue-500: #448aff;
```

> **Note:** Sometimes, we might need a blue to use as the text color. Usually, using `--blue-500` won't be good enough, so we'll define an additional `--{color-name}-text` variable for each color to be used exclusively for texts. We'll learn more about this in a later lesson.

These are the default swatches, but in a later section you'll learn how you can customize this in `css-theming`.

## Color schemes

Choosing a color scheme involves handpicking certain colors and giving them a **meaning** in our app. An example of this is picking a _blue_ and using that as the _primary_ color of our app. We call this a **semantic color** when we refer to it, as it visualizes a meaning in the app instead of a raw color.

Here's an example of a color scheme:

![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/5009933541048320)

In this example, and from what we see in the figure, we have decided that we'll use **purple** as the color for **primary**. Assuming we use **primary** as the accent in our app, this means we'll be seeing **purple** in those places. The same applies to the other semantic colors.

> **Note:** Semantic colors are not set in stone, we should be able to add to these and change them to whatever we think is useful in our app.

Defining a color scheme is liberating when developing components, as we don't have to think about exact colors, we simply choose a semantic color that has the appropriate meaning.

This also makes it easier to create a different theme that updates the whole feel of the app simply by changing a semantic color. Below we're changing the **primary** semantic color to show you the effect: 

- Indigo as the `primary` color:
![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/6540368834199552)

- Green as the `primary` color:
![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/6246997066514432)

# Palettes

A color palette is a collection of colors we might want to use.

![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/5358743337304064)

It's important to prepare a palette as this makes our usage of colors consistent throughout the app.

# Swatches

A swatch is a sample of a color chosen from a range of similar colors. It's very common to use several swatches of a color in different scenarios.

![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/4677523272105984)

For each swatch, there's a CSS variable. This is how we'll name our swatches: `--{color-name}-{swatch}`

The `{swatch}` is a number, by default **50**, **75**, **100**, **200**, **300**, **400**, or **500**.

This gives us variables for a single color (for example, for the `blue` color):

```
--blue-50: #e3edff;
--blue-75: #c7dcff;
--blue-100: #b4d0ff;
--blue-200: #a2c5ff;
--blue-300: #8fb9ff;
--blue-400: #69a1ff;
--blue-500: #448aff;
```

> **Note:** Sometimes, we might need a blue to use as the text color. Usually, using `--blue-500` won't be good enough, so we'll define an additional `--{color-name}-text` variable for each color to be used exclusively for texts. We'll learn more about this in a later lesson.

These are the default swatches, but in a later section you'll learn how you can customize this in `css-theming`.

# Color schemes

Choosing a color scheme involves handpicking certain colors and giving them a **meaning** in our app. An example of this is picking a _blue_ and using that as the _primary_ color of our app. We call this a **semantic color** when we refer to it, as it visualizes a meaning in the app instead of a raw color.

Here's an example of a color scheme:

![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/5009933541048320)

In this example, and from what we see in the figure, we have decided that we'll use **purple** as the color for **primary**. Assuming we use **primary** as the accent in our app, this means we'll be seeing **purple** in those places. The same applies to the other semantic colors.

> **Note:** Semantic colors are not set in stone, we should be able to add to these and change them to whatever we think is useful in our app.

Defining a color scheme is liberating when developing components, as we don't have to think about exact colors, we simply choose a semantic color that has the appropriate meaning.

This also makes it easier to create a different theme that updates the whole feel of the app simply by changing a semantic color. Below we're changing the **primary** semantic color to show you the effect: 

- Indigo as the `primary` color:
![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/6540368834199552)

- Green as the `primary` color:
![](/api/collection/6289435580694528/5438307556130816/page/5345436102557696/image/6246997066514432)

This lesson goes into what palettes, swatches, and color schemes mean in our platform and how defining these will make it much easier to customize our apps.

Before Getting Started

Theory

Using css-theming

Samples

Palettes, Swatches, and Color Schemes

Palettes #

Swatches #