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

Text colors, for the most part, are easier to deal with than background colors. The "Alpha compositing" problem that we discussed in the previous lesson doesn't apply as severely here, and we usually only need one or two main text colors: a text color and a secondary text color. An example use case of this is using the secondary text color for less emphasized text:

![](/api/collection/6289435580694528/5438307556130816/page/6629728917127168/image/5032620799819776)

In addition to the main text colors, we might also need a text color for each color in our palette. A nice use case for this is creating colorful labels:

![](/api/collection/6289435580694528/5438307556130816/page/6629728917127168/image/6082315370364928)

As you can see, we're using a purple text color over a light purple background. If you recall, the CSS variable for the text color here would be `--purple-text`.

# Main text colors

We can start by defining the main text color in the app, which will depend on the brightness of the theme.

For light themes, we'll use a blackish color and for dark themes, we'll use a whitish color. To create a secondary text color that we can use in places where you want less emphasis on the text, we can use opacity (alpha channel) on the main text color. For that we'll be using `rgba`:

```scss
rgba($text-color, .7)
```

The text color blending into the background here is often desirable (unlike with background colors, as explained in the previous lesson), so using the alpha channel is usually OK for text color.

- Light theme

This lesson talks about the text color in different themes.

Before Getting Started

Theory

Using css-theming

Samples

Text Color