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

## System defined themes

A theme that is defined by the developers of the app is called a **system defined theme**. In the simplest case, an app would have two defined themes: a _light_ and a _dark_ theme.

A system defined theme's props are defined by the designer of the app.

### Example

Assume that we have a `border-radius` value we use in cards in the app. Right now, it's a constant value and remains the same no matter the currently applied theme. But let's say we want it to change per theme so that we can tweak it between different themes. Our theming platform will be able to support this.

## User defined themes

We talked before about _system defined themes_, and how they're defined by the developers of the app. This means the app will have a fixed number of well-known themes that the user can choose from. Imagine that we want to allow the user to customize certain (or all) aspects of the theme; this is what we call _user defined themes_.

We learned in a previous lesson that we can access design values (CSS props) programmatically:

```javascript
const style = getComputedStyle(element);
const value = style.getPropertyValue(prop);
```

In a similar way, we can set those values:

```javascript
const style = getComputedStyle(element);
const value = style.setPropertyValue(prop, value);
```

In theory, this allows the user to not only choose one of our system defined themes, but even create one of their own and customize the props of the theme to whatever they like.

# System defined themes

A theme that is defined by the developers of the app is called a **system defined theme**. In the simplest case, an app would have two defined themes: a _light_ and a _dark_ theme.

A system defined theme's props are defined by the designer of the app.

## Example

Assume that we have a `border-radius` value we use in cards in the app. Right now, it's a constant value and remains the same no matter the currently applied theme. But let's say we want it to change per theme so that we can tweak it between different themes. Our theming platform will be able to support this.

# User defined themes

We talked before about _system defined themes_, and how they're defined by the developers of the app. This means the app will have a fixed number of well-known themes that the user can choose from. Imagine that we want to allow the user to customize certain (or all) aspects of the theme; this is what we call _user defined themes_.

We learned in a previous lesson that we can access design values (CSS props) programmatically:

```javascript
const style = getComputedStyle(element);
const value = style.getPropertyValue(prop);
```

In a similar way, we can set those values:

```javascript
const style = getComputedStyle(element);
const value = style.setPropertyValue(prop, value);
```

In theory, this allows the user to not only choose one of our system defined themes, but even create one of their own and customize the props of the theme to whatever they like.

This lesson talks about the different types of themes in an app.

Before Getting Started

Theory

Using css-theming

Samples

System and User Defined Themes

System defined themes #