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

# Introduction

Let's look at [discord](https://discordapp.com) for a second:

![](/api/collection/6289435580694528/5438307556130816/page/5306816243171328/image/5630566784303104)

![](/api/collection/6289435580694528/5438307556130816/page/5306816243171328/image/6443393103167488)


You'll notice that you can change the sidebar's theme and that it becomes unrelated to the main theme of the app. That's really convenient, and this leads to the idea of having multiple **theme categories** as we'll call them.

# Theme categories

Taking advantage of theme categories will allow you to create as many categories as you want so that you can apply themes at different levels of your app. Maybe you have some kind of a **launcher** page that you want to apply themes for. And maybe you also have some kind of _navbar_ or _sidebar_ to which you also want to scope another category of themes. Most of the functions in `css-theming` takes an optional `category` parameter, so each category scopes its themes so that you can deal with them individually.

It's a very powerful feature of `css-theming` and we'll learn now how to use it.

## Example

As an example, we'll be creating a theme category for the sidebar in our app.

First, we'll start by registering this new category. We use the `ct-themes-category-register` mixin for that:

```scss
// Don't forget this import in your variables files!
@import '../../node_modules/css-theming/src/scss/pure';

// Register a new themes category that we'll use for the sidebar
$ct-sidebar-themes: (
  'default': (
    'brightness': 'light',
  ),
  'default-dark': (
    'brightness': 'dark',
  )
);

@include ct-themes-category-register('sidebar', $ct-sidebar-themes, $applied-at: '.sidebar');
```

> **Note:** The default/main theme category of the app is `''` (empty string) in CSS, and `null` in javascript. The `Theme` object contains this `category` property.

As you can see, we just created a new theme category called **sidebar** with 2 themes inside of it. We have to provide that name when calling the mixin, the themes map, and also where you want to apply the theme.

This `.sidebar` is the element that the theme's CSS variables will be set in.

Next, we have to make sure to call `initializeTheming` for this category.

```javascript
// Initializes the main default category
initializeTheming();

// Initializes the sidebar category
initializeTheming( /* theme */ null, /* category */ 'sidebar');
```

This lesson explains what is meant by registering an additional theme category and how to do it.

Before Getting Started

Theory

Using css-theming

Samples

Registering Additional Theme Categories

Introduction #