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

Having CSS variables change values between different themes is the main way by which our theming platform will work. This lesson includes a simple example that toggles between a light and a dark theme of an app. This example will also show what we mean by _defining a theme_ and how we'll use the theme props in our app.

# Example: Toggling between dark and light mode

Let's assume our themes have 2 props, `--background` (background color) and `--color` (text color), and that we have 2 themes we want to define, _light_ and _dark_.

It's easy to switch themes by assigning a unique CSS class for each theme and attaching the theme we want to activate on the HTML element. This, in turn, applies the CSS variables to the target container of the theme, a notion we'll talk more about later.

The most basic example of this is:

In this lesson we'll discuss how to define our themes and how to use a theme's props in a simple example.

Before Getting Started

Theory

Using css-theming

Samples

Defining and Using Theme Props

Example: Toggling between dark and light mode #