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

# Step 1: Add custom prop

Adding additional props to the theme definition is easy:

```scss
$ct-themes: (
  'default': (
    'brightness': 'light',

    'border-radius': 3px // We're adding our own defined theme prop here that we'll use ourselves
  ),
  'default-dark': (
    'brightness': 'dark',

    'border-radius': 2px
  ),
);
```

In the above example, we added a `border-radius` prop to our themes. This allows us to change this `border-radius` value from theme to theme.

The next step is creating a dynamic CSS variable that points to this additional prop.

# Step 2: Link to a CSS variable

> **Note:** A dynamic CSS variable in this context is one that changes its values depending on the active theme.

We do this by using a SCSS mixin defined in `css-theming`:

```scss
@include ct-themes-apply {
  --border-radius: #{map-get($theme, 'border-radius')};
}
```

> **Note**: A [SCSS mixin](https://sass-lang.com/documentation/at-rules/mixin) simply defines some content that we can insert in multiple places.

The `ct-themes-apply` mixin allows you to define additional dynamic CSS variables tied with the theme. Inside, you'll have access to the resolved theme definition, in the `$theme` variable. So, all we have to do here is obtain the `border-radius` value from the theme using `map-get`:

```scss
map-get($theme, 'border-radius')
```

and create a new CSS variable from that:

```scss
--border-radius: #{SCSS EXPRESSION};
```

---

Now, we have a dynamic CSS variable that we can easily consume! This is the end result that we want to reach: a simple CSS variable that we can reference in our app.

# Step 1: Add custom prop

Adding additional props to the theme definition is easy:

```scss
$ct-themes: (
  'default': (
    'brightness': 'light',

    'border-radius': 3px // We're adding our own defined theme prop here that we'll use ourselves
  ),
  'default-dark': (
    'brightness': 'dark',

    'border-radius': 2px
  ),
);
```

In the above example, we added a `border-radius` prop to our themes. This allows us to change this `border-radius` value from theme to theme.

The next step is creating a dynamic CSS variable that points to this additional prop.

# Step 2: Link to a CSS variable

> **Note:** A dynamic CSS variable in this context is one that changes its values depending on the active theme.

We do this by using a SCSS mixin defined in `css-theming`:

```scss
@include ct-themes-apply {
  --border-radius: #{map-get($theme, 'border-radius')};
}
```

> **Note**: A [SCSS mixin](https://sass-lang.com/documentation/at-rules/mixin) simply defines some content that we can insert in multiple places.

The `ct-themes-apply` mixin allows you to define additional dynamic CSS variables tied with the theme. Inside, you'll have access to the resolved theme definition, in the `＄theme` variable. So, all we have to do here is obtain the `border-radius` value from the theme using `map-get`:

```scss
map-get($theme, 'border-radius')
```

and create a new CSS variable from that:

```scss
--border-radius: #{SCSS EXPRESSION};
```

---

Now, we have a dynamic CSS variable that we can easily consume! This is the end result that we want to reach: a simple CSS variable that we can reference in our app.

This lesson discusses how we can add custom theme props to our themes.

Before Getting Started

Theory

Using css-theming

Samples

Adding More Theme Props

Step 1: Add custom prop