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

# Problems

Here's our conundrum when it comes to colors:

- Manually picking up the different variations of colors we need in our app is hard and prone to error.
- When different themes have different brightness levels, the color from one of them usually doesn't translate very well to the other.

Here's an example of what we're talking about. Let's create some `label` and use _blue_ as a `background` and `color`, we'll use a lighter blue for the background:



:root {
    --light-blue: #e3edff;
    --blue: #0053dd;
}

body {
    font-family: consolas;
    background: white;
    color: black;
    margin: 40px;
}

.label {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--light-blue);
    color: var(--blue);
    display: inline-block;
}

<html>
 <head>
 </head>
 <body>
   This is a label:
   <div class="label">css-theming</div>
 </body>
</html>

codemirror

:root {
    --light-blue: #e3edff;
    --blue: #0053dd;
}

body {
    font-family: consolas;
    background: black;
    color: white;
    margin: 40px;
}

.label {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--light-blue);
    color: var(--blue);
    display: inline-block;
}

It becomes obvious that the light blue background is out of place in this dark theme. It's a _dark_ theme, so why are we using a color that's very close to white as a background?

# Solutions

## Using the alpha channel

The alpha channel is the 4th component of an RGB**A** color. It controls the _opacity_ of the color. A __0__ alpha means the color is fully invisible, while __255__ means it's fully opaque.

So, let's talk about a better way to color this `label` component. A straightforward solution is to use a blue color with an alpha channel.

This lesson discusses the main problems that arise when dealing with colors in an application and how mixing colors in a certain way provides the solution.

Before Getting Started

Theory

Using css-theming

Samples

Mixing Colors

Problems #

Solutions #

Using the alpha channel